Next.js 15 App Router: Complete Guide to Modern Routing

Understanding the App Directory Structure

The App Router uses a file-system-based routing convention where folders define routes and special files like page.tsx, layout.tsx, and loading.tsx define UI elements. Each folder represents a route segment that maps to a URL segment. The page.tsx file makes a route publicly accessible, while layout.tsx provides shared UI that persists across multiple pages.

This structure is more intuitive than the Pages Router and supports powerful features like nested layouts and streaming. Understanding this hierarchy is fundamental to building scalable Next.js applications.

Server Components by Default

In the App Router, all components are Server Components by default. This means they render on the server, reducing the JavaScript bundle sent to the client and improving initial page load times. Server Components can directly access backend resources like databases and APIs without exposing sensitive information to the client.

They cannot use browser-only APIs, event handlers, or React hooks like useState. To use client-side interactivity, explicitly mark components with the "use client" directive at the top of the file. This creates a clear boundary between server and client code.

Data Fetching and Caching Strategies

Next.js 15 provides enhanced data fetching capabilities with automatic request deduplication and caching. Use the native fetch API with extended options to control caching behavior. The revalidate option sets how long data should be cached before refetching.

For dynamic data that should never be cached, use { cache: "no-store" }. Server Components can be async, making it natural to fetch data at the component level. Use generateStaticParams for static generation with dynamic routes.

The new unstable_cache API provides fine-grained control over caching for database queries and external APIs.

Streaming and Suspense Integration

Streaming allows you to progressively render UI from the server, sending content to the client as it becomes ready. Wrap components in React Suspense boundaries to show loading states while data fetches. The loading.tsx file creates automatic Suspense boundaries for route segments.

This dramatically improves perceived performance, especially for pages with multiple data dependencies. Users see content faster, and slow operations don't block the entire page. Streaming works seamlessly with Server Components and is one of the most powerful features of the App Router.

Parallel and Intercepting Routes

Parallel routes let you render multiple pages in the same layout simultaneously, perfect for dashboards showing different data sections. Define parallel routes using folders with the @ prefix like @analytics and @team. Intercepting routes allow you to load a route from another part of your application while keeping the context of the current page, ideal for modals and overlays.

These advanced routing patterns enable complex UI experiences that would be difficult to implement with traditional routing. They're particularly useful for multi-panel layouts and conditional rendering based on route context.

Route Handlers and API Routes

Route Handlers replace API Routes in the App Router, providing a more flexible way to create API endpoints. Create route.ts files with exported functions named after HTTP methods (GET, POST, etc.). Route Handlers run on the server and can use Node.js APIs directly.

They support Web APIs like Request and Response, making them familiar if you've worked with modern web APIs. Use Route Handlers for webhooks, authentication endpoints, and serverless functions. They integrate seamlessly with Edge Runtime for low-latency API responses.

Metadata and SEO Optimization

Next.js 15 provides a powerful Metadata API for managing page metadata and improving SEO. Export a metadata object or generateMetadata function from page or layout files to define titles, descriptions, Open Graph tags, and more. The metadata cascades down the route tree, with child routes inheriting and overriding parent metadata.

For dynamic metadata based on route parameters, use generateMetadata with async data fetching. This ensures proper meta tags for social sharing and search engine crawling. The Metadata API also supports JSON-LD for structured data and viewport configuration.