skills.rest
mashharuki
mashharukiCOMMUNITY
Explore all skills by this author →
Website𝕏@haruki_web3GitHub

next-best-practices

Document and enforce Next.js app router best practices across teams.

Updated Apr 11, 2026
Search Tags:#routing#next.js#metadata#best-practices#server-client
One-click install
npx skills add https://github.com/mashharuki/jupter-sample-repo --skill next-best-practices-mashharuki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/mashharuki/jupter-sample-repo/tree/main/.claude/skills/next-best-practices
Command: npx skills add https://github.com/mashharuki/jupter-sample-repo --skill next-best-practices-mashharuki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js projects often struggle with inconsistencies and suboptimal patterns; this guide codifies a coherent set of best practices to keep codebases reliable and maintainable.

Core Features & Use Cases

  • File conventions and routing guidelines for app router projects.
  • Server/Client boundary rules, data patterns, and metadata strategies.
  • Guidance for performance optimization, bundling, and debugging techniques across Next.js apps.

Quick Start

Start by reading this guide and applying its principles to your Next.js project for best-practice configuration.

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 Next.js app router file conventions and routing?▼

Next.js app router best practices standardize file conventions to maintain consistent routing structures. Defining clear route handlers and file boundaries ensures reliable navigation and maintainable codebases across teams.

How do I correctly separate server and client component boundaries in Next.js?▼

Separating Next.js server and client component boundaries requires strict rules for data patterns and async execution. Correctly defining these RSC boundaries optimizes data fetching and prevents client-side synchronization issues.

What is the best way to optimize images and fonts in a Next.js project?▼

Optimizing Next.js images and fonts involves applying specific performance and bundling strategies. Implementing these metadata and asset techniques reduces layout shift and improves overall application loading speed.

Does this Next.js guide apply to pages router or only app router codebases?▼

This Next.js guidance applies specifically to app router codebases rather than the pages router. It focuses on modern RSC boundaries, async patterns, and app router file conventions for current performance optimizations.

Why should I use standardized metadata strategies in my Next.js application?▼

Standardized Next.js metadata strategies ensure consistent SEO and routing configurations across teams. Documenting these practices prevents suboptimal patterns and maintains reliable data fetching throughout your application.

Related Skills

Explore More Software Engineering Skills→
bovinphangbovinphang
21

fec-nextjs-project-standard

Enforce Next.js 14+ App Router project conventions and best practices.

Community
Advanced
RevealUIStudioRevealUIStudio
4

next-best-practices

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

Community
Advanced
H2OSLabsH2OSLabs

vercel-react-best-practices

Apply 57 performance rules to React and Next.js applications.

Official
Advanced
MasaKagamiMasaKagami

vercel-react-best-practices

Optimize React and Next.js performance with automated refactoring rules.

Community
Advanced