nextjs-best-practices

Structure Next.js App Router components by defaulting to server components for data fetching and marking client components only when interactivity is needed. This approach enforces scalable UI boundaries and optimizes performance.

Fetch data in Next.js server components directly within the component using async/await. Apply revalidation strategies like ISR or no-store caching to control how fresh your fetched data remains across the application.

Next.js App Router routing requires specific file conventions including page.tsx for routes, layout.tsx for shared UI, loading.tsx for fallbacks, error.tsx for error boundaries, and not-found.tsx for 404 handling.

Use Next.js server actions when you need to handle form submissions and data mutations directly on the server. This pattern eliminates manual API endpoint creation and aligns with App Router performance best practices.

This guidance targets the Next.js App Router architecture, focusing on server components and new file conventions. Developers using the legacy Pages Router will need to migrate their structure to apply these specific routing and data patterns.