next-best-practices

Apply Next.js best practices for file conventions, routing, and error handling.

426|199|Updated Aug 13, 2025

Search Tags:#metadata #nextjs #bundling #app-router #server-actions #image-optimization #route-handlers

Ready to run

npx skills add https://github.com/leonvanzyl/agentic-coding-starter-kit --skill next-best-practices-leonvanzyl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/tree/main/.agents/skills/nextjs/upstream
Command: npx skills add https://github.com/leonvanzyl/agentic-coding-starter-kit --skill next-best-practices-leonvanzyl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Next.js developers often struggle to recall best practices across file conventions, routing patterns, data fetching, error handling, and optimization techniques. This Skill consolidates these guidelines into a single, organized reference that you can consult during development and reviews.

Core Features & Use Cases

Provides a comprehensive Next.js best practices reference covering file conventions, app router patterns, metadata usage, image and font optimization, and bundling tips.
Helps with onboarding, code reviews, and architectural planning by offering quick access to recommended patterns and best practices.
Real-world use cases include structuring app routes, implementing route handlers and server actions, and selecting runtime strategies.

Quick Start

Review the Next.js best practices in this guide and apply the recommended patterns to your 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 structuring Next.js App Router file conventions?▼

Next.js App Router best practices involve organizing file conventions, routing patterns, and metadata usage to standardize your codebase. Applying these guidelines ensures consistent project architecture, simplifies onboarding, and streamlines code reviews.

How do I implement Server Actions and Route Handlers in Next.js?▼

Implementing Server Actions and Route Handlers in Next.js requires selecting appropriate runtime strategies and data patterns. Following concrete reference patterns helps enforce consistent usage and optimize data fetching across your application.

What is the best way to handle image and font optimization in Next.js?▼

Image and font optimization in Next.js utilizes built-in bundling and customization techniques. Applying recommended optimization patterns improves application performance and ensures efficient asset loading throughout the project.

How do I standardize metadata and error handling across a Next.js project?▼

Standardizing metadata and error handling in a Next.js project involves applying consistent file structure guidelines and data patterns. This standardization enforces reliable behavior and simplifies architectural planning.

Can I use these Next.js best practices for architectural planning and onboarding?▼

These Next.js best practices are designed for architectural planning, onboarding, and code reviews. They provide quick access to recommended patterns, file structure guidelines, and caching strategies to standardize development workflows.