nextjs-app-router

Structure Next.js App Router projects by defaulting to Server Components and explicitly marking interactive files with the "use client" directive. This pattern separates rendering strategies, keeping data fetching server-side while enabling client-side interactivity where needed.

Next.js App Router requires specific file conventions like layout.tsx for shared UI, page.tsx for routes, loading.tsx for fallbacks, error.tsx for error boundaries, not-found.tsx for 404s, template.tsx for re-rendering, and default.tsx for parallel routes.

Implement Server Actions to handle form submissions and data mutations directly on the server, and apply the "use cache" directive to optimize caching strategies. This approach streamlines data flows and improves application performance without creating separate API endpoints.

Use parallel routes to render multiple pages simultaneously in a single layout, and apply intercepting routes to load routes within the current layout context. These advanced routing patterns enable complex interfaces like modals and split views without full page transitions.

Yes, this resource provides specific migration patterns for proxy.ts to help you transition configurations smoothly. It addresses routing updates required for scalable Next.js 16+ applications using the modern App Router architecture.

Generate metadata for App Router files by exporting a static metadata object or a dynamic generateMetadata function from your layout.tsx and page.tsx files. This strategy ensures proper SEO and social sharing tags are applied across your routes.