skills.rest
daniellelooo
danielleloooCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router-patterns

Implement Next.js 14+ App Router patterns with Server Components and Server Actions.

Updated Mar 10, 2026
Search Tags:#web development#data fetching#nextjs#ssr#app router#ssg#react server components
One-click install
npx skills add https://github.com/daniellelooo/velour --skill nextjs-app-router-patterns-daniellelooo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-patterns
Source: https://github.com/daniellelooo/velour/tree/main/.agents/skills/nextjs-app-router-patterns
Command: npx skills add https://github.com/daniellelooo/velour --skill nextjs-app-router-patterns-daniellelooo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides comprehensive patterns and best practices for building modern, efficient web applications using the Next.js App Router, enabling developers to leverage advanced features like Server Components, streaming, and parallel routes.

Core Features & Use Cases

  • Server Components: Efficiently fetch data and manage server-side logic.
  • Client Components: Implement interactive UI elements with React hooks.
  • Data Fetching & Caching: Optimize data retrieval with various caching strategies.
  • Routing: Utilize parallel and intercepting routes for complex UIs and modals.
  • Server Actions: Handle data mutations securely and progressively.
  • Use Case: When building a new e-commerce site with Next.js, use this Skill to implement product pages with dynamic data fetching, a client-side cart, and server actions for checkout.

Quick Start

Use the nextjs-app-router-patterns skill to generate a basic layout.tsx and page.tsx file for a new Next.js App Router project.

Frequently Asked Questions about nextjs-app-router-patterns

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

FAQPage Schema
How do I migrate from Next.js Pages Router to App Router architecture?▼

Migrating to the Next.js App Router involves restructuring routes into nested layouts and adopting React Server Components. This skill provides patterns for mapping existing pages to the new file conventions and implementing efficient SSR/SSG data fetching.

What is the best way to fetch data in Next.js Server Components?▼

Data fetching in Next.js Server Components can be handled directly within the component without API endpoints. This skill outlines caching strategies and streaming patterns to optimize data retrieval and improve server-side rendering performance.

How do I handle data mutations with Server Actions in Next.js?▼

Server Actions in Next.js allow secure data mutations directly from client components without creating separate API routes. This skill demonstrates progressive enhancement patterns to implement these full-stack features robustly.

When should I use parallel and intercepting routes in Next.js?▼

Parallel and intercepting routes are used in Next.js to build complex UIs and modals by rendering multiple pages simultaneously. This skill provides architectural patterns for implementing these advanced routing features effectively.

How do I manage Client Components and React hooks in a Next.js App Router project?▼

Client Components in a Next.js App Router project are used for interactive UI elements requiring React hooks. This skill details how to properly structure your application to balance server-side rendering with client-side interactivity.

Does this Next.js App Router skill support efficient SSR and SSG implementations?▼

Yes, this Next.js App Router skill satisfies requirements for efficient SSR and SSG implementations. It provides advanced patterns to optimize data fetching and leverage React Server Components for modern web development.

Related Skills

Explore More Software Engineering Skills→
act70255act70255

nextjs-app-router-patterns

Provide Next.js 14+ App Router patterns for server-side rendering and streaming.

Community
Advanced
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
bytetalentbytetalent

Server Client Page Split

Separate server and client components in Next.js App Router pages.

Official
Intermediate
JCE-Joshhh77JCE-Joshhh77
16

astro-remix

Coordinates Astro/Remix projects covering routing, SSR/SSG decisions, islands, and deployment workflows.

Community
Advanced