Question 1

When should I use Server Components vs Client Components in Next.js?

Accepted Answer

Use Server Components by default for data fetching, layouts, and static content. Add 'use client' only when you need useState, useEffect, or event handlers. For mixed needs, split into a Server parent with a Client child.

Question 2

How do I configure caching and revalidation in Next.js App Router?

Accepted Answer

Next.js caches fetches statically by default. Use the revalidate option for time-based ISR, revalidatePath or revalidateTag for on-demand invalidation, and the no-store option for fully dynamic per-request data.

Question 3

What are route groups and parallel routes in Next.js?

Accepted Answer

Route groups use (name) folders to organize routes without affecting the URL. Parallel routes use @slot folders to render multiple pages in the same layout, while intercepting routes with (.) enable modal overlays.

Question 4

What are common Next.js App Router anti-patterns to avoid?

Accepted Answer

Avoid adding 'use client' everywhere, fetching data in client components, skipping loading.tsx and error.tsx states, and shipping large client bundles. Prefer Server Components by default and use dynamic imports for heavy components.

Question 5

When should I use server actions instead of API route handlers?

Accepted Answer

Use server actions marked with 'use server' for form submissions, data mutations, and revalidation triggers. Use route handlers for external API endpoints. Always validate inputs with Zod and return typed responses.

nextjs-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about nextjs-best-practices

Related Skills

ck:web-frameworks

vercel-deployment

nextjs-optimization

astro