Next.js Best Practices

nextjs-best-practices

Next.js App Router principles. Server Components, data fetching, routing patterns.

sickn33/antigravity-awesome-skills·5.7Kinstalls47.3KstarsFrontend Development

SKILL.md

Full skill instructions

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.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/sickn33/antigravity-awesome-skills --skill nextjs-best-practices

View on GitHub

nextjs-best-practices

More Frontend Development skills

View all

Frontend Development

ui-ux-pro-max

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks.

133.1K 383.9K

View

Frontend Development

vercel-composition-patterns

Vercel's official collection of agent skills

31.9K 374.1K

View

Frontend Development

imagegen-frontend-web

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K

View

Frontend Development

imagegen-frontend-mobile

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K

View

Frontend Development

shadcn

Complete shadcn/ui component management for adding, searching, fixing, styling, and composing UI.

125.1K 271.7K

View

Frontend Development

vercel-react-native-skills

React Native and Expo best practices for performant mobile apps across list rendering, animations, navigation, and native modules.

31.9K 231.8K

View

Frontend Development

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

31.9K 143K

View

Frontend Development

vercel-react-view-transitions

Native browser animations for React UI state changes using the View Transition API.

31.9K 143K

View

Frontend Development

convex-create-component

Design and build isolated, reusable Convex backend components with clear boundaries and app-facing wrappers.

63 123.5K

View

Frontend Development

web-artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

179.7K 106.4K

View