Next.js App Router: A Practical Guide for Real Projects

The App Router changed how Next.js apps are structured. After building several production sites with it, here is what actually matters day to day.

Server components are the default

Every component in the app folder is a server component unless you add "use client" at the top. Server components run only on the server, so they can read from a database, call private APIs and ship zero JavaScript to the browser.

Use a client component only when you need state, effects, event handlers or browser APIs. Keep those leaves small, and keep the data fetching in the server parent.

// app/projects/page.tsx (server component)
export default async function Projects() {
  const projects = await getProjects();
  return <ProjectGrid projects={projects} />; // ProjectGrid can be a client component
}

Layouts keep state between pages

A layout.tsx wraps its children and does not re-render when you navigate between sibling pages. Put your header, footer and providers there. Nested layouts let a dashboard have its own shell without touching the public site.

Loading and error boundaries

Add loading.tsx for instant skeletons while a segment streams, and error.tsx to catch failures in that segment. Be careful with loading.tsx on pages that call notFound(): streaming starts before the status code is known, which can turn a missing page into a soft 404.

Caching and revalidation

Data fetched on the server can be cached and revalidated by time or on demand.

• Time based: export const revalidate = 60 rebuilds a page at most once a minute.
• On demand: call revalidatePath or revalidateTag after you change content, for example from an admin dashboard.

This gives you static speed with fresh content, which is ideal for blogs and portfolios.

Metadata for SEO

Export generateMetadata from a page to set the title, description, canonical URL and Open Graph image from the data you already loaded. Add JSON-LD for articles and you have the technical SEO basics covered.

Common mistakes

1. Marking a whole page as a client component for one button.
2. Fetching the same data in many components instead of one server parent.
3. Forgetting that environment variables without the NEXT_PUBLIC_ prefix are server only.

Takeaway

Think server first, push interactivity to small client leaves, and use revalidation instead of fetching on every request. Your pages get faster and your bundles get smaller.