⚙️
Tools Box
Toutes les skills
Custom🔧 Dev & Code

next-best-practices

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

Installation & invocation

1. Crée le fichier sur ta machine :

~/.claude/skills/next-best-practices/SKILL.md

2. Colle le contenu du SKILL.md ci-dessous, et redémarre Claude Code. Tu peux ensuite l'invoquer manuellement avec :

/next-best-practices

Claude peut aussi la déclencher automatiquement quand le contexte matche.

🇫🇷 Résumé FRCe que fait cette skill, en français

Best practices Next.js : file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, perf.

Contenu de la skill

Next.js Best Practices

Apply these rules when writing or reviewing Next.js code.

File Conventions

See file-conventions.md for:

  • Project structure and special files
  • Route segments (dynamic, catch-all, groups)
  • Parallel and intercepting routes
  • Middleware rename in v16 (middleware → proxy)

RSC Boundaries

Detect invalid React Server Component patterns.

See rsc-boundaries.md for:

  • Async client component detection (invalid)
  • Non-serializable props detection
  • Server Action exceptions

Async Patterns

Next.js 15+ async API changes.

See async-patterns.md for:

  • Async params and searchParams
  • Async cookies() and headers()
  • Migration codemod

Runtime Selection

See runtime-selection.md for:

  • Default to Node.js runtime
  • When Edge runtime is appropriate

Directives

See directives.md for:

  • 'use client', 'use server' (React)
  • 'use cache' (Next.js)

Functions

See functions.md for:

  • Navigation hooks: useRouter, usePathname, useSearchParams, useParams
  • Server functions: cookies, headers, draftMode, after
  • Generate functions: generateStaticParams, generateMetadata

Error Handling

See error-handling.md for:

  • error.tsx, global-error.tsx, not-found.tsx
  • redirect, permanentRedirect, notFound
  • forbidden, unauthorized (auth errors)
  • unstable_rethrow for catch blocks

Data Patterns

See data-patterns.md for:

  • Server Components vs Server Actions vs Route Handlers
  • Avoiding data waterfalls (Promise.all, Suspense, preload)
  • Client component data fetching

Route Handlers

See route-handlers.md for:

  • route.ts basics
  • GET handler conflicts with page.tsx
  • Environment behavior (no React DOM)
  • When to use vs Server Actions

Metadata & OG Images

See metadata.md for:

  • Static and dynamic metadata
  • generateMetadata function
  • OG image generation with next/og
  • File-based metadata conventions

Image Optimization

See image.md for:

  • Always use next/image over <img>
  • Remote images configuration
  • Responsive sizes attribute
  • Blur placeholders
  • Priority loading for LCP

Font Optimization

See font.md for:

  • next/font setup
  • Google Fonts, local fonts
  • Tailwind CSS integration
  • Preloading subsets

Bundling

See bundling.md for:

  • Server-incompatible packages
  • CSS imports (not link tags)
  • Polyfills (already included)
  • ESM/CommonJS issues
  • Bundle analysis

Scripts

See scripts.md for:

  • next/script vs native script tags
  • Inline scripts need id
  • Loading strategies
  • Google Analytics with @next/third-parties

Hydration Errors

See hydration-error.md for:

  • Common causes (browser APIs, dates, invalid HTML)
  • Debugging with error overlay
  • Fixes for each cause

Suspense Boundaries

See suspense-boundaries.md for:

  • CSR bailout with useSearchParams and usePathname
  • Which hooks require Suspense boundaries

Parallel & Intercepting Routes

See parallel-routes.md for:

  • Modal patterns with @slot and (.) interceptors
  • default.tsx for fallbacks
  • Closing modals correctly with router.back()

Self-Hosting

See self-hosting.md for:

  • output: 'standalone' for Docker
  • Cache handlers for multi-instance ISR
  • What works vs needs extra setup

Debug Tricks

See debug-tricks.md for:

  • MCP endpoint for AI-assisted debugging
  • Rebuild specific routes with --debug-build-paths

Skills proches

better-auth-best-practices

Configure Better Auth server and client, set up database adapters, manage sessions, add plugins, and handle environment variables. Use when users mention Better Auth, betterauth, auth.ts, or need to set up TypeScript authentication with email/password, OAuth, or plugin configuration.

csv-to-fullstack-site

Transforms a CSV, Excel or Google Sheet into a deployed full-stack Next.js site on the user's stack (GitHub + Vercel + Supabase + SendGrid). Use this skill whenever the user has tabular data (any domain - real estate, contacts, recipes, alternance, inventory, anything) and wants to turn it into a live web app, a directory site, an internal tool, or a CRM-style interface. Trigger phrases include "j'ai un CSV", "I have a spreadsheet", "build me a site from this Excel", "fais-moi un site avec ces données", "deploy this Google Sheet as an app", or any time the user uploads tabular data and mentions wanting it online. Encodes the user's specific stack conventions (Next.js 14 App Router, shadcn/ui with @base-ui/react, Tailwind, Zod 4 + react-hook-form, Supabase Postgres + RLS + magic link, Vercel auto-deploy, SendGrid in French) and all the gotchas they hit building production apps. Even if the user only says "build me a site for X" without mentioning the data file explicitly, ask them if they have a CSV/Excel/Sheet and use this skill.

finishing-a-development-branch

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

firecrawl

| Search, scrape, and interact with the web via the Firecrawl CLI. Use this skill whenever the user wants to search the web, find articles, research a topic, look something up online, scrape a webpage, grab content from a URL, get data from a website, crawl documentation, download a site, or interact with pages that need clicks or logins. Also use when they say "fetch this page", "pull the content from", "get the page at https://", or reference external websites. This provides real-time web search with full page content and interact capabilities — beyond what Claude can do natively with built-in tools. Do NOT trigger for local file operations, git commands, deployments, or code editing tasks.

notion-api-cli

Piloter l'API Notion en bas niveau et via le CLI ntn : créer/mettre à jour des pages, query des databases, déployer des workers Notion, uploader des fichiers, appeler l'API REST Notion. Charge ce skill quand l'utilisateur veut 'appeler l'API Notion', 'déployer un worker Notion', 'uploader un fichier dans Notion', ou toute opération technique bas niveau sur Notion (≠ conception d'espace Notion = skill notion).

shadcn

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".