The Next.js App Router fundamentally changes how we build web applications. With server components as the default, layouts that persist across navigation, and streaming built in, it provides a powerful foundation for content-rich sites like blogs.
Why the App Router?
The App Router introduces a file-system based routing model with nested layouts, loading states, and error boundaries. Each route segment can be a server component by default, meaning zero JavaScript is shipped to the client unless explicitly needed.
Server Components by Default
Server components run exclusively on the server. They can directly access databases, file systems, and environment variables without exposing anything to the client bundle.
// Server Component — runs on the server, zero client JS
export default async function PostPage({ params }) {
const { slug } = await params;
const post = await getPost(slug);
return (
<article>
<h1>{post.title}</h1>
<div>{post.content}</div>
</article>
);
}Route Structure
A blog built with the App Router uses a clean folder structure. Each route is a directory with a page.tsx file, and shared UI goes into layout.tsx files.
// app/[locale]/layout.tsx
export default async function LocaleLayout({
children,
params,
}: {
children: React.ReactNode;
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
return (
<html lang={locale}>
<body>{children}</body>
</html>
);
}Dynamic Metadata
Each page can export a generateMetadata function for SEO-friendly titles and descriptions that are resolved at request time.
// Dynamic metadata per page
export async function generateMetadata({ params }) {
const { slug } = await params;
const post = await getPost(slug);
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}Performance Benefits
By keeping components on the server by default, the App Router significantly reduces the client-side JavaScript bundle. Only interactive components marked with 'use client' are sent to the browser, resulting in faster initial page loads and better Core Web Vitals.