skills.rest
ftzi
ftziCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Guide Next.js development with best practices for file conventions and data fetching.

7|Updated Dec 7, 2025
Search Tags:#best practices#data fetching#optimization#next.js#app router#react server components
One-click install
npx skills add https://github.com/ftzi/livespec --skill next-best-practices-ftzi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/ftzi/livespec/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/ftzi/livespec --skill next-best-practices-ftzi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on Next.js best practices, helping developers write cleaner, more efficient, and maintainable code, while avoiding common pitfalls.

Core Features & Use Cases

  • Code Conventions: Understand file structure, routing, and special file usage.
  • RSC Boundaries: Detect and prevent issues with Server Components and Client Components.
  • Data Fetching: Learn optimal patterns for fetching data in Next.js.
  • Error Handling: Implement robust error handling strategies.
  • Optimization: Optimize images, fonts, and bundling.
  • Use Case: A developer is unsure about the correct way to handle data fetching in a new Next.js 15 project. They consult this Skill to understand Server Components, Server Actions, and Route Handlers, ensuring they choose the most appropriate pattern.

Quick Start

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

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 handle data fetching in Next.js App Router?▼

Next.js best practices for data fetching recommend leveraging React Server Components to fetch data directly on the server, utilizing specific patterns for Server Actions and Route Handlers to ensure efficient, maintainable code.

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

Managing React Server Component (RSC) boundaries in Next.js requires correctly applying directives to distinguish between Server and Client Components, preventing common boundary issues and optimizing client-side bundling.

How do I optimize images and fonts in a Next.js application?▼

Optimizing images and fonts in a Next.js application involves following specific framework best practices for asset handling and bundling, ensuring efficient delivery and improved Core Web Vitals.

Does Next.js support standalone output for self-hosting?▼

Yes, Next.js supports standalone output for self-hosting, allowing you to deploy minimal applications by generating a standalone folder that only includes necessary dependencies, streamlining production deployments.

When should I use parallel and intercepting routes in Next.js?▼

You should use parallel and intercepting routes in Next.js when implementing advanced routing patterns like modals or dynamic dashboards, allowing simultaneous rendering of multiple route segments within the App Router.

Related Skills

Explore More Software Engineering Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

Initialize and structure Next.js projects with TypeScript, Tailwind, and App Router.

Community
Intermediate
json-choijson-choi

expo-deployment

Deploy Expo applications to iOS, Android, and web via EAS workflows.

Community
Intermediate
masanao-ohbamasanao-ohba
2

react-code-reviewer

Review React 19 TypeScript projects against structured code quality checklists.

Community
Basic
vanhoangkhavanhoangkha

nextjs-15

Guide Next.js 15 App Router features with code examples.

Community
Intermediate