Next.js: Routing, Layouts, and Dynamic Segments

One of the most common Next.js interview questions is:

Explain the routing system of the Next.js App Router. How do Layouts, Templates, and Route Groups differ, and how do you handle dynamic parameters?

The App Router introduced file-system based routing built on React Server Components. Understanding page layouts, navigation hierarchies, and rendering states is essential for building scalable applications.

1. App Router File Conventions

Routes are defined by folders. A route is a nested folder structure leading to a leaf folder containing a special page file:

• page.tsx: The unique UI of a route, making the path publicly accessible.
• layout.tsx: Shared UI for a segment and its children. Layouts preserve state, remain interactive, and do not re-render when navigating between siblings.
• template.tsx: Similar to layouts but creates a new instance for each child on navigation. State is reset, and effects run on every route change.
• loading.tsx: An automatically wrapped React Suspense fallback UI for loading states.
• error.tsx: An automatically wrapped React Error Boundary UI to catch runtime routing or data fetching crashes.

app/
 ├── layout.tsx         (Root Layout)
 ├── page.tsx           (Homepage: /)
 └── dashboard/
      ├── layout.tsx    (Dashboard Layout - wraps children)
      ├── loading.tsx   (Skeleton/Spinner UI)
      └── page.tsx      (Dashboard Page: /dashboard)

2. Layouts vs. Templates

Interviewers frequently ask when to use template.tsx instead of layout.tsx:

3. Dynamic Segments & Dynamic Routes

When you don't know the segment names beforehand (e.g. blog posts, product IDs), you create a dynamic folder wrapped in square brackets: [slug].

A. Simple Dynamic Route (app/blog/[id]/page.tsx)

Resolves to /blog/123, /blog/hello-world, etc. The parameter is passed to the page component:

type Props = {
  params: Promise<{ id: string }>;
};
 
export default async function BlogPost({ params }: Props) {
  const { id } = await params;
  return <h1>Blog Post ID: {id}</h1>;
}

B. Catch-All Segments (app/shop/[...slug]/page.tsx)

Matches /shop/clothes, /shop/clothes/shirts/blue. The slug param is passed as an array: ['clothes', 'shirts', 'blue'].

C. Optional Catch-All (app/shop/[[...slug]]/page.tsx)

Matches all routes above, plus /shop (without dynamic segments). The array parameter will be undefined on /shop.

4. Route Groups (groupname)

Folder names wrapped in parentheses represent a Route Group: (marketing), (auth).

• Route groups are omitted from the URL path structure.
• They are used to organize files logically or to define nested layouts for specific groups of sub-pages without adding segment names to the paths.

app/
 ├── (auth)/
 │    ├── layout.tsx    (Auth Layout: e.g. login cards)
 │    ├── login/page.tsx   (Resolves to /login)
 │    └── register/page.tsx(Resolves to /register)

Key Takeaways

• File-based Routing: App Router uses nested folders to map URLs; special file names declare UI behaviors.
• Layout Persistence: Layouts do not re-render during nested navigation, preserving client state like scrolling position.
• Template Re-mounts: Use templates when you need custom CSS animations or page view analytics tracking triggered on every single route change.
• Dynamic Segment destruct: Always define param models correctly and resolve dynamic params asynchronously if using newer Next.js patterns.