skills.rest
samChang72
samChang72COMMUNITY
Explore all skills by this author →
GitHub

nextjs-best-practices

Optimize Next.js server-side and client-side performance with data fetching and routing best practices.

1|Updated Feb 2, 2026
Search Tags:#SEO#data fetching#Next.js#performance optimization#server-side rendering#client-side rendering
One-click install
npx skills add https://github.com/samChang72/custom-skills --skill nextjs-best-practices-samchang72
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/samChang72/custom-skills/tree/main/gemini/skills/nextjs-best-practices
Command: npx skills add https://github.com/samChang72/custom-skills --skill nextjs-best-practices-samchang72

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides best practices for Next.js development, addressing server-side and client-side performance, data fetching, and routing challenges.

Core Features & Use Cases

  • Server vs Client Components: Guidance on when to use server vs. client components for optimal performance.
  • Data Fetching Patterns: Strategies for static, revalidate, and no-store data fetching.
  • Routing Principles: File conventions and organization for effective routing.
  • API Routes: Best practices for handling API routes with proper validation and error handling.
  • Performance Principles: Image optimization and bundle optimization techniques.
  • Metadata: Static vs. dynamic metadata strategies for SEO and performance.
  • Caching Strategy: Request, data, and full route cache layers with revalidation options.
  • Server Actions: Best practices for handling form submissions and data mutations.
  • Anti-Patterns: Identification of common pitfalls and how to avoid them.
  • Project Structure: Recommended directory structure for maintainable Next.js projects.

Quick Start

Implement server-side rendering in your Next.js application by wrapping your main component with the getServerSideProps function.

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-side rendering versus client-side rendering in Next.js?▼

Server-side rendering in Next.js is optimal for SEO and initial load performance, whereas client-side rendering suits interactive components. This Skill guides component selection to maximize performance and maintainability based on your data fetching needs.

What's the best way to implement data fetching strategies for Next.js caching?▼

Next.js data fetching best practices involve using static, revalidate, or no-store strategies to manage caching layers. This Skill provides patterns to optimize request, data, and full route caching for your specific routing requirements.

How do I optimize Next.js API routes for error handling and validation?▼

Next.js API routes require proper validation and structured error handling to ensure reliability. This Skill outlines best practices for securing your API endpoints and managing data mutations effectively via Server Actions.

How does Next.js metadata strategy affect SEO and dynamic performance?▼

Next.js metadata strategies directly impact SEO and dynamic rendering performance. This Skill differentiates between static and dynamic metadata approaches, helping you implement the correct strategy to boost search visibility without sacrificing speed.

What are common Next.js anti-patterns for project structure and performance?▼

Common Next.js anti-patterns include improper component selection and inefficient bundle optimization. This Skill identifies these pitfalls, offering directory structure recommendations and image optimization techniques to ensure maintainability.

Related Skills

Explore More Software Engineering Skills→
PM-ShawnPM-Shawn
269

init

Analyze project structure and generate `.abu/ABU.md` rules templates.

Community
Basic
joshua3403joshua3403

phase-9-deployment

Automate production deployments with builds, configurations, and rollback plans.

Community
Advanced
vanhoangkhavanhoangkha

prowler-ui

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

Community
Intermediate
devbyraydevbyray

nuxt-development

Apply Nuxt.js 3 standards for routing, SSR, data fetching, and middleware.

Community
Intermediate