next-best-practices

Standardize Next.js best practices into a reusable skill unit.

1|Updated Mar 16, 2026
One-click install
npx skills add https://github.com/otography/otography-app --skill next-best-practices-otography
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/otography/otography-app/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/otography/otography-app --skill next-best-practices-otography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes Next.js best practices into a reusable unit to help teams enforce consistent patterns across projects, reducing common pitfalls in app routing, data fetching, and error handling.

Core Features & Use Cases

  • Guidance on file conventions, server components vs client components, data patterns, and route/api design for maintainable apps.
  • Standardized guidance on Next.js metadata, route handlers, image/font optimization, bundling, and debugging techniques to accelerate onboarding.
  • Real-world application: align new projects with documented conventions to reduce rework and improve cross-team collaboration.

Quick Start

Review the SKILL.md and apply the documented sections to 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
How do I structure Next.js server components versus client components correctly?

To structure Next.js server components versus client components correctly, apply standardized file conventions that guide data patterns and runtime decisions. This ensures consistent code quality and reduces common pitfalls in app routing.

What are the best practices for Next.js app routing and metadata management?

Next.js app routing and metadata management best practices involve standardizing route and API design alongside metadata configuration. This approach accelerates onboarding and maintains maintainable apps across projects.

How do I implement error handling in Next.js server components?

Implement error handling in Next.js server components by following standardized best practices for runtime decisions and data patterns. This enforces consistent code quality and reduces common pitfalls in app routing.

Does this Next.js best practices guidance work for existing projects?

This Next.js best practices guidance works for existing projects by applying documented conventions to align code quality. It standardizes file conventions, data patterns, and error handling to reduce rework and improve collaboration.

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 to follow standardized guidance on optimization techniques and bundling. This accelerates onboarding and ensures maintainable apps through consistent conventions.

When should I not use client components in Next.js?

You should not use client components in Next.js when data fetching and rendering can occur on the server. Following standardized data patterns and server component conventions reduces pitfalls and optimizes runtime decisions.