skills.rest
roviczzz
roviczzzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-best-practices

Guide Next.js development with App Router, server components, and data fetching patterns.

1|Updated Mar 23, 2026
Search Tags:#API#Next.js#App Router#Server Components#Performance#Data Fetching#Client Components#Routing#Metadata#Caching
One-click install
npx skills add https://github.com/roviczzz/agentic-dev --skill nextjs-best-practices-roviczzz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/roviczzz/agentic-dev/tree/main/skills/nextjs-best-practices
Command: npx skills add https://github.com/roviczzz/agentic-dev --skill nextjs-best-practices-roviczzz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to Next.js App Router principles, helping developers build efficient and maintainable server and client components.

Core Features & Use Cases

  • Server vs Client Components: Understand when and how to use server and client components for optimal performance.
  • Data Fetching Patterns: Learn the differences between default, revalidate, and no-store data fetching patterns.
  • Routing Principles: Explore file conventions and route organization techniques.
  • API Routes: Understand how to create and handle API routes with proper validation and error handling.
  • Performance Principles: Apply image optimization techniques and bundle optimization strategies.
  • Metadata: Understand how to generate static and dynamic metadata for routes.
  • Caching Strategy: Learn about cache layers and revalidation methods.
  • Server Actions: Implement form submissions, data mutations, and revalidation triggers.
  • Anti-Patterns: Avoid common pitfalls in Next.js development.
  • Project Structure: Organize your Next.js project for efficiency and scalability.

Quick Start

Execute the skill by reviewing the best practices outlined in the documentation.

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 Server Components versus Client Components in Next.js App Router?▼

Use Server Components in Next.js App Router for data fetching and static rendering, switching to Client Components only for interactivity. This approach minimizes JavaScript sent to the browser and optimizes application performance.

How do I handle data fetching and caching in Next.js App Router?▼

Handle data fetching and caching in Next.js App Router by choosing between default, revalidate, and no-store patterns. Apply cache layers and revalidation methods to control how fresh your fetched data remains.

What is the best way to implement data mutations with Server Actions in Next.js?▼

The best way to implement data mutations with Server Actions in Next.js is by handling form submissions, executing mutations, and triggering revalidation to update cached data immediately.

How do I generate static and dynamic metadata for routes in Next.js?▼

Generate static and dynamic metadata for routes in Next.js by exporting a metadata object or an asynchronous generateMetadata function from your route files, enabling SEO optimization.

What are common Next.js anti-patterns I should avoid?▼

Common Next.js anti-patterns to avoid include improper organization of server and client components, inefficient data fetching strategies, and poor project structure that reduces scalability.

Does this guide cover performance optimization for Next.js applications?▼

Yes, this guide covers performance optimization for Next.js applications, detailing image optimization techniques and bundle optimization strategies to improve loading speeds.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
hopeoverturehopeoverture
6

nextjs-fullstack-scaffold

Scaffold a Next.js 16 full-stack app with TypeScript, Tailwind, Prisma, and Supabase auth.

Community
Advanced
mgd34msumgd34msu
4

solidstart

Develop full-stack SolidStart applications with SSR, SSG, and server functions.

Community
Advanced