Next.js App Router Guide
The App Router is the future of Next.js. Let's explore its powerful features.
File-Based Routing
Create routes with folders:
app/
├── page.tsx # /
├── about/
│ └── page.tsx # /about
├── blog/
│ ├── page.tsx # /blog
│ └── [slug]/
│ └── page.tsx # /blog/:slug
Server Components
Components are server-rendered by default:
// This runs on the server
async function BlogPost({ params }) {
const post = await db.getPost(params.slug);
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}
export default BlogPost;
Client Components
Add interactivity with 'use client':
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
Layouts
Share UI between pages:
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<body>
<nav>...</nav>
{children}
<footer>...</footer>
</body>
</html>
);
}
Loading States
Built-in loading UI:
// app/blog/loading.tsx
export default function Loading() {
return <div className="skeleton">Loading...</div>;
}
Error Handling
Graceful error boundaries:
// app/blog/error.tsx
'use client';
export default function Error({ error, reset }) {
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={reset}>Try again</button>
</div>
);
}
Data Fetching
Fetch data in server components:
async function getData() {
const res = await fetch('https://api.example.com/data', {
next: { revalidate: 3600 } // Revalidate every hour
});
return res.json();
}
export default async function Page() {
const data = await getData();
return <div>{data.title}</div>;
}
Conclusion
The App Router brings powerful patterns to Next.js. Embrace server components for faster, simpler applications.