nextjs-best-practices

Next.js Best Practices - App Router Development Standards Guide

Skill Overview

Next.js Best Practices is a Claude AI skill that provides the core standards and best practices for developing with the Next.js App Router. It helps developers use Server Components, data fetching patterns, and routing organization correctly.

Use Cases

1. Next.js Project Architecture Decisions

When you need to choose an appropriate technical approach for a new project, this skill helps you determine when to use Server Components, when Client Components are required, and how to organize the route structure to keep the codebase maintainable.

2. Performance Optimization and Troubleshooting

When the project loads slowly, the bundle size becomes too large, or caching is configured incorrectly, this skill explains the correct data fetching patterns, caching configuration, and image optimization methods to identify and resolve performance bottlenecks.

3. Team Coding Standards

For scenarios that require consistent team-wide coding conventions, this skill offers a comprehensive best-practices reference. It covers project structure, API routes, Server Actions usage guidelines, and more—helping establish a consistent code style.

Core Features

1. Server/Client Component Selection Decision Tree

With a clear decision flowchart, quickly determine whether a component should be server-rendered or client-rendered. It includes key decision criteria such as useState, useEffect, and event handlers, along with architectural recommendations for combining both approaches.

2. Data Fetching and Caching Strategy

Explains Next.js’s three data fetching modes (static, ISR, dynamic), and which patterns should be used for different data sources (databases, APIs, user input). It also includes complete cache layering and revalidation methods.

3. Routing and Project Structure Conventions

Provides file conventions for the App Router, including the purposes of page.tsx, layout.tsx, loading.tsx, and other files. It also covers advanced patterns such as route groups, parallel routes, and intercepting routes, along with when to use them.

Common Questions

When should Next.js use 'use client'?

Only when a component needs React Hooks (such as useState or useEffect), browser APIs (such as window or localStorage), or event handlers (onClick, onChange) should you add the 'use client' directive. By default, all components are Server Components. Keeping it that way by default provides better performance and a smaller bundle size.

What caching strategy should Next.js use for data fetching?

Use static generation (build-time caching) by default—it works well for content that rarely changes. For content that needs periodic updates, use ISR (set a revalidate time). If you need the latest data on every request, use no-store. Database queries should be executed directly in Server Components, while API calls should use fetch with appropriate cache options configured.

What routing organization methods does Next.js App Router support?

Route groups (name) are used to organize files without affecting the URL structure. Parallel routes (@slot) allow rendering multiple independent pages at the same level. Intercepting routes (.) are used for overlay scenarios such as modals. By using these patterns appropriately, you can keep the code structure clear and aligned with business logic.

How can Next.js avoid common anti-patterns?

Avoid adding 'use client' to every component; prefer Server Components first. Don’t fetch data inside client components—move data fetching to the server. Remember to use loading.tsx and error.tsx to provide loading and error states. For large components, use dynamic imports for code splitting.