skills.rest
JoaoPedroAmaral
JoaoPedroAmaralCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-best-practices

Review Next.js 13+ codebases for app router, data fetching, and performance best practices.

Updated Aug 27, 2026
Search Tags:#performance#authentication#api#nextjs#best-practices#app-router#server-components
One-click install
npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill nextjs-best-practices-joaopedroamaral
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/JoaoPedroAmaral/backBarbearia/tree/main/.claude/skills/nextjs-best-practices
Command: npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill nextjs-best-practices-joaopedroamaral

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many Next.js projects accumulate suboptimal patterns that hurt performance, increase client-side JavaScript, and create fragile authentication and API layers; this Skill provides clear guidance to align projects with modern Next.js conventions and reduce regression risk.

Core Features & Use Cases

  • App Router & Component Strategy: Prefer the /app directory, use Server Components for data fetching and Client Components only for interactivity to minimize client bundle size.
  • Data Fetching Patterns: Recommend server-side fetching, route handlers for custom APIs, and client-side caching (SWR/React Query) when needed.
  • Performance Optimization: Advise dynamic imports, next/image and next/font usage, ISR, and monitoring of Web Vitals for incremental improvements.
  • Authentication & API Design: Use middleware for route protection, secure token storage (httpOnly cookies), server-side validation, and rate limiting for APIs.
  • Project Structure & Maintainability: Provide a recommended folder layout, conventions for shared components, and guidelines for testing and documentation.

Quick Start

Use this skill to review a Next.js codebase and produce a prioritized checklist of improvements for routing, data fetching, authentication, and performance.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
What's the best way to structure Next.js app router projects for performance?▼

The best way to structure Next.js app router projects is using Server Components for data fetching to minimize client bundle size, reserving Client Components strictly for interactivity to reduce client-side JavaScript and improve performance.

How do I implement authentication middleware in Next.js 13+?▼

To implement authentication middleware in Next.js 13+, use middleware for route protection and secure token storage with httpOnly cookies. Apply server-side validation to ensure robust API security and prevent fragile authentication layers.

When should I use ISR versus server-side data fetching in Next.js?▼

Use Incremental Static Regeneration (ISR) for performance optimization when you need static content with periodic updates. Prefer server-side fetching for dynamic, user-specific data to ensure fresh content without sacrificing Next.js performance.

Does Next.js best practice guidance apply to my existing API route handlers?▼

Next.js best practice guidance applies to existing API route handlers by recommending secure token storage, server-side validation, and rate limiting. It also advises using client-side caching with SWR or React Query when needed for optimized data fetching.

Why does my Next.js application have a large client-side JavaScript bundle?▼

Your Next.js application likely has a large client-side JavaScript bundle due to suboptimal patterns, such as using Client Components for data fetching. Migrating to Server Components and applying dynamic imports reduces bundle size and improves Web Vitals.

Related Skills

Explore More Software Engineering Skills→
geinalageinala

nextjs-best-practices

Design scalable Next.js App Router architectures with server components and routing patterns.

Official
Advanced
solitasrohsolitasroh
2

phase-7-seo-security

Implement SEO tags, structured data, sitemaps, and security headers for Next.js apps.

Community
Advanced
ilyvscilyvsc
7

nextjs-data-fetching

Implement Next.js data fetching with SWR and React Query caching strategies.

Community
Advanced
Aqsagull99Aqsagull99

nextjs-skill

Build Next.js 16+ apps with App Router, server components, and API routes.

Community
Intermediate