skills.rest
flosrn
flosrnCOMMUNITY
Explore all skills by this author →
𝕏@flo_srnGitHub

next-best-practices

Guide Next.js development with file conventions, RSC boundaries, and data fetching patterns.

Updated Aug 6, 2025
Search Tags:#best practices#performance#web development#react#optimization#next.js#rsc
One-click install
npx skills add https://github.com/flosrn/.claude --skill next-best-practices-flosrn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/flosrn/.claude/tree/main/skills/next-best-practices
Command: npx skills add https://github.com/flosrn/.claude --skill next-best-practices-flosrn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for developing robust and efficient applications using the Next.js framework, ensuring optimal performance, maintainability, and adherence to modern web development standards.

Core Features & Use Cases

  • File Conventions: Understand project structure, route segments, and special file roles.
  • RSC Boundaries: Detect and prevent invalid React Server Component patterns and prop passing issues.
  • Data Patterns: Choose the right data fetching strategy (Server Components, Server Actions, Route Handlers).
  • Error Handling: Implement effective error boundaries and navigation error management.
  • Optimization: Learn best practices for image, font, and script optimization.
  • Use Case: A developer building a new Next.js application can use this Skill to ensure they are following recommended patterns from the start, avoiding common pitfalls related to data fetching, component boundaries, and routing.

Quick Start

Review the best practices for handling data fetching in Next.js.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I fix hydration errors and manage Suspense boundaries in Next.js?▼

To fix Next.js hydration errors and manage Suspense boundaries, implement effective error boundaries and follow React Server Component patterns to prevent invalid prop passing and client-server mismatches.

What is the best way to fetch data in Next.js using Server Components and Server Actions?▼

The best way to fetch data in Next.js is choosing the right strategy between React Server Components, Server Actions, and Route Handlers to ensure optimal performance and scalable application development.

How do I structure file conventions and parallel routes in a Next.js application?▼

Structure Next.js file conventions by understanding project structure, route segments, special file roles, and utilizing parallel and intercepting routes for efficient and scalable application development.

How do I optimize images, fonts, and scripts for Next.js web performance?▼

Optimize Next.js web performance by applying best practices for image, font, and script optimization, alongside proper runtime selection and bundling techniques to improve overall loading efficiency.

When should I use React Server Components versus client components in Next.js?▼

Use React Server Components in Next.js for data fetching and static rendering, while detecting and preventing invalid component boundaries and prop passing issues to maintain optimal performance.

Related Skills

Explore More Software Engineering Skills→
TbK0ngTbK0ng

trellis-bootstrap

Initialize Trellis AI workflow scaffolding with .trellis structure, memory, and CLI hooks.

Community
Intermediate
alpha-searchalpha-search
3

alpha-search-testing-devops

Automate testing, CI/CD, packaging, and deployment workflows in Python projects.

Official
Advanced
kingdoubleglazingkingdoubleglazing

frontend-dev

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

Community
Intermediate
JP-CanoJP-Cano

astro

Create Astro components, configure static site generation, and manage content collections.

Official
Intermediate