skills.rest
growupanand
growupanandCOMMUNITY
Explore all skills by this author →
Website𝕏@growupanandGitHub

next-best-practices

Provides guidance on Next.js 15+ implementation covering rendering, data fetching, and optimization techniques.

101|33|Updated Nov 23, 2023
Search Tags:#code quality#best practices#performance#next.js#rsc#react server components
One-click install
npx skills add https://github.com/growupanand/ConvoForm --skill next-best-practices-growupanand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/growupanand/ConvoForm/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/growupanand/ConvoForm --skill next-best-practices-growupanand

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and rules to ensure Next.js code is written efficiently, maintainably, and according to modern best practices, preventing common pitfalls.

Core Features & Use Cases

  • File Conventions: Understand project structure, route segments, and special files.
  • RSC Boundaries: Detect and fix invalid patterns when crossing Server/Client component boundaries.
  • Async Patterns: Implement Next.js 15+ async API changes correctly.
  • Error Handling: Gracefully manage errors with error.tsx, global-error.tsx, and navigation APIs.
  • Data Patterns: Choose the right pattern (Server Components, Server Actions, Route Handlers) for data fetching and mutations.
  • Image & Font Optimization: Leverage next/image and next/font for performance.
  • Use Case: A developer is unsure about the correct way to fetch data in a new Next.js 15+ project and wants to ensure they are following the latest recommendations for performance and maintainability.

Quick Start

Review the file conventions for organizing your Next.js project structure.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
What's the best way to handle data fetching in Next.js 15+ Server Components?▼

Data fetching in Next.js Server Components is best handled directly within the component using asynchronous patterns. This approach ensures optimal performance by leveraging the server-side runtime and adhering to modern RSC boundary rules.

How do I correctly cross React Server Component boundaries without breaking my Next.js app?▼

Crossing React Server Component boundaries requires passing serialized props from server to client components and avoiding invalid patterns like importing server-only code into client modules. Enforcing these rules maintains application stability and performance.

When should I use Route Handlers versus Server Actions for data mutations in Next.js?▼

Route Handlers in Next.js are used for external API endpoints, while Server Actions handle form submissions and mutations directly within components. Choosing the right pattern ensures maintainable and efficient data processing logic.

How does error handling with error.tsx and global-error.tsx work in Next.js?▼

Error handling in Next.js works by catching unexpected errors in route segments using error.tsx, while global-error.tsx manages application-wide recovery. These special files provide graceful degradation and maintain user experience during failures.

Do I need to use next/image and next/font for performance optimization in Next.js?▼

Yes, using next/image and next/font is essential for performance optimization in Next.js. These built-in components automatically optimize asset delivery, reduce layout shift, and improve overall page load times without manual configuration.

Why are my Next.js async API patterns not working after upgrading?▼

Next.js async API patterns may fail after upgrading due to changes in asynchronous request handling in version 15+. Implementing the new async patterns for cookies, headers, and params ensures compatibility and prevents runtime errors.

Related Skills

Explore More Software Engineering Skills→
Yoriichi-DangYoriichi-Dang

next-best-practices

Codify Next.js App Router best practices for scalable project patterns.

Community
Advanced
harsh-m-patilharsh-m-patil

next-best-practices

Codify Next.js best practices for file conventions, RSC boundaries, and routing.

Community
Basic
involvexinvolvex

react-nextjs-development

Develop React and Next.js 14+ apps with App Router, Server Components, and TypeScript.

Community
Advanced
ali-masterali-master
8

oRPC Solid Start Adapter

Integrate oRPC into Solid Start projects with server and client setup instructions.

Community
Intermediate