nextjs-best-practices
sickn33/agentic-awesome-skills
Next.js App Router principles: Server Components, data fetching, routing patterns.
What is nextjs-best-practices?
A reference guide for Next.js App Router development covering Server vs Client Components, data fetching strategies, routing conventions, and performance optimization. Use this when building or reviewing Next.js applications to follow best practices and avoid common anti-patterns.
- Explains Server vs Client Component decision-making with clear decision trees
- Provides data fetching patterns including static, ISR, and dynamic strategies
- Documents file conventions and route organization for App Router structure
- Covers API route handlers with HTTP methods and validation practices
- Outlines performance optimization techniques for images and bundle size
- Details caching strategies with request, data, and full-route layers
How to install nextjs-best-practices
npx skills add https://github.com/sickn33/agentic-awesome-skills --skill nextjs-best-practicesHow to use nextjs-best-practices
- 1.Review the Server vs Client Components decision tree to determine component type for your feature
- 2.Select appropriate data fetching pattern (static, ISR, or dynamic) based on your data source
- 3.Use file conventions (page.tsx, layout.tsx, loading.tsx, error.tsx) to structure your routes
- 4.Implement API routes using proper HTTP methods and input validation with Zod
- 5.Apply performance optimizations: use next/image, dynamic imports, and bundle analysis
- 6.Configure caching strategy using fetch options, revalidate tags, or no-store directives
- 7.Use Server Actions for form submissions and mutations with proper input validation
- 8.Check anti-patterns section to avoid common mistakes in your implementation
Use cases
- Deciding whether to use Server or Client Components in a new feature
- Implementing proper data fetching with appropriate caching strategies
- Organizing routes using file conventions and route groups
- Setting up API endpoints with proper validation and error handling
- Optimizing image loading and bundle size in a Next.js application
- Next.js developers building with App Router
- Full-stack developers implementing server and client components
- Frontend engineers optimizing performance and bundle size
- Teams establishing Next.js coding standards and best practices
nextjs-best-practices FAQ
Use Server Components by default for data fetching, layouts, and static content. Only use Client Components ('use client') when you need useState, useEffect, event handlers, or interactivity. If you need both, split into a Server parent with Client children.
Static caching builds data once at build time. ISR (Incremental Static Regeneration) refreshes data on a time interval using revalidate. Dynamic fetching with no-store fetches fresh data on every request.
Use the app/ directory with file conventions: page.tsx for route UI, layout.tsx for shared layouts, loading.tsx for loading states, and error.tsx for error boundaries. Use route groups (name) to organize without affecting URLs.
Avoid using 'use client' everywhere, fetching data in client components, skipping loading states, ignoring error boundaries, and creating large client bundles. Instead, use Server Components by default, fetch server-side, implement loading.tsx and error.tsx, and use dynamic imports.
Use Server Actions marked with 'use server' for form submissions and data mutations. Validate all inputs, return typed responses, and handle errors appropriately. Server Actions automatically revalidate data and can trigger revalidatePath or revalidateTag.
Full instructions (SKILL.md)
Source of truth, from sickn33/agentic-awesome-skills.
name: nextjs-best-practices description: "Next.js App Router principles. Server Components, data fetching, routing patterns." risk: critical source: community date_added: "2026-02-27"
Next.js Best Practices
Principles for Next.js App Router development.
1. Server vs Client Components
Decision Tree
Does it need...?
│
├── useState, useEffect, event handlers
│ └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│ └── Server Component (default)
│
└── Both?
└── Split: Server parent + Client child
By Default
| Type | Use |
|---|---|
| Server | Data fetching, layout, static content |
| Client | Forms, buttons, interactive UI |
2. Data Fetching Patterns
Fetch Strategy
| Pattern | Use |
|---|---|
| Default | Static (cached at build) |
| Revalidate | ISR (time-based refresh) |
| No-store | Dynamic (every request) |
Data Flow
| Source | Pattern |
|---|---|
| Database | Server Component fetch |
| API | fetch with caching |
| User input | Client state + server action |
3. Routing Principles
File Conventions
| File | Purpose |
|---|---|
page.tsx | Route UI |
layout.tsx | Shared layout |
loading.tsx | Loading state |
error.tsx | Error boundary |
not-found.tsx | 404 page |
Route Organization
| Pattern | Use |
|---|---|
Route groups (name) | Organize without URL |
Parallel routes @slot | Multiple same-level pages |
Intercepting (.) | Modal overlays |
4. API Routes
Route Handlers
| Method | Use |
|---|---|
| GET | Read data |
| POST | Create data |
| PUT/PATCH | Update data |
| DELETE | Remove data |
Best Practices
- Validate input with Zod
- Return proper status codes
- Handle errors gracefully
- Use Edge runtime when possible
5. Performance Principles
Image Optimization
- Use next/image component
- Set priority for above-fold
- Provide blur placeholder
- Use responsive sizes
Bundle Optimization
- Dynamic imports for heavy components
- Route-based code splitting (automatic)
- Analyze with bundle analyzer
6. Metadata
Static vs Dynamic
| Type | Use |
|---|---|
| Static export | Fixed metadata |
| generateMetadata | Dynamic per-route |
Essential Tags
- title (50-60 chars)
- description (150-160 chars)
- Open Graph images
- Canonical URL
7. Caching Strategy
Cache Layers
| Layer | Control |
|---|---|
| Request | fetch options |
| Data | revalidate/tags |
| Full route | route config |
Revalidation
| Method | Use |
|---|---|
| Time-based | revalidate: 60 |
| On-demand | revalidatePath/Tag |
| No cache | no-store |
8. Server Actions
Use Cases
- Form submissions
- Data mutations
- Revalidation triggers
Best Practices
- Mark with 'use server'
- Validate all inputs
- Return typed responses
- Handle errors
9. Anti-Patterns
| ❌ Don't | ✅ Do |
|---|---|
| 'use client' everywhere | Server by default |
| Fetch in client components | Fetch in server |
| Skip loading states | Use loading.tsx |
| Ignore error boundaries | Use error.tsx |
| Large client bundles | Dynamic imports |
10. Project Structure
app/
├── (marketing)/ # Route group
│ └── page.tsx
├── (dashboard)/
│ ├── layout.tsx # Dashboard layout
│ └── page.tsx
├── api/
│ └── [resource]/
│ └── route.ts
└── components/
└── ui/
Remember: Server Components are the default for a reason. Start there, add client only when needed.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Related skills
More from sickn33/agentic-awesome-skills and the wider catalog.
nextjs-supabase-auth
Expert integration of Supabase Auth with Next.js App Router
nodejs-best-practices
Node.js development principles and decision-making for architecture, frameworks, async patterns, and security.
office-productivity
Automate document creation, spreadsheets, and presentations across LibreOffice and Microsoft Office formats.
playwright-skill
Write and execute custom Playwright browser automation scripts for testing and web scraping.
powershell-windows
Master PowerShell Windows syntax, operators, error handling, and critical pitfalls.
pptx-official
Create, edit, and analyze PowerPoint presentations by working with their XML structure and conversion tools.