Next.js App Router
Overview
While React is a library for rendering UI, Next.js is the comprehensive, industry-standard framework built on top of React. It provides the routing, server architecture, and build tooling required to deploy enterprise React applications.
In 2023, Next.js completely rewrote its architecture, introducing the App Router (/app directory).
The App Router utilizes a file-system based routing mechanism. You do not write <Route path="/"> code like in React Router. Instead, if you create a folder named /dashboard, and place a file named page.tsx inside it, Next.js automatically creates a /dashboard URL route on your website.
Crucially, the App Router is built natively on top of React Server Components (RSC). Every page.tsx and layout.tsx is a Server Component by default, making Next.js the most powerful way to build high-performance, SEO-optimized React applications.
Syntax
/*
Directory Structure:
app/
├── layout.tsx (The global wrapper: contains <html> and <body>)
├── page.tsx (The home page: '/'
├── about/
│ └── page.tsx (The about page: '/about')
└── blog/
├── layout.tsx (A nested layout specifically for the blog area)
└── [slug]/
└── page.tsx (A dynamic route: '/blog/my-first-post')
*/
// Inside app/about/page.tsx:
export default function AboutPage() {
return <h1>About Our Company</h1>;
}Common Pitfalls
- Naming files incorrectly: In the App Router, folder names dictate the URL path, but only specific, reserved filenames actually render UI. If you name your file
About.tsxinstead ofpage.tsx, Next.js will completely ignore it, and visiting/aboutwill throw a 404 error.
Interview Questions
layout.tsx in the Next.js App Router.layout.tsx is a UI wrapper that wraps the page.tsx files within its directory (and any subdirectories). Crucially, layouts maintain their state and do NOT re-render when a user navigates between pages within that layout. This makes them perfect for persistent UI elements like Navbars, Sidebars, or Audio Players.
/users/:id) in the Next.js App Router?You define a dynamic route by creating a folder with square brackets. E.g., app/users/[id]/page.tsx. The page.tsx component will then receive the dynamic URL segment as a params object in its props: ({ params }) => <h1>{params.id}</h1>.
Real-World Example
Special File Conventions: This declarative file system completely eliminates the need to manually wire up React Routers, Error Boundaries, and Suspense wrappers. You just drop the files in the folder, and the framework builds the optimal React tree under the hood.
// Next.js provides reserved filenames that automatically handle
// complex React features (like Suspense and ErrorBoundaries) for you.
// app/dashboard/page.tsx
// The actual server component that fetches data
export default async function Dashboard() {
const data = await fetchDashboardData();
return <main>{data}</main>;
}
// app/dashboard/loading.tsx
// Next.js automatically wraps page.tsx in <Suspense fallback={<Loading />}>
export default function Loading() {
return <div className="spinner">Loading dashboard...</div>;
}
// app/dashboard/error.tsx
// Next.js automatically wraps page.tsx in an <ErrorBoundary>
// Note: Error components MUST be Client Components!
"use client";
export default function Error({ error, reset }) {
return <button onClick={reset}>Try Again</button>;
}Check Your Knowledge
Test your understanding of Next.js App Router with these quick questions.