App Router Fundamentals: Routing, Layouts and Navigation

The App Router is the foundation of modern Next.js. Interviewers check that you can map URLs to folders, share UI with layouts, use the special files for loading and errors, and navigate without full page reloads.

1. How does file-based routing work in the App Router?

Folders inside app/ become URL segments; a page.tsx makes the segment publicly reachable. Files that are not special (components, utils) can live beside pages without becoming routes — “colocation”.

app/
├── page.tsx                    → /
├── about/page.tsx              → /about
├── courses/
│   ├── page.tsx                → /courses
│   └── [slug]/page.tsx         → /courses/react-basics
└── (marketing)/pricing/page.tsx → /pricing   (route group: folder name not in URL)

2. What are layouts and templates?

A layout.tsx wraps all pages below it and keeps its state across navigation — sidebars, headers, providers. The root layout must render <html> and <body>. A template.tsx is similar but re-mounts on every navigation — useful for enter animations or resetting state.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="dashboard">
      <Sidebar />          {/* stays mounted while child pages change */}
      <main>{children}</main>
    </div>
  );
}

3. Which special files should you know?

• page — the route's UI.
• layout / template — shared wrappers.
• loading — instant loading UI (a Suspense boundary).
• error — error boundary for the segment (must be a client component).
• not-found — rendered by notFound().
• route — an API endpoint (Route Handler).
• global-error, default (parallel routes), plus metadata files: sitemap, robots, opengraph-image, icon.

4. How do dynamic and catch-all routes work?

[id] matches one segment; [...slug] matches one or more; [[...slug]] also matches zero (optional). In Next.js 15+, params and searchParams are Promises — await them. Use generateStaticParams to pre-render known paths at build time.

// app/docs/[...slug]/page.tsx
export async function generateStaticParams() {
  return (await getAllDocs()).map(d => ({ slug: d.path.split('/') }));
}

export default async function DocPage({ params }: { params: Promise<{ slug: string[] }> }) {
  const { slug } = await params;
  const doc = await getDoc(slug.join('/'));
  if (!doc) notFound();
  return <article dangerouslySetInnerHTML={{ __html: doc.html }} />;
}

5. How do you navigate between pages?

Use <Link href> for client-side navigation with automatic prefetching of visible links in production; use useRouter() (from next/navigation) in client components for programmatic navigation — push, replace, refresh, back. Read the current path with usePathname and query with useSearchParams. On the server, use redirect().

'use client';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';

export function Nav() {
  const pathname = usePathname();
  const router = useRouter();
  return (
    <nav>
      <Link href="/courses" className={pathname.startsWith('/courses') ? 'active' : ''}>Courses</Link>
      <button onClick={() => router.push('/login?next=' + encodeURIComponent(pathname))}>Sign in</button>
    </nav>
  );
}

6. What are route groups and private folders?

Route groups (name) organise routes or give different layouts to sections without affecting the URL — (marketing) and (app) with separate root layouts. Private folders _name are excluded from routing entirely — handy for internal components.

7. What are parallel and intercepting routes?

Parallel routes (@slot folders) render several pages in the same layout at once — a dashboard with independent analytics and team panels, each with its own loading and error states. Intercepting routes ((.)photo/[id]) show a route in the current context — a photo opening in a modal over the feed while the URL changes, yet a full page on direct visit or refresh.

8. How do you set SEO metadata?

Export a static metadata object or an async generateMetadata function from layouts and pages. Next.js merges them down the tree and renders title, description, canonical, Open Graph and robots tags. Use title.template in the root layout for consistent titles.

// app/layout.tsx
export const metadata = {
  metadataBase: new URL('https://www.learnfrenzy.com'),
  title: { default: 'LearnFrenzy', template: '%s | LearnFrenzy' },
  description: 'Free interview preparation, aptitude and coding practice.',
};