skills.rest
usebondery
usebonderyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

next-best-practices

Enforce Next.js best practices for file conventions, server/client boundaries, and performance.

15|Updated Dec 4, 2025
Search Tags:#performance#routing#next.js#metadata#best-practices#bundling#server-components
One-click install
npx skills add https://github.com/usebondery/bondery --skill next-best-practices-usebondery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/usebondery/bondery/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/usebondery/bondery --skill next-best-practices-usebondery

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a centralized, authoritative guide to implementing Next.js best practices across a codebase, reducing architectural drift and onboarding time.

Core Features & Use Cases

  • File conventions: Establishes project structure guidelines and file roles (pages, components, API routes).
  • RSC boundaries & data patterns: Helps identify proper Server Components vs Client Components and efficient data flow patterns.
  • Async APIs, metadata & routing: Covers route handlers, server actions, metadata generation, and caching strategies for robust APIs and pages.
  • Performance & bundling: Provides guidance for image/font optimization, code-splitting, and bundling considerations to improve startup and runtime performance.

Quick Start

Review a Next.js project and apply these rules to ensure best-practice routing, server components, and image/font optimization are followed.

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 server and client components?▼

Next.js best practices for server and client components involve establishing proper RSC boundaries and efficient data flow patterns to maintain a scalable project structure and reduce architectural drift.

How do I optimize Next.js performance and bundling for scalable apps?▼

Optimize Next.js performance by applying best practices for image and font optimization, code-splitting, and bundling considerations to improve startup and runtime execution speeds.

How should I handle Next.js routing, async APIs, and metadata generation?▼

Handle Next.js routing and metadata by following structured patterns for route handlers, server actions, metadata generation, and caching strategies to build robust APIs and pages.

Does this Next.js best practices guide work for existing codebases?▼

Yes, you can review an existing Next.js project and apply these rules to ensure best-practice routing, server components, and image optimization are followed across current files.

What is the best way to establish Next.js file conventions and project structure?▼

The best way to establish Next.js file conventions is to apply centralized guidelines defining file roles for pages, components, and API routes, reducing onboarding time and architectural drift.

Related Skills

Explore More Software Engineering Skills→
devjaimedevjaime
1

vercel-react-best-practices

Apply React and Next.js performance best practices across data fetching, rendering, and bundling.

Community
Advanced
laguagulaguagu
58

vercel-react-best-practices

Identify and optimize React/Next.js performance bottlenecks in codebases.

Community
Advanced
JCETools-PetraJCETools-Petra
16

nextjs

Guide Next.js App Router implementations with rendering, data fetching, and caching rules.

Community
Advanced
simnovasimnova
18

vercel-react-best-practices

Apply performance best practices to React and Next.js code.

Official
Basic