skills.rest
SKANL
SKANLCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router-patterns

Implement Next.js 14+ App Router patterns for Server Components and streaming.

Updated Jan 9, 2026
Search Tags:#full-stack#migration#streaming#nextjs#app-router#server-components#routing-patterns
One-click install
npx skills add https://github.com/SKANL/saas-abogados-nextjs --skill nextjs-app-router-patterns-skanl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router-patterns
Source: https://github.com/SKANL/saas-abogados-nextjs/tree/main/.agents/skills/nextjs-app-router-patterns
Command: npx skills add https://github.com/SKANL/saas-abogados-nextjs --skill nextjs-app-router-patterns-skanl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides developers with a structured playbook to implement Next.js 14+ App Router patterns, reducing boilerplate and ensuring scalable architecture.

Core Features & Use Cases

  • Patterns for Server Components, streaming, and data fetching.
  • Use cases include migrating from Pages Router, implementing parallel routes, and server actions.
  • Real-world scenario: set up a new app with streaming and SSR/SSG for ecommerce or dashboard.

Quick Start

Copy and adapt the patterns to scaffold an App Router architecture in your Next.js project. Start by applying the provided layout, page, and route examples to your app's routes, ensuring correct data fetching strategies and error boundaries.

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 a Next.js app from Pages Router to App Router?▼

Next.js App Router migration involves applying structured file conventions for layouts and pages. You adapt existing routing patterns and data fetching strategies to the new directory structure to ensure a scalable architecture.

How do Server Components and streaming work in Next.js 14?▼

Server Components and streaming in Next.js 14 enable direct data fetching on the server and progressive UI rendering. You apply specific patterns to stream content incrementally, improving initial load performance for applications like dashboards.

What is the best way to structure parallel routes in a Next.js App Router?▼

The best way to structure parallel routes in a Next.js App Router is by applying codified file conventions. This pattern allows simultaneous rendering of multiple pages within a single layout, enabling complex dashboard interfaces.

Can I use Next.js App Router patterns for both SSR and SSG in an ecommerce app?▼

Yes, Next.js App Router patterns support both SSR and SSG for ecommerce apps. You implement specific data fetching and caching strategies within your page files to enable server-side rendering or static site generation as needed.

When should I use Server Actions instead of API routes in Next.js?▼

You should use Server Actions instead of API routes when you want to mutate data directly from Server Components. This pattern reduces boilerplate by eliminating separate API endpoints while maintaining structured server-side execution.

Related Skills

Explore More Software Engineering Skills→
kazdenckazdenc
42

nextjs-init

Scaffold a Next.js project with App Router, TypeScript, and Tailwind CSS.

Community
Intermediate
RepairYourTechRepairYourTech
6

vercel

Manage Vercel deployments, environment variables, and platform configuration.

Community
Advanced
MohabsmarMohabsmar

fullstack-dev

Scaffold Next.js 16 projects with TypeScript, Tailwind, Prisma, and shadcn/ui.

Community
Advanced
kevinreberkevinreber
3

route

Create Remix routes with loaders and actions for data handling.

Community
Advanced