skills.rest
sebacontegrand
sebacontegrandCOMMUNITY
Explore all skills by this author →
Website𝕏@scontegrandGitHub

next-best-practices

Enforce Next.js best practices for file structure, routing, and runtime decisions.

Updated Aug 27, 2026
Search Tags:#routing#next.js#metadata#best-practices#error-handling#bundling#server-components
One-click install
npx skills add https://github.com/sebacontegrand/Adelia --skill next-best-practices-sebacontegrand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/sebacontegrand/Adelia/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/sebacontegrand/Adelia --skill next-best-practices-sebacontegrand

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates Next.js best practices into a single, accessible guide to help developers build robust, maintainable apps by following consistent conventions from file structure to runtime decisions.

Core Features & Use Cases

  • File Conventions: guidance on project structure, special files, and route segments to avoid common pitfalls.
  • RSC Boundaries & Data Patterns: rules for server components, server actions, route handlers, and data fetching strategies to minimize waterfalls.
  • Metadata, Image & Font Optimization: recommendations for dynamic/static metadata, OG images, and font/image strategies to improve SEO and performance.
  • Error Handling & Debug Tricks: standards for boundaries, error components, and troubleshooting across the app.
  • Parallel Routes & Self-hosting: patterns for modal routes, static vs server rendering, and deployment considerations.
  • Debug Tricks: MCP endpoints, rebuild-paths, and insights to speed up debugging Next.js apps.
  • Guidance on Bundling & Runtime: advice on bundling optimizations, transpilation, and Node vs Edge runtimes where relevant.

Quick Start

  • Review the Next-best-practices skill by reading SKILL.md and the included topic pages (file-conventions.md, rsc-boundaries.md, data-patterns.md, etc.).
  • Apply the guidelines to an existing Next.js project by auditing your app structure, routing, and metadata usage; adjust route handlers and server components accordingly.
  • Start with establishing proper directives ('use client'/'use server'), ensure error boundaries exist, and enable metadata patterns.

Frequently Asked Questions about next-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for structuring Next.js app router projects?▼

Next.js best practices for project structure involve codifying conventions for special files and route segments to avoid common pitfalls. Establishing proper 'use client' and 'use server' directives ensures clear server and client boundaries.

How do I optimize metadata and images for SEO in Next.js?▼

To optimize metadata and images in Next.js, apply recommendations for dynamic and static metadata, OG images, and font/image strategies. These Next.js best practices improve both SEO and overall application performance.

How should I handle data fetching and server components in Next.js?▼

Next.js best practices for data fetching dictate using server actions, route handlers, and specific data patterns to minimize waterfalls. You should audit your app to ensure proper server and client boundaries for data fetching.

Does this Next.js guidance cover deployment and self-hosting strategies?▼

Yes, Next.js best practices cover self-hosting and deployment considerations, including patterns for static versus server rendering. It also provides guidance on bundling optimizations and choosing between Node and Edge runtimes.

What are the recommended patterns for error handling in Next.js apps?▼

Next.js error handling best practices involve implementing error boundaries, error components, and specific troubleshooting standards. The skill also provides debug tricks like MCP endpoints and rebuild-paths to speed up issue resolution.

Related Skills

Explore More Software Engineering Skills→
tneztnez

bootstrap

Initialize the .docent directory structure and configuration for new projects.

Community
Basic
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
kingdoubleglazingkingdoubleglazing

frontend-dev

Standardize React/Next.js frontend development with TypeScript, Tailwind, and Vitest.

Community
Intermediate
cure-labcure-lab
175

vercel-react-best-practices

Optimize React and Next.js application performance with bundle size and rendering guidelines.

Official
Advanced