skills.rest
marablemarcel
marablemarcelCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-best-practices

Apply Next.js App Router best practices for server and client components, data fetching, and routing.

Updated Jan 6, 2026
Search Tags:#performance#nextjs#app-router#server-components#data-fetching#routing-patterns
One-click install
npx skills add https://github.com/marablemarcel/Living-Lytics --skill nextjs-best-practices-marablemarcel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/marablemarcel/Living-Lytics/tree/main/living-lytics/.agent/skills/nextjs-best-practices
Command: npx skills add https://github.com/marablemarcel/Living-Lytics --skill nextjs-best-practices-marablemarcel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides practical guidelines for building Next.js apps using the App Router, Server Components, and data-fetching patterns to align team practices and improve maintainability.

Core Features & Use Cases

  • Server vs Client Components guidance with decision trees and default strategies to optimize performance and UX.
  • Data fetching, routing, and API route best practices to structure robust and scalable Next.js applications.
  • Performance and metadata considerations including caching, code-splitting, and route organization to streamline production-grade apps.

Quick Start

Begin by categorizing components as server or client, then apply the recommended data-fetching, routing, and performance patterns to structure your Next.js App Router project.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
How do I structure Next.js App Router projects for production?▼

Next.js App Router projects require categorizing components as server or client first, then applying recommended data-fetching, routing, and performance patterns to structure production-grade applications.

When should I use server components versus client components in Next.js?▼

Use server components by default to optimize performance, and switch to client components only when interactivity is required; decision trees help categorize components based on data-fetching needs and UX requirements.

What are the best data-fetching strategies for Next.js server components?▼

Data-fetching strategies in Next.js server components should align with routing patterns and performance considerations, leveraging native server-side fetching to streamline robust and scalable application structures.

Can I use these Next.js routing patterns to improve app performance?▼

Yes, applying Next.js routing patterns and route conventions improves app performance through optimized caching, code-splitting, and metadata considerations suitable for production-grade projects.

What are the limitations of Next.js App Router conventions?▼

Next.js App Router conventions require careful component categorization and data-fetching alignment; limitations arise when complex client interactivity forces heavy client-side rendering, impacting performance and maintainability.

Related Skills

Explore More Software Engineering Skills→
barbosakjnbarbosakjn
1

nextjs-best-practices

Apply server components, data fetching patterns, and routing conventions to Next.js App Router apps.

Community
Advanced
auldsyababuaauldsyababua
6

cicd-pipeline-generator

Generate CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins.

Community
Advanced
vanhoangkhavanhoangkha

prowler-ui

Enforce Prowler UI development conventions for Next.js, React, and Tailwind CSS projects.

Community
Intermediate
TylerbryyTylerbryy
1

react-next-modern

Enforce React 19 and Next.js App Router server-first patterns during code reviews and migrations.

Community
Advanced