Next.jsReactApp Router
Next.js App Router: Complete Guide
Everything you need to know about the Next.js App Router and its powerful features.
8 min read
Next.js App Router: Complete Guide
The App Router is Next.js's new paradigm for building React applications with server-first rendering.
File-Based Routing
app/
page.tsx # /
about/page.tsx # /about
blog/[slug]/page.tsx # /blog/:slug
(auth)/login/page.tsx # /login (grouped)
Layouts
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<body>
<Header />
{children}
<Footer />
</body>
</html>
);
}
Data Fetching
// Server Component - direct fetch
async function Page() {
const data = await fetch('https://api.example.com/data');
return <div>{data.title}</div>;
}
// With revalidation
export const revalidate = 3600; // Revalidate every hour
Server Actions
'use server';
async function createPost(formData: FormData) {
const title = formData.get('title');
await db.posts.create({ title });
revalidatePath('/posts');
}
Streaming & Suspense
<Suspense fallback={<Loading />}>
<SlowComponent />
</Suspense>
The App Router makes full-stack React development simple and performant!