next-best-practices

Document Next.js App Router best practices for code quality and architecture.

Updated Oct 2, 2024
One-click install
npx skills add https://github.com/James-Gamboa/portfolio-james --skill next-best-practices-james-gamboa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/James-Gamboa/portfolio-james/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/James-Gamboa/portfolio-james --skill next-best-practices-james-gamboa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides a structured guide for Next.js best practices to improve code quality and architectural decisions across projects.

Core Features & Use Cases

  • Guidelines for file conventions, React Server Components boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, and bundling.
  • Useful for code reviews, onboarding, and consistent architecture decisions across Next.js apps.

Quick Start

Review the repository's Next.js patterns and apply the guidelines to your codebase in a structured review session.

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 React Server Components boundaries in Next.js App Router?

Next.js best practices for RSC boundaries define how to separate server and client components, ensuring async APIs and data patterns are handled correctly to maintain architecture quality.

How do I structure metadata and error handling in Next.js App Router projects?

Structuring metadata and error handling in Next.js App Router involves applying specific file conventions to guide code quality, ensuring proper route handlers and architectural consistency.

Can I use these Next.js best practices for code reviews and onboarding?

Yes, Next.js best practices are useful for code reviews and onboarding, providing structured guidelines for file conventions, image/font optimization, and bundling across projects.

What is the recommended way to handle data patterns and async APIs in Next.js?

The recommended way to handle data patterns and async APIs in Next.js is by following best practices that dictate clear RSC boundaries and proper route handler implementations.

Does this guide cover image and font optimization for Next.js applications?

Yes, the best practices guide covers image and font optimization, alongside bundling and route handlers, to improve code quality and architectural decisions in Next.js apps.