Master the new App Router, Server/Client components, data fetching patterns, and layouts in Next.js.
The App Router introduced in Next.js 13 replaces the Pages Router with file-system routing inside the app/ directory. It enables React Server Components, streaming, nested layouts, and parallel routes.
You can migrate incrementally — the Pages Router and App Router can coexist in the same project during transition.
By default, every component in the App Router is a Server Component. Add "use client" only when you need interactivity, browser APIs, or hooks like useState.
Fetch data in Server Components and pass it down as props. This reduces client bundle size and improves time-to-first-byte.
Use async/await directly in Server Components. For mutations, use Server Actions. For client-side revalidation, combine SWR or React Query with route handlers.
// Server Component — fetch data directly
export default async function PostsPage() {
const posts = await fetch('https://api.example.com/posts', {
next: { revalidate: 60 } // ISR: revalidate every 60s
}).then(r => r.json())
return <PostList posts={posts} />
}Each route segment can have its own layout.tsx that wraps all children. Shared UI like navigation lives here and is never re-rendered on navigation, preserving state.
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="flex gap-8">
<Sidebar />
<main className="flex-1">{children}</main>
</div>
)
}This guide targets Next.js 15 with the App Router. The Pages Router has different conventions.
Frontend engineer specialising in React and Next.js.
Join 15,000+ Indian developers and creators receiving our curated newsletter every Sunday morning.
No spam. Only high-quality content. Unsubscribe anytime.