playbooks

home / skills / sickn33 / antigravity-awesome-skills / nextjs-app-router-patterns

nextjs-app-router-patterns skill

/skills/nextjs-app-router-patterns

This skill helps you master Next.js 14+ App Router patterns, Server Components, and data fetching to build scalable full-stack apps.

This is most likely a fork of the nextjs-app-router-patterns skill from xfstudio
npx playbooks add skill sickn33/antigravity-awesome-skills --skill nextjs-app-router-patterns

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
1.2 KB
---
name: nextjs-app-router-patterns
description: Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
---

# Next.js App Router Patterns

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

## Use this skill when

- Building new Next.js applications with App Router
- Migrating from Pages Router to App Router
- Implementing Server Components and streaming
- Setting up parallel and intercepting routes
- Optimizing data fetching and caching
- Building full-stack features with Server Actions

## Do not use this skill when

- The task is unrelated to next.js app router patterns
- You need a different domain or tool outside this scope

## Instructions

- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
- If detailed examples are required, open `resources/implementation-playbook.md`.

## Resources

- `resources/implementation-playbook.md` for detailed patterns and examples.

Overview

This skill masterfully encapsulates patterns and practices for Next.js 14+ App Router, focusing on Server Components, streaming, parallel routes, and advanced data fetching. It helps teams design scalable, fast full-stack React apps and migrate from the Pages Router to the App Router with confidence. The content is outcome-driven and geared toward production-ready implementations.

How this skill works

The skill inspects your app architecture goals, constraints, and inputs, then recommends concrete App Router patterns: Server vs Client Component boundaries, streaming strategies, parallel/intercepting route layouts, and caching rules. It provides step-by-step actions, code organization guidance, and verification steps to validate SSR/SSG behavior, streaming performance, and data consistency. When deeper examples are required, it points to a detailed implementation playbook for reproducible code snippets and deployment checks.

When to use it

  • Starting a new Next.js project targeting App Router and Server Components
  • Migrating an existing Pages Router app to the App Router
  • Implementing streaming responses or progressive hydration for large pages
  • Designing parallel or intercepting route flows (nested layouts, modals, or flows)
  • Optimizing server-side data fetching, caching, and revalidation behavior

Best practices

  • Define clear Server vs Client Component responsibilities to minimize client bundle size
  • Prefer streaming for large or progressively rendered pages to improve time-to-first-byte and perceived performance
  • Use route layouts and parallel routes to share state and avoid prop drilling
  • Apply fetch caching and revalidation rules (Cache-Control, tags) for predictable SSR/SSG outcomes
  • Test routes under real network conditions and validate hydration and streaming fallbacks

Example use cases

  • Convert a multi-page Pages Router app to App Router with shared layouts and nested parallel routes
  • Implement a feed page that streams skeletons and progressively renders items using Server Components
  • Build modal flows using intercepting routes so URLs reflect UI state without full navigation
  • Optimize product pages with server-side caching, ISR-like revalidation, and selective client interactivity

FAQ

Does the skill cover both Server and Client Components?

Yes. It explains when to use Server Components for data-heavy rendering and when to add Client Components for interactive UI.

Will it help with migrating an existing Pages Router app?

Yes. It provides migration steps, layout refactors, and strategies to preserve SEO and SSR behavior during the transition.