Next.js App Router Guide

Next.js 13+ introduced the App Router, a new paradigm for building React applications. Let's explore its features.

The App Router Paradigm

Key differences from Pages Router:

• Server Components by default
• Nested layouts for shared UI
• Streaming for improved loading

File-Based Routing

Route Structure

1. page.tsx - defines a route
2. layout.tsx - shared layouts
3. loading.tsx - loading states
   • Suspense boundaries
   • Skeleton UI
4. error.tsx - error handling

Copy
1// app/dashboard/page.tsx
2export default async function DashboardPage() {
3  const data = await fetchDashboardData();
4
5  return (
6    <main>
7      <h1>Dashboard</h1>
8      <Stats data={data.stats} />
9      <RecentActivity items={data.activity} />
10    </main>
11  );
12}

Data Fetching

"The best request is no request."

• Next.js Philosophy

Performance Tips

Optimize your Next.js app:

• Image optimization with next/image
• Font optimization with next/font
• Client-side fetching Server Components for initial data

Check out Next.js Docs for comprehensive guides!