skills.rest
next-safe-action
next-safe-actionOFFICIAL
Explore all skills by this author →
WebsiteGitHub

next-best-practices

Provide expert guidance on Next.js best practices for file conventions, RSC boundaries, and data fetching.

3.1k|47|Updated Apr 16, 2023
Search Tags:#typescript#best practices#react#data fetching#optimization#next.js#rsc
One-click install
npx skills add https://github.com/next-safe-action/next-safe-action --skill next-best-practices-next-safe-action
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/next-safe-action/next-safe-action/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/next-safe-action/next-safe-action --skill next-best-practices-next-safe-action

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and best practices for developing with Next.js, ensuring code quality, performance, and maintainability.

Core Features & Use Cases

  • File Conventions: Understand project structure, routing, and special file roles.
  • RSC Boundaries: Detect and prevent invalid patterns when crossing Server/Client component boundaries.
  • Data Fetching Patterns: Choose the right method (Server Components, Server Actions, Route Handlers) for optimal data management.
  • Optimization: Learn about image, font, and bundling optimizations.
  • Error Handling: Implement robust error handling strategies.
  • Use Case: A developer is unsure about the correct way to fetch data in a new Next.js 15+ project, or how to properly handle errors in a complex route. This Skill provides clear, actionable advice.

Quick Start

Consult the next-best-practices skill for guidance on implementing Suspense boundaries with useSearchParams.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
What is the best way to fetch data in Next.js Server Components?▼

Data fetching in Next.js Server Components should use async/await directly within the component. This Skill guides you in choosing between Server Components, Server Actions, and Route Handlers to achieve optimal data management.

How do I handle React Server Component boundaries in Next.js?▼

Handling React Server Component boundaries requires correctly passing props between server and client components. This Skill helps detect and prevent invalid patterns when crossing Server/Client component boundaries.

Does Next.js support image and font optimization out of the box?▼

Next.js supports image and font optimization natively through specialized components. This Skill provides expert guidance on implementing bundling, image, and font optimizations for improved performance.

How to implement error handling strategies for Next.js routes?▼

Implementing error handling strategies in Next.js routes involves using error boundary files to catch unexpected issues. This Skill provides actionable advice for robust error management in complex routes.

When do I need to use Suspense boundaries with useSearchParams?▼

You need to use Suspense boundaries with useSearchParams when rendering client components that read the URL search parameters. This Skill clarifies how to implement Suspense boundaries to prevent static rendering issues.

Related Skills

Explore More Software Engineering Skills→
tkmh04tkmh04

typescript

Establish TypeScript coding, architecture, testing, and tooling standards.

Community
Advanced
gesmith0606gesmith0606

next-best-practices

Enforce Next.js App Router best practices for file conventions, RSC boundaries, and async patterns.

Community
Advanced
zenobi-uszenobi-us
68

testing-anti-patterns

Detect testing anti-patterns in JavaScript and TypeScript unit tests.

Official
Intermediate
yeshan333yeshan333
94

optimize

Analyze Core Web Vitals and optimize loading, rendering, animations, and bundle size.

Community
Advanced