next-best-practices

Document Next.js App Router best practices for data fetching, routing, and performance.

1.4k|162|Updated Sep 5, 2025
One-click install
npx skills add https://github.com/inkeep/agents --skill next-best-practices-inkeep
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/inkeep/agents/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/inkeep/agents --skill next-best-practices-inkeep

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, centralized guide to Next.js best practices, reducing onboarding time and ensuring consistent coding standards across teams.

Core Features & Use Cases

  • Comprehensive guidelines for Next.js App Router topics including data fetching, routing, metadata, error handling, and performance optimization.
  • Practical examples and quick-start guidance to accelerate implementation and reviews across projects.
  • Audit-ready references to align teams on conventions, patterns, and best practices.

Quick Start

Review the included guidelines and apply the Next.js best-practices checklist to new components and routes during development and code reviews. Use the prepared templates to accelerate onboarding and ensure consistency.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
What are the Next.js App Router best practices for structuring server components and data fetching?

Next.js App Router best practices dictate maintaining clear RSC boundaries and using async APIs for direct data fetching within server components to optimize routing and simplify data patterns.

How do I handle errors and metadata in Next.js App Router applications?

To handle errors in Next.js App Router, implement specific error handling file conventions to catch route exceptions. Metadata is managed by exporting static or dynamic metadata objects from your layout and page files.

What is the best way to optimize images and fonts in Next.js?

The best way to optimize images and fonts in Next.js is by leveraging built-in framework conventions for automatic bundling and optimization, ensuring assets load efficiently across projects without manual configuration.

Does this Next.js best practices guide cover route handlers and cross-project bundling?

Yes, this Next.js guide covers route handlers for API creation and provides comprehensive guidelines for bundling strategies across projects to ensure consistent coding standards and optimized asset delivery.

How do I apply Next.js best practices during code reviews?

Apply Next.js best practices during code reviews by checking RSC boundaries, metadata implementation, error handling conventions, and image optimization against a standardized checklist to ensure audit-ready consistency.