nextjs-app-router-patterns

$npx mdskill add benjaminasterA/antigravity-awesome-skills/nextjs-app-router-patterns

Master Next.js App Router patterns for efficient React development

  • Build new Next.js applications using App Router and Server Components.
  • Migrate existing Pages Router applications to App Router for better performance.
  • Implement advanced data fetching techniques like streaming and parallel routes.
  • Optimize application performance with best practices in SSR/SSG, caching, and optimization.

SKILL.md

.github/skills/nextjs-app-router-patternsView on GitHub ↗
---
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 Serve..."
risk: unknown
source: community
---

# 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.

More from benjaminasterA/antigravity-awesome-skills

SkillDescription
2d-games2D game development principles. Sprites, tilemaps, physics, camera.
3d-games3D game development principles. Rendering, shaders, physics, cameras.
3d-web-experienceExpert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing ...
accessibility-compliance-accessibility-auditYou are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
active-directory-attacksThis skill should be used when the user asks to \"attack Active Directory\", \"exploit AD\", \"Kerberoasting\", \"DCSync\", \"pass-the-hash\", \"BloodHound enumeration\", \"Golden Ticket\", ...
activecampaign-automationAutomate ActiveCampaign tasks via Rube MCP (Composio): manage contacts, tags, list subscriptions, automation enrollment, and tasks. Always search tools first for current schemas.
address-github-commentsUse when you need to address review or issue comments on an open GitHub Pull Request using the gh CLI.
agent-framework-azure-ai-pyBuild Azure AI Foundry agents using the Microsoft Agent Framework Python SDK (agent-framework-azure-ai). Use when creating persistent agents with AzureAIAgentsProvider, using hosted tools (code int...
agent-manager-skillManage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.
agent-memory-mcpA hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).