next-best-practices

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

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/AWS-Educate/template-nextjs-sanity-tailwind-amplify --skill next-best-practices-aws-educate
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/AWS-Educate/template-nextjs-sanity-tailwind-amplify/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/AWS-Educate/template-nextjs-sanity-tailwind-amplify --skill next-best-practices-aws-educate

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 efficient, maintainable, and performant applications.

Core Features & Use Cases

  • File Conventions: Understand project structure, route segments, and special files.
  • RSC Boundaries: Detect and prevent invalid React Server Component patterns.
  • Data Patterns: Choose the right pattern for fetching and mutating data (Server Components, Server Actions, Route Handlers).
  • Optimization: Learn best practices for image, font, and metadata optimization.
  • 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+ application. They can consult this Skill to understand the differences between Server Components, Server Actions, and Route Handlers, and apply the recommended pattern for their specific need.

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
What is the best way to fetch data in Next.js App Router applications?

Next.js data fetching patterns include using React Server Components for direct database access, Server Actions for mutations, and Route Handlers for building external APIs. This Skill helps you select the right pattern for your specific need.

How do I avoid invalid React Server Component boundaries in Next.js?

Avoid invalid React Server Component boundaries in Next.js by understanding the distinctions between server and client execution environments. This Skill helps detect and prevent invalid RSC patterns for maintainable applications.

When should I use Server Actions versus Route Handlers in Next.js?

Choose Server Actions in Next.js for direct data mutations triggered by client components, whereas Route Handlers serve external API requests. This Skill explains these data patterns to ensure efficient and maintainable implementations.

How do I optimize images, fonts, and metadata in Next.js?

Optimize images, fonts, and metadata in Next.js by applying built-in framework conventions designed for efficient resource delivery. This Skill outlines optimization techniques to ensure your Next.js applications remain highly performant.

What are the file conventions and special files in the Next.js App Router?

File conventions in the Next.js App Router dictate project structure, route segments, and special files like loading or error boundaries. This Skill details these conventions to help organize your Next.js application effectively.