Question 1

How do I decide between Server and 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 Client children.

Question 2

What data fetching strategy should I use in Next.js App Router?

Accepted Answer

Default fetch is cached at build time for static content. Use the revalidate option for ISR time-based refresh, or no-store for dynamic per-request data. Fetch in Server Components rather than client-side.

Question 3

How do Next.js route groups and parallel routes work?

Accepted Answer

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

Question 4

When should I use Server Actions in Next.js?

Accepted Answer

Use Server Actions for form submissions, data mutations, and revalidation triggers. Mark functions with 'use server', validate all inputs with tools like Zod, return typed responses, and handle errors gracefully.

Question 5

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 boundaries, and shipping large client bundles. Start with Server Components and use dynamic imports for heavy components.

nextjs-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about nextjs-best-practices

Related Skills

Next.js Project Setup

vercel-deployment

webapp-testing

react-next-modern