skills.rest
qazuor
qazuorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-patterns

Implement Next.js App Router patterns for Server and Client Components.

Updated Feb 5, 2026
Search Tags:#middleware#nextjs#app-router#server-components#data-fetching#server-actions
One-click install
npx skills add https://github.com/qazuor/claude-code-knowledge --skill nextjs-patterns-qazuor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-patterns
Source: https://github.com/qazuor/claude-code-knowledge/tree/main/skills/nextjs-patterns
Command: npx skills add https://github.com/qazuor/claude-code-knowledge --skill nextjs-patterns-qazuor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides reusable patterns and best practices for building Next.js apps with the App Router, covering Server/Client Components, data fetching strategies (SSR/SSG/ISR), caching strategies, middleware, route handlers, server actions, and loading/error states.

Core Features & Use Cases

  • Server/Client Component patterns: Demonstrates when to use server components by default and how to progressively opt into client components.
  • Data fetching strategies: Examples of SSR, SSG, and ISR with practical code patterns.
  • Caching and revalidation: Techniques for cache control, on-demand revalidation, and tag-based invalidation.
  • Middleware and route handlers: Setup for authentication gates and REST/Route handlers.
  • Use Case: Build an admin dashboard with mixed SSR data and client interactivity using server actions for mutations.

Quick Start

Use the Next.js App Router patterns in a new or existing Next.js project to structure pages, layouts, and actions as demonstrated.

Frequently Asked Questions about nextjs-patterns

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

FAQPage Schema
How do I structure Next.js App Router Server and Client Components for scalability?▼

Structure Next.js App Router components by defaulting to Server Components and progressively opting into Client Components. This pattern ensures scalable data fetching and client interactivity without unnecessary hydration overhead.

What's the best way to implement data fetching and caching in Next.js App Router?▼

Implement Next.js App Router data fetching using SSR, SSG, or ISR patterns combined with cache control techniques. Apply on-demand revalidation and tag-based invalidation to manage data freshness effectively.

How do I use middleware and route handlers for authentication in Next.js?▼

Use Next.js middleware to create authentication gates protecting your routes. Define route handlers to manage REST API endpoints, securing dashboard and admin panel access within the App Router directory.

Can I use server actions for mutations in a Next.js admin dashboard?▼

Yes, you can use Next.js server actions to handle data mutations directly in an admin dashboard. This pattern seamlessly integrates mixed SSR data with client interactivity for efficient form processing.

Do I need TypeScript and Node.js to use Next.js App Router patterns?▼

Yes, you need a Next.js project environment with Node.js installed and basic TypeScript support. Familiarity with app directory conventions is also required to implement the server and client patterns effectively.

When should I use ISR vs SSG for Next.js content sites?▼

Use Next.js ISR when you need incremental data updates without full rebuilds, and SSG for static content. The skill provides specific code patterns to implement both fetching strategies for content sites.

Related Skills

Explore More Software Engineering Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

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

Community
Intermediate
auldsyababuaauldsyababua
6

cicd-pipeline-generator

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

Community
Advanced
JaylaelikeJaylaelike

nextjs-patterns

Consolidate Next.js 15 App Router patterns for pages, routes, and middleware.

Community
Intermediate
Gaku52Gaku52
6

nextjs-development

Build scalable Next.js apps with App Router and Server Components.

Community
Intermediate