---
title: Next Best Practices
category: product
entity_type: skill
price: $15
canonical: https://forgehouse.ai/skills/next-best-practices/
lang: en
hreflang_alt: https://forgehouse.ai/tr/skiller/next-best-practices/
last_updated: 2026-06-20
---

# Next Best Practices

> Next.js best practices: file conventions, RSC boundaries, data patterns, async APIs…

A working reference of Next.js best practices covering file conventions, React Server Component boundaries, async APIs, data patterns, metadata, error handling, and image and font optimization. It enforces the disciplines that actually matter in production: keeping the use-client boundary at the leaf, awaiting async params, generating metadata from a single source, and never shipping a route without its loading, error, and not-found states.

## Use cases
- Keeping the use-client boundary small to shrink the JS bundle
- Migrating to async params and searchParams on Next.js 15 and up
- Generating SEO metadata, sitemap, and robots from one source
- Avoiding data-fetch waterfalls with parallel Promise.all
- Adding error, loading, and not-found states to every route
- Optimizing images and fonts for Core Web Vitals

## Benefits
- Cut client JavaScript by isolating interactivity at the leaf
- Catch breaking changes at build time instead of in production
- Rank better with single-source dynamic metadata and OG images
- Eliminate blank pages with mandatory failure-state coverage

## What’s included
- Server and client boundary wrapper pattern with right and wrong examples
- Async params migration pattern for Next.js 15 and up
- Data-fetch waterfall avoidance with parallel fetching
- Topic references for metadata, route handlers, runtime selection, and hydration
- An eight-point validation checklist for review
- Top-five field traps with one-line fixes

## Who it’s for
For Next.js developers who want App Router code that is fast, SEO-correct, and production-safe without learning every pitfall the hard way.

## How it runs
Misplace a special file in Next.js and it fails silently, not loudly. That is why this review starts at file conventions and works down to an explicit cache strategy on every fetch.
1. Audits file conventions first: special files in the right places, route segments and groups correct, and the v16 rename respected (middleware becomes proxy), because a misplaced file fails silently rather than loudly.
2. Enforces server/client boundary discipline with the wrapper pattern: 'use client' spreads upward through imports, so interactive pieces are isolated at the leaves while pages, grids and lists stay server-rendered and ship no JS.
3. Migrates async APIs for Next.js 15+: params, searchParams, cookies() and headers() are all Promises now, so every page, layout and generateMetadata gets the await, and waterfalls get collapsed into Promise.all.
4. Requires the failure-mode trio on every route: loading.tsx skeleton, error.tsx with a reset/retry, not-found.tsx with a way forward. A network failure showing a blank page is treated as a release blocker.
5. Keeps metadata in one source of truth: generateMetadata produces title, description, OG, canonical and alternates; manual meta tags in page bodies are banned, sitemap.ts and robots.ts live in code.
6. Closes on the verification checklist: Zod validation inside Server Actions, next/image with sizes and priority on the LCP element, NEXT_PUBLIC_ prefix rules, and an explicit cache strategy (force-cache, no-store or revalidate) on every fetch.

## FAQ
### We're still on the Pages Router. Is this reference relevant to us?
Only partially. The image, font, and metadata fundamentals carry over, but the core disciplines, RSC boundary placement, async params migration, and the route-level loading/error/not-found convention, all assume the App Router. It's most valuable while or after you switch.

### What's the concrete discipline that actually shrinks my JS bundle?
Keeping the use-client boundary at the leaf: interactive bits get isolated into the smallest possible client component while everything above stays on the server. The reference shows the wrapper pattern with right and wrong examples, because the common mistake is marking a whole page client for one button.

### Does it scan my existing codebase and flag violations automatically?
No. It's a working reference plus an eight-point validation checklist you apply during review, not a lint rule or scanner. You bring the discipline of running the checklist; it brings the list of what actually matters in production.

## Price
$15, one-time, no subscription. VAT included.

Related guide: [AI code review and developer workflow](https://forgehouse.ai/guides/ai-code-review/)