Question 1

How do I decide between Server and Client Components in Next.js?

Accepted Answer

Use a Client Component with 'use client' when you need useState, useEffect, or event handlers; otherwise default to a Server Component. For components needing both, split into a Server parent that fetches data and a Client child that handles interactivity.

Question 2

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

Accepted Answer

Next.js defaults to static fetching cached at build time. Use the revalidate option for time-based ISR, 'no-store' for dynamic per-request data, and revalidatePath or revalidateTag for on-demand cache invalidation.

Question 3

What do loading.tsx and error.tsx files do in Next.js?

Accepted Answer

loading.tsx renders an automatic loading UI while the route segment's data loads, and error.tsx acts as an error boundary catching runtime errors in that segment. Both are file conventions in the App Router.

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 a library 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 states, ignoring error boundaries, and shipping large client bundles. Start with Server Components and add client interactivity only where needed.

nextjs-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about nextjs-best-practices

Related Skills

shai-scaffold-nextjs-app

performance-budget-enforcer

code-review

astro