Next.js Partial FAQ & Answers

Layouts in Next.js App Router share UI across multiple routes without re-rendering on navigation, preserving state and improving performance. Create layout.tsx in any route segment to wrap all child pages and nested segments. Root layout (app/layout.tsx) is required and wraps your entire application - must include and tags. Nested layouts: folder hierarchy determines nesting depth (app/blog/layout.tsx wraps all /blog routes). Layout receives children prop (nested page or layout) and optional params for dynamic segments. Layouts persist across navigation - component state maintained, no remounting occurs, only children re-render. Use cases: persistent navigation bars, sidebars, authentication wrappers, analytics providers, theme providers. Route groups: (folder) syntax creates multiple layouts without affecting URL structure - useful for different layouts per section. Metadata API: metadata exports in layouts apply to all child routes. Templates (template.tsx): similar to layouts but re-render on navigation - use when you need fresh state on each route change (animations, useEffect dependencies). Production tip: place shared data fetching in layouts to cache across child routes, avoiding redundant requests. Performance: layouts reduce bundle size by preventing duplicate code across routes, and improve Core Web Vitals by avoiding layout shift during navigation.

Next.js 15 App Router enables data fetching directly in Server Components using async/await without API routes. fetch() is extended with caching options: cache: 'force-cache' (cached), 'no-store' (fresh on every request), or next: { revalidate: seconds } for time-based revalidation. Important change in Next.js 15: fetch() defaults to cache: 'no-store' (not cached), requiring explicit cache: 'force-cache' for caching. Route-level configuration: export const dynamic = 'force-dynamic' (SSR every request), 'force-static' (SSG), or export const revalidate = 60 (ISR - revalidate every 60 seconds). On-demand revalidation: revalidatePath('/blog') or revalidateTag('posts') for targeted cache invalidation. Parallel fetching: use Promise.all([fetch(...), fetch(...)]) to fetch simultaneously. Sequential fetching: await each fetch sequentially when data depends on previous results. For non-fetch data sources (databases, SDKs), wrap with React's cache() function for request deduplication. Server Components can directly query databases, call third-party APIs, access file system - all server-only with zero client JavaScript. Streaming: wrap slow data fetches in Suspense boundaries to progressively render UI chunks as data becomes ready, improving Time to First Byte and perceived performance. Production best practice: use static rendering when possible (fastest), dynamic only when data must be fresh, and streaming for slow data sources to avoid blocking entire page render.

Dynamic routes use bracket notation for URL parameters: [slug], [id], [category]. File structure: app/blog/[slug]/page.tsx creates /blog/any-post-slug routes. Access params in Server Components: async function Page({ params }) { const { slug } = await params; }. Note: In Next.js 15, params is now a promise - must await before accessing properties. Generate static paths at build time with generateStaticParams: export async function generateStaticParams() { const posts = await getPosts(); return posts.map((post) => ({ slug: post.slug })); }. This enables Static Site Generation for dynamic routes. Catch-all routes: [...slug] matches multiple segments (/blog/2025/01/post). Optional catch-all: [[...slug]] also matches parent route (/blog). Multiple dynamic segments: app/shop/[category]/[product]/page.tsx for nested params. TypeScript typing: Next.js automatically types params based on folder structure. Dynamic metadata: export async function generateMetadata({ params }) { return { title: await getPostTitle(params.slug) }; }. Production pattern: combine generateStaticParams with revalidate for on-demand ISR. Use cases: blog posts, product pages, user profiles, documentation routes, multi-level taxonomies. Best practice: validate params in page component, return notFound() for invalid slugs, implement proper loading states for data fetching.

Server Actions are asynchronous functions that run exclusively on the server, enabling direct data mutations without creating API routes. Define with 'use server' directive at function or file level. Use in forms:

Layouts in Next.js App Router share UI across multiple routes without re-rendering on navigation, preserving state and improving performance. Create layout.tsx in any route segment to wrap all child pages and nested segments. Root layout (app/layout.tsx) is required and wraps your entire application - must include and tags. Nested layouts: folder hierarchy determines nesting depth (app/blog/layout.tsx wraps all /blog routes). Layout receives children prop (nested page or layout) and optional params for dynamic segments. Layouts persist across navigation - component state maintained, no remounting occurs, only children re-render. Use cases: persistent navigation bars, sidebars, authentication wrappers, analytics providers, theme providers. Route groups: (folder) syntax creates multiple layouts without affecting URL structure - useful for different layouts per section. Metadata API: metadata exports in layouts apply to all child routes. Templates (template.tsx): similar to layouts but re-render on navigation - use when you need fresh state on each route change (animations, useEffect dependencies). Production tip: place shared data fetching in layouts to cache across child routes, avoiding redundant requests. Performance: layouts reduce bundle size by preventing duplicate code across routes, and improve Core Web Vitals by avoiding layout shift during navigation.

Next.js 15 App Router enables data fetching directly in Server Components using async/await without API routes. fetch() is extended with caching options: cache: 'force-cache' (cached), 'no-store' (fresh on every request), or next: { revalidate: seconds } for time-based revalidation. Important change in Next.js 15: fetch() defaults to cache: 'no-store' (not cached), requiring explicit cache: 'force-cache' for caching. Route-level configuration: export const dynamic = 'force-dynamic' (SSR every request), 'force-static' (SSG), or export const revalidate = 60 (ISR - revalidate every 60 seconds). On-demand revalidation: revalidatePath('/blog') or revalidateTag('posts') for targeted cache invalidation. Parallel fetching: use Promise.all([fetch(...), fetch(...)]) to fetch simultaneously. Sequential fetching: await each fetch sequentially when data depends on previous results. For non-fetch data sources (databases, SDKs), wrap with React's cache() function for request deduplication. Server Components can directly query databases, call third-party APIs, access file system - all server-only with zero client JavaScript. Streaming: wrap slow data fetches in Suspense boundaries to progressively render UI chunks as data becomes ready, improving Time to First Byte and perceived performance. Production best practice: use static rendering when possible (fastest), dynamic only when data must be fresh, and streaming for slow data sources to avoid blocking entire page render.

Dynamic routes use bracket notation for URL parameters: [slug], [id], [category]. File structure: app/blog/[slug]/page.tsx creates /blog/any-post-slug routes. Access params in Server Components: async function Page({ params }) { const { slug } = await params; }. Note: In Next.js 15, params is now a promise - must await before accessing properties. Generate static paths at build time with generateStaticParams: export async function generateStaticParams() { const posts = await getPosts(); return posts.map((post) => ({ slug: post.slug })); }. This enables Static Site Generation for dynamic routes. Catch-all routes: [...slug] matches multiple segments (/blog/2025/01/post). Optional catch-all: [[...slug]] also matches parent route (/blog). Multiple dynamic segments: app/shop/[category]/[product]/page.tsx for nested params. TypeScript typing: Next.js automatically types params based on folder structure. Dynamic metadata: export async function generateMetadata({ params }) { return { title: await getPostTitle(params.slug) }; }. Production pattern: combine generateStaticParams with revalidate for on-demand ISR. Use cases: blog posts, product pages, user profiles, documentation routes, multi-level taxonomies. Best practice: validate params in page component, return notFound() for invalid slugs, implement proper loading states for data fetching.

Server Actions are asynchronous functions that run exclusively on the server, enabling direct data mutations without creating API routes. Define with 'use server' directive at function or file level. Use in forms: . Server Actions work with or without JavaScript (progressive enhancement) - forms submit via POST when JS disabled. Access FormData: async function create(formData: FormData) { const title = formData.get('title'); }. Validation: implement server-side validation (never trust client input), return errors via useFormState hook. Revalidation after mutations: call revalidatePath('/blog') or revalidateTag('posts') to update cached data. Call from Client Components: import and invoke directly with 'use server' functions. TypeScript: fully type-safe with inferred types from form inputs. Error handling: try/catch server errors, use error.tsx boundaries for uncaught errors. Security: Server Actions run on server, can access databases, environment variables, private APIs directly. Production patterns: (1) Form submissions with validation and error handling, (2) Database mutations (INSERT, UPDATE, DELETE), (3) File uploads to cloud storage, (4) Third-party API calls, (5) Authentication actions (login, logout, signup). Best practices: validate all inputs server-side, use zod or yup schemas, implement rate limiting for public actions, return serializable data only (no functions/classes), handle errors gracefully with user-friendly messages. React 19 features: useFormState for form state management, useFormStatus for pending states, useOptimistic for optimistic UI updates before server response. Server Actions are production-ready in Next.js 14+ and fundamental to modern Next.js development.