Provides guidance and reusable assets for implementing navigation in Next.js App Router. Covers file-based routing, dynamic routes, layouts, loading/error UI, protected routes with middleware, and navigation patterns like Link, useRouter, and redirect. Use when working on routing or navigation tasks in a Next.js App Router project.
This skill provides guidance and reusable assets for implementing routing and navigation in a Next.js application using the App Router.
The Next.js App Router introduces several conventions and patterns for handling routing, UI states, and navigation. This skill covers the most important ones.
Use this skill when you need to:
<Link>, useRouter, or redirect.File-based routing is the core of the App Router. Folders define route segments, and page.tsx files make them publicly accessible.
[folderName] for dynamic segments.[...folderName] to match multiple segments.(folderName) to organize routes without affecting the URL.For detailed examples and file structures, refer to the routing patterns guide: Read: references/routing-patterns.md
The App Router has special file conventions for creating UI for different states.
layout.tsx: Shared UI for a segment and its children.loading.tsx: A loading indicator shown during server-side rendering.error.tsx: A fallback UI for unexpected errors.@folder).For implementation details and code examples, see the UI patterns guide: Read: references/ui-patterns.md
There are several ways to handle navigation in the App Router, depending on the context (client or server).
<Link> component: The primary method for client-side navigation. Prefetches routes for a faster experience.useRouter hook: For programmatic navigation in Client Components.redirect function: To redirect users from Server Components or Server Actions.For usage examples of each method, consult the navigation guide: Read: references/navigation.md
Use middleware to protect routes that require authentication. Middleware runs before a request is completed and can redirect users based on their session status.
middleware.ts file in the root of your project.matcher config to specify which paths the middleware should apply to.For a detailed explanation and a complete middleware example, see the protected routes guide: Read: references/protected-routes.md
This skill includes several templates to help you get started quickly.
assets/app-router-template/assets/middleware-template.tsassets/layout-template.tsxassets/navigation-component-template.tsxTo use a template, copy the file or directory structure into your project and adapt it to your needs.