App Router

The App Router is the routing model in Next.js introduced in version 13 and now the recommended default. You build pages inside an app/ directory where the folder structure maps directly to URLs, and components run on the server unless you mark them otherwise. It replaces the older Pages Router and is built on React Server Components.

How does the App Router work?

In the App Router, every route is a folder, and special files inside it do specific jobs. A page.tsx file makes the folder a public URL; a layout.tsx wraps that page and its children in shared UI like a header or nav; loading.tsx shows an instant fallback while data streams in; and error.tsx catches failures for that segment. So app/blog/[slug]/page.tsx becomes /blog/some-post, with the square brackets capturing the dynamic part.

Components are Server Components by default. They run on the server, fetch their own data directly, and send finished HTML to the browser with no client JavaScript shipped for that piece. When you need interactivity — a form, a menu, anything using state or hooks — you add "use client" at the top of the file to opt that component into the browser. This split is what keeps App Router pages light: most of the page stays on the server, and only the interactive islands hydrate.

Why the App Router matters for B2B sites

For marketing and B2B sites, the App Router's server-first default is the whole point. Pages ship as real HTML through server-side rendering, so crawlers and AI answer engines see your content immediately instead of waiting on client-side JavaScript. You also get clean per-route control over static vs dynamic rendering: a pricing page can be statically generated and cached, while a personalized dashboard renders on request, all in the same app. Pages that change occasionally can also use incremental static regeneration to refresh in the background without a full rebuild.

That granularity is what makes the App Router a strong base for content-heavy sites — it pairs fast first loads with tidy URLs and built-in metadata APIs that keep canonicals and schema consistent. The guide to Next.js for marketing sites describes one way to structure an app/ directory with SEO in mind from the start.

FAQ

What is the difference between the App Router and the Pages Router?

The Pages Router is the older Next.js system where files in a pages/ directory become routes and components render with React on both server and client. The App Router lives in an app/ directory, is built on React Server Components, and makes server rendering the default — you opt individual components into the browser with "use client". The App Router is the recommended default for new Next.js projects, while the Pages Router remains supported.

Is the App Router good for SEO?

Yes. Because Server Components render to HTML on the server by default, App Router pages send complete markup to crawlers and AI answer engines without waiting on client-side JavaScript. The App Router also includes a built-in Metadata API for titles, descriptions, canonical URLs, and structured data, and lets you choose static or dynamic rendering per route, which helps both load speed and indexability.

Do I need "use client" on every component?

No. Components in the App Router are Server Components by default, which is what you want for most content. You only add "use client" to components that need interactivity — state, effects, event handlers, or browser-only APIs. Keeping the "use client" boundary as small as possible means less JavaScript ships to the browser and the rest of the page stays server-rendered.