nextjs-app-router

File-based routing in the Next.js App Router uses folders to define routes and specific files like page.tsx for UI components within the app directory. This structure enables nested layouts and dynamic routes for scalable applications.

Server components are the default in the Next.js app directory, fetching data securely on the server. You opt into client components for interactivity by adding the 'use client' directive to handle browser-side state and events.

Data fetching in Next.js server components supports direct database queries and API calls with built-in caching. You can control data freshness using revalidation patterns and server actions to mutate data without creating separate API endpoints.

Production Next.js patterns mandate loading.tsx for skeleton loading states and error.tsx for error boundaries. While not strictly required for every route, implementing them ensures graceful UI fallbacks during data fetching and runtime errors.

Defining metadata in the Next.js app directory uses a static metadata object or generateMetadata function inside layout.tsx and page.tsx files. Nested layouts allow shared UI structures across routes while maintaining distinct metadata configurations.