skills.rest
WP-Coaching
WP-CoachingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

nextjs-best-practices

Guides Next.js App Router development with Server Components, routing, and caching patterns.

Updated Sep 1, 2021
Search Tags:#caching#react#routing#data fetching#next.js#server components#app router
One-click install
npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill nextjs-best-practices-wp-coaching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/WP-Coaching/pellegrims.coach/tree/main/.agents/skills/nextjs-best-practices
Command: npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill nextjs-best-practices-wp-coaching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building Next.js applications often misuse Client Components, mishandle data fetching, or ignore caching and error boundaries, leading to bloated bundles and poor performance. This Skill provides structured principles for making correct architectural decisions in Next.js App Router projects. ## Core Features & Use Cases - Server vs Client Component Guidance: Decision trees and tables for choosing when to use 'use client' versus default Server Components. - Data Fetching & Caching Patterns: Covers static, ISR, and dynamic fetch strategies plus revalidation with revalidatePath and revalidateTag. - Routing & Structure Conventions: Documents file conventions (page.tsx, layout.tsx, loading.tsx, error.tsx), route groups, parallel routes, and API route handlers. - Use Case: When building a new dashboard page, consult this Skill to decide the component split, set up loading and error states, configure metadata, and apply the right caching strategy before writing code. ## Quick Start Review my Next.js page component and tell me whether it should be a Server or Client Component and how to structure its data fetching.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
When should I use 'use client' in Next.js App Router?▼

Use 'use client' only when a component needs useState, useEffect, or event handlers. Server Components are the default and should handle data fetching, layouts, and static content; split interactive parts into client child components.

How do I choose between static, ISR, and dynamic data fetching in Next.js?▼

Use the default static fetch for content cacheable at build time, revalidate with a time interval for ISR when data changes periodically, and use no-store for dynamic data that must be fresh on every request.

What files does Next.js App Router use for routing conventions?▼

App Router uses page.tsx for route UI, layout.tsx for shared layouts, loading.tsx for loading states, error.tsx for error boundaries, and not-found.tsx for 404 pages. Route groups with (name) organize routes without affecting the URL.

How do I revalidate cached data in Next.js?▼

Revalidate using time-based revalidation with the revalidate fetch option, or on-demand with revalidatePath and revalidateTag after mutations. Server actions are a common place to trigger on-demand revalidation.

What are common Next.js App Router anti-patterns to avoid?▼

Avoid adding 'use client' everywhere, fetching data in client components instead of server components, skipping loading.tsx and error.tsx states, and shipping large client bundles instead of using dynamic imports.

Related Skills

Explore More Software Engineering Skills→
Coverage-CreativesCoverage-Creatives

Next.js Project Setup

Initialize and configure Next.js projects with App Router, TypeScript, and Tailwind CSS.

Official
Intermediate
auldsyababuaauldsyababua
6

cicd-pipeline-generator

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

Community
Advanced
baoduo158baoduo158
1

webapp-testing

Automate local webapp testing with Playwright for frontend components and UI behavior.

Community
Intermediate
zenbuappszenbuapps

react-router-v7

Implement React Router v7 Data Mode routing with loaders and actions.

Official
Advanced