nextjs-best-practices

Enforce Next.js App Router best practices for components, data fetching, and routing.

98|25|Updated Mar 14, 2020
One-click install
npx skills add https://github.com/baotoq/micro-commerce --skill nextjs-best-practices-baotoq
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/baotoq/micro-commerce/tree/main/.agents/skills/nextjs-best-practices
Command: npx skills add https://github.com/baotoq/micro-commerce --skill nextjs-best-practices-baotoq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardize Next.js App Router development by codifying best-practices and routing conventions.

Core Features & Use Cases

  • Server vs Client Components guidance based on a decision tree.
  • Data fetching, caching, and routing patterns aligned with App Router.
  • Use Case: When starting a new Next.js project, apply these guidelines to establish consistent structure and performance best practices.

Quick Start

Audit your Next.js project and align components, data fetching, and routing with App Router best practices.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
How do I decide between Server Components and Client Components in Next.js App Router?

Next.js App Router best practices use a decision tree to dictate Server vs Client Components. Apply this decision tree to standardize frontend architecture and enforce optimal server/client boundaries across your project.

What are the best practices for data fetching and caching in Next.js App Router?

Data fetching in Next.js App Router requires aligning caching strategies with your routing patterns. Standardize these data-fetch strategies to establish consistent structure and performance best practices across typical frontend projects.

How do I structure files and routing conventions for a new Next.js project?

Next.js App Router routing conventions codify specific file-structure rules for your project. Apply these guidelines when starting a new Next.js project to establish a consistent structure aligned with App Router patterns.

Can I use these Next.js best practices to audit an existing frontend architecture?

Yes, you can audit your existing Next.js project to align components, data fetching, and routing with App Router best practices. This standardizes your frontend architecture by codifying routing conventions and server/client boundaries.

Why do I need standardized routing conventions for my Next.js App Router?

Standardized routing conventions solve inconsistent Next.js App Router development. Codifying these best practices enforces server/client decision trees and data-fetch strategies, ensuring performance and structural consistency across typical projects.