nextjs-route-design

Design Next.js App Router routing and URL structures with file-convention references.

2|Updated Feb 13, 2026
One-click install
npx skills add https://github.com/yutna/vibe-next-template --skill nextjs-route-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-route-design
Source: https://github.com/yutna/vibe-next-template/tree/main/.claude/skills/nextjs-route-design
Command: npx skills add https://github.com/yutna/vibe-next-template --skill nextjs-route-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and document scalable Next.js App Router route structures with canonical URLs, predictable navigation, and reusable patterns to guide teams from discovery to implementation.

Core Features & Use Cases

  • File-convention reference and a routing pattern decision tree to standardize app structure.
  • Guidance on parallel and intercepting routes, route groups, and modal-with-URL patterns to preserve context.
  • Workflow integration hooks for discovery and planning phases, enabling early routing decisions and documentation.

Quick Start

Map your application's URL structure and route plan using the conventions and decision trees provided, then implement shells to validate navigation flows.

Frequently Asked Questions about nextjs-route-design

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

FAQPage Schema
How do I design scalable Next.js App Router routing structures for new pages?

Design scalable Next.js App Router routing by applying a routing pattern decision tree to standardize file conventions and canonical URL structures, yielding predictable navigation flows across nested routes.

What are parallel and intercepting routes in Next.js and when should I use them?

Parallel and intercepting routes in Next.js are routing patterns that render multiple pages simultaneously or intercept navigation paths to preserve context, commonly used for modal-with-URL patterns and overlays.

How do I implement modal-with-URL patterns using Next.js intercepting routes?

Implement modal-with-URL patterns by using Next.js intercepting routes to intercept the navigation path, rendering the modal while preserving the background page context and ensuring the URL remains shareable.

Can I use route groups in Next.js to organize my app structure without affecting URLs?

Yes, route groups in Next.js organize application file structures logically without impacting the canonical URL paths, enabling team-level architectural standardization during the discovery and planning phases.

What is the best way to plan Next.js routing and navigation before implementation?

The best way to plan Next.js routing is to map your application's URL structure using file-convention references and decision trees, then implement navigation shells to validate routing flows before full implementation.

How does the Next.js routing decision tree handle nested routes and overlays?

The Next.js routing decision tree standardizes app structure by guiding nested routes and overlay implementations through file-convention references, applying parallel and intercepting route recipes to enable scalable architectures.