Next.js App Router Fundamentals: Layouts, Pages and Routing

In the App Router, folders define routes and special files define what renders for them. Once you know the handful of file conventions, the structure of any Next.js app becomes easy to read.

Folders are routes

app/
  layout.tsx          -> wraps every page (html, body, header)
  page.tsx            -> /
  blog/
    page.tsx          -> /blog
    [slug]/
      page.tsx        -> /blog/hello-world
  (marketing)/        -> route group: organises files, not part of the URL
    pricing/page.tsx  -> /pricing

A folder only becomes a public route when it contains page.tsx (or route.ts for an API endpoint).

Layouts persist between pages

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        <main>{children}</main>
      </body>
    </html>
  );
}

Navigating between pages that share a layout keeps the layout mounted, so its state (an open sidebar, a playing video) survives.

Dynamic segments

// app/blog/[slug]/page.tsx
export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params; // params is a Promise in recent Next.js versions
  const post = await getPost(slug);
  return <article><h1>{post.title}</h1></article>;
}

Special files

• loading.tsx - instant loading UI while the page streams in.
• error.tsx - error boundary for the segment (must be a Client Component).
• not-found.tsx - rendered when you call notFound().
• route.ts - an API endpoint (GET, POST...) instead of a page.

Navigation

import Link from 'next/link';

<Link href={`/blog/${post.slug}`}>{post.title}</Link>

<Link> prefetches routes in the viewport, so most navigations feel instant. For navigation in code, use useRouter from next/navigation inside a Client Component.