skills.rest
theslashdojo
theslashdojoOFFICIAL
Explore all skills by this author →
GitHub

app-router

Create and organize Next.js App Router routes and layouts.

Updated Apr 10, 2026
Search Tags:#routing#scaffolding#nextjs#layouts#app-router#server-components#dynamic-routes
One-click install
npx skills add https://github.com/theslashdojo/dojo --skill app-router-theslashdojo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: app-router
Source: https://github.com/theslashdojo/dojo/tree/main/nodes/nextjs/app-router
Command: npx skills add https://github.com/theslashdojo/dojo --skill app-router-theslashdojo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

The App Router skill removes friction from creating and organizing Next.js application routes and layouts by codifying file conventions, routing patterns, and server/client component boundaries so teams can build composable, streaming, and nested UI with predictable behavior.

Core Features & Use Cases

  • File-based routing conventions: guidance for page, layout, loading, error, not-found, template, and route files to map UI to URLs.
  • Dynamic and grouped routes: patterns for dynamic segments, catch-all and optional catch-all routes, route groups, parallel routes, and intercepting routes.
  • Server/Client boundaries and UX: advice on Server Components vs Client Components, streaming fallbacks, error boundaries, and navigation patterns.
  • Scaffolding: a provided bash script to create page and optional layout, loading, and error files for common routes.
  • Use Case: rapidly add a dashboard route with nested layouts, streaming loading states, and error handling while following Next.js App Router best practices.

Quick Start

Generate a new app route by running the script with ROUTE_PATH set to the desired path (for example: ROUTE_PATH=blog/[slug] PROJECT_DIR=. ./scripts/create-route.sh).

Frequently Asked Questions about app-router

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

FAQPage Schema
How do I scaffold Next.js App Router routes with nested layouts and loading states?▼

To scaffold Next.js App Router routes, run the provided bash script with ROUTE_PATH set to your desired path. It automatically generates page, layout, loading, and error files to establish nested UI with streaming fallbacks.

What is the difference between Server Components and Client Components in Next.js App Router?▼

Server Components render on the server for static or data-heavy UI, while Client Components handle interactivity. The skill provides guidance on defining these boundaries to ensure predictable streaming and nested layout behavior.

Can I create dynamic segments and route groups in Next.js using a script?▼

Yes, you can create dynamic segments and route groups in Next.js using the included scaffolding script. It codifies file conventions for catch-all routes, parallel routes, and intercepting routes without requiring external packages.

Do I need external packages to generate Next.js App Router file conventions?▼

No, you do not need external packages to generate Next.js App Router file conventions. The skill includes a bash script that directly scaffolds page, layout, loading, error, and not-found files natively.

What's the best way to organize Next.js App Router layouts and error boundaries?▼

The best way to organize Next.js App Router layouts and error boundaries is following file-based routing conventions. The skill maps UI to URLs by scaffolding layout, error, and template files for composable, streaming UI.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate
ZaibunisZaibunis

nextjs

Develop Next.js App Router applications with Server Components, TypeScript strict mode, and Zod validation.

Community
Advanced
henriquemeireles7henriquemeireles7

nextjs-app-router-fundamentals

Migrate Next.js 13+ projects from Pages Router to App Router.

Community
Intermediate