nextjs-app-router-patterns

Guide Next.js 14+ App Router patterns for building and migrating apps.

3|2|Updated Mar 23, 2026

Search Tags:#patterns #streaming #nextjs #app-router #server-components #data-fetching #parallel-routes

Ready to run

npx skills add https://github.com/wesleyegberto/software-engineering-skills --skill nextjs-app-router-patterns-wesleyegberto

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-app-router-patterns
Source: https://github.com/wesleyegberto/software-engineering-skills/tree/main/plugins/frontend/skills/nextjs-app-router-patterns
Command: npx skills add https://github.com/wesleyegberto/software-engineering-skills --skill nextjs-app-router-patterns-wesleyegberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js developers often struggle to organize and implement modern App Router patterns across Server Components, streaming, and parallel routes. This Skill consolidates proven architectures, patterns, and best practices to accelerate building scalable Next.js apps.

Core Features & Use Cases

Patterns for Server Components, Client Components, and Streaming
Parallel Routes, Intercepting Routes, and Route Handlers
Guidance for SSR/SSG, data fetching strategies, and caching

Quick Start

Begin by studying the foundational layout and patterns in the examples and adapting them to your 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 structure Next.js App Router projects using layout.tsx and page.tsx conventions?▼

Next.js App Router projects use file conventions like layout.tsx for shared UI and page.tsx for routes. This Skill guides developers through organizing these structures, defining rendering modes, and specifying functional requirements for scalable applications.

How do Server Components and Client Components work together in Next.js 14+?▼

Server Components and Client Components in Next.js 14+ split rendering logic between server and browser. This Skill provides architectural patterns to distinguish their boundaries, manage data fetching, and implement streaming for optimized performance.

What is the best way to implement parallel routes and intercepting routes in Next.js?▼

The best way to implement parallel routes and intercepting routes is by using Next.js App Router's specialized folder conventions. This Skill consolidates proven architectures to help developers build complex routing patterns and Route Handlers effectively.

How do I manage data fetching and caching strategies when migrating to Next.js App Router?▼

Data fetching and caching strategies in Next.js App Router rely on Server Components and specific rendering modes like SSR and SSG. This Skill outlines best practices for migrating apps, optimizing data fetching, and configuring cache behaviors.

Can I use streaming to optimize rendering performance in Next.js App Router?▼

Yes, streaming optimizes rendering performance in Next.js App Router by sending UI chunks progressively. This Skill details patterns for implementing streaming alongside Server Components to accelerate modern app interfaces.