skills.rest
oneqmethod
oneqmethodOFFICIAL
Explore all skills by this author →
WebsiteGitHub

next-best-practices

Codify Next.js file conventions, RSC boundaries, and data patterns.

Updated Jan 7, 2026
Search Tags:#metadata#nextjs#best-practices#error-handling#server-actions#rsc#route-handlers
One-click install
npx skills add https://github.com/oneqmethod/next-payload-shadcn-starter-kit --skill next-best-practices-oneqmethod
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/oneqmethod/next-payload-shadcn-starter-kit/tree/main/.claude/skills/next-best-practices
Command: npx skills add https://github.com/oneqmethod/next-payload-shadcn-starter-kit --skill next-best-practices-oneqmethod

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams standardize Next.js practices to reduce onboarding time and architectural drift across projects by codifying file conventions, data fetching boundaries, and performance patterns.

Core Features & Use Cases

  • File Conventions: guidance on app structure, root layout and page components, route groups, and middleware/proxy considerations for Next.js 16+.
  • RSC Boundaries & Data Patterns: recommendations on server components, server actions, route handlers, and data fetching strategies to avoid waterfalls.
  • Metadata & Error Handling: best practices for static/dynamic metadata, and error boundaries with proper server/client separation.
  • Performance & Bundling: guidance on image/font optimization, script loading, and bundling strategies for faster apps.

Quick Start

Add the recommended layout and page conventions to a new Next.js project and apply the documented rules to new routes, actions, and APIs.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I structure routes and file conventions in Next.js 16+?▼

Structure routes in Next.js 16+ by following standard file conventions for app structure, root layouts, page components, and route groups. This standardization reduces onboarding time and prevents architectural drift across projects.

What's the best way to separate server components and client components in Next.js?▼

Separate server and client components by establishing clear RSC boundaries for data fetching and actions. Place data fetching in server components to avoid waterfalls, reserving client components for specific interactive UI requirements.

How do I implement error handling and metadata in Next.js server components?▼

Implement error handling and metadata by enforcing proper server/client separation and utilizing error boundaries. Apply documented best practices for static and dynamic metadata generation directly within your server components.

Can I use this to standardize data fetching and server actions for an existing Next.js codebase?▼

Yes, you can standardize data fetching and server actions for an existing Next.js codebase. The skill applies documented rules and templates to guide route structuring and optimize data patterns in current projects.

How do I optimize performance and bundling in a Next.js application?▼

Optimize Next.js performance and bundling by applying specific guidance on image and font optimization, script loading strategies, and bundling configurations. These patterns ensure faster application loading and rendering times.

Related Skills

Explore More Software Engineering Skills→
carson-sweetcarson-sweet
6

SweetClaude Setup

Detect project type and initialize standardized directory structures and configuration files.

Community
Advanced
ByeongminLeeByeongminLee
2

next-best-practices

Apply Next.js engineering conventions to file structure, routing, and data patterns.

Community
Advanced
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate
pax-kpax-k
3

architecture-boundary-enforcer

Enforce and document architecture boundaries using dependency-cruiser, ESLint, import-linter, and custom scripts.

Community
Advanced