Next.js App Router Guide

Introducing the App Router

The App Router is a paradigm shift in Next.js 13+, providing more control over layouts, loading states, and data fetching. It uses Server Components by default for better performance.

File-based Routing

Create routes by adding folders and files in the app directory. Each folder corresponds to a segment in the URL path.

• app/page.tsx - Home page (/)
• app/blog/page.tsx - Blog index (/blog)
• app/blog/[slug]/page.tsx - Dynamic blog posts (/blog/post-1)

Layouts and Nested Routing

Layouts allow you to share UI between routes. Create a layout.tsx file in any folder to define shared components like navigation.

export default function Layout({ children }: { children: React.ReactNode }) {
    return (
      
        {children}
      
    );
  }

Loading States

Add loading.tsx files to show loading UI while pages are being fetched. This improves perceived performance.

Server Components

Server Components run on the server, reducing bundle size and enabling direct database queries. Client Components are opt-in using the "use client" directive.

The App Router offers a more intuitive way to build full-stack applications. Experiment with nested layouts and streaming to see the performance benefits firsthand.