next-best-practices

Codify Next.js best practices for routing, data patterns, and optimization.

1|1|Updated May 15, 2025

Search Tags:#performance #nextjs #best-practices #app-router #server-components #route-handlers #data-patterns

Ready to run

npx skills add https://github.com/raphaelandrews/fsx --skill next-best-practices-raphaelandrews

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/raphaelandrews/fsx/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/raphaelandrews/fsx --skill next-best-practices-raphaelandrews

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies Next.js best practices to reduce misconfigurations and improve maintainability and performance.

Core Features & Use Cases

File conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, and bundling guidance for consistent code quality.
Guidance across parallel/intercepting routes, server actions, and route handlers to enable scalable architectures.

Quick Start

Review the included guidelines and apply them to new routes and components in your Next.js project.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema

What are the best practices for Next.js app routing and server components?▼

Next.js app routing best practices involve codifying file conventions, RSC boundaries, and data patterns to reduce misconfigurations and improve maintainability. This ensures consistent code quality across route handlers, async APIs, and server/client boundaries.

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

To optimize Next.js images and fonts, apply structured guidance on bundling and runtime selection. This enforces safe usage patterns that enhance app performance and reduce loading inconsistencies across components.

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

Use Next.js parallel and intercepting routes when building scalable architectures that require advanced routing patterns. This approach enables simultaneous rendering of multiple route segments and intercepting navigation flows for robust app interactions.

How do I handle errors and manage metadata in Next.js server components?▼

Handle Next.js server component errors and metadata by applying explicit guidance on error boundaries and metadata exports. This codifies safe usage patterns to prevent runtime crashes and ensure correct SEO tagging.

What is the best way to structure server actions and route handlers in Next.js?▼

The best way to structure Next.js server actions and route handlers is by following codified data patterns and async API guidance. This ensures clear server/client boundaries and scalable architectures for robust applications.