Next.js App Router Patterns for Marketing Sites

The App Router gives marketing sites a cleaner architecture, but only if you use it with performance and SEO in mind. This guide shows the practical patterns that make Next.js marketing sites faster, easier to maintain, and more reliable for local service businesses.

Why App Router matters for marketing sites

App Router is not a silver bullet. It is a better architectural fit for sites that need:

• shared layouts and metadata
• fast static routes
• incremental updates without losing SEO
• selective client rendering for only the interactive parts

If you overcomplicate it, performance suffers. Use these patterns to keep the site simple.

Pattern 1: layout-based page structure

Use nested layouts to share common page elements and metadata.

• Root layout for global metadata and fonts
• Marketing layout for header, footer, and site shell
• Service layout for service page variants and local page structure

This keeps the page code clean and helps caching work correctly.

Pattern 2: static service pages first

Build core service pages as static or ISR pages.

• /services/web-development
• /services/seo
• /services/locations/melbourne

Avoid client-only rendering for the main service page. Keep the CTA, service copy, and proof visible in HTML.

Pattern 3: keep client components isolated

Use client components only for interactivity:

• form widgets
• chatbot or quiz components
• accordions and tabs where needed

Everything else should be a server component. This reduces bundle size and preserves SEO.

Pattern 4: route-level performance budgets

Different pages have different expectations.

• Homepage and service pages: < 2.5s LCP, < 0.1 CLS
• Blog pages: < 3s LCP, good content layout
• Team / about pages: still fast, but lower priority

Define budgets by route group and measure them regularly.

Pattern 5: shared metadata and SEO

Use the App Router metadata API in layouts.

• title, description, openGraph
• canonical URLs for location pages
• robots rules for pages you do not want indexed

Keep metadata generation in the route itself or in a shared helper.

Pattern 6: local content and navigation

Marketing sites should make it easy for users and crawlers to discover the local offer.

• link local service pages from the homepage
• use a visible "locations" block
• add internal links from blog posts to service pages

This improves both organic discoverability and conversion.

Implementation checklist

• Shared marketing layout is established
• Service pages are static or ISR
• Client components are only used for interactive elements
• Metadata is generated in App Router metadata
• Local page links are visible and consistent
• Performance budgets are defined by route group

Common mistakes

• Using client-side data fetching for core conversion pages
• Rendering the full hero through a client component
• Leaving route metadata duplicated or inconsistent
• Not validating performance after each release

Quick action plan

1. Audit the current route structure.
2. Move shared UI into layouts.
3. Convert core service pages to server-rendered routes.
4. Isolate interactive widgets in client components.
5. Monitor the performance of the homepage and top service routes.

The best App Router marketing sites are fast because they keep rendering simple and page intent clear. Build the page structure once, then focus on content and conversion.