New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Nextjs App Router

by HoangNguyen0403 in HoangNguyen0403/agent-skills-standard

Configure file-system routing with nested layouts, route groups, parallel routes, and error boundaries in Next.js App Router.

MITAuto-check passedDevelopment

Install Nextjs App Router

skills CLI
$ npx skills add HoangNguyen0403/agent-skills-standard --skill nextjs-app-router -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install HoangNguyen0403/agent-skills-standard nextjs-app-router --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/nextjs/nextjs-app-router .claude/skills/nextjs-app-router && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
nextjs-app-router
GitHub stars
572
Token cost
~993 tokens
SKILL.md length
375 words
Files
4 (incl. references)
Skills in repo
211
Repo updated
First seen
Licence
MIT

At a glance

Configure file-system routing with nested layouts, route groups, parallel routes, and error boundaries in Next.js App Router.

  • Works in 5 steps: Create page — Add app/dashboard/page.tsx… → Add layout — Create… → Add loading state — Create… → …
  • Creating page routes
  • SKILL.md covers Priority: P0 (CRITICAL), Workflow: Add New Route, Route Group Example and Implementation Guidelines, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Nextjs App Router is an agent skill from HoangNguyen0403/agent-skills-standard. Configure file-system routing with nested layouts, route groups, parallel routes, and error boundaries in Next.js App Router. Use when creating page routes, adding loading/error states, or organizing routes with groups and dynamic segments.

Its SKILL.md is about 990 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `evals/evals.json`, `references/SELF_HOSTING.md` and `references/implementation.md`).

It sits in Development, covering Error handling. It works with Next.js. The repository describes itself as: A collection of Agent Skills Standard and Best Practice for Programming Languages, Frameworks that help our AI Agent follow best practies on frameworks and programming laguages. The licence is MIT.

When your agent uses it

  • Creating page routes
  • Adding loading/error states
  • Organizing routes with groups and dynamic segments

Example prompts

  • “/nextjs-app-router”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Create page — Add app/dashboard/page.tsx as Server Component.
  2. Add layout — Create app/dashboard/layout.tsx returning {children}.
  3. Add loading state — Create app/dashboard/loading.tsx for Suspense boundary.
  4. Add error boundary — Create app/dashboard/error.tsx with 'use client' and reset prop.
  5. Await async APIs — In Next.js 15+, await params, cookies(), headers().

What it can do on your machine

Read from SKILL.md and the folder at commit b529c2d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Nextjs App Router loads about 993 tokens when it runs, and up to ~1.4k if it reads all its reference files. Until then it costs about 65 tokens; SKILL.md has 375 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~65
When it runs · the whole SKILL.md, loaded when a task matches
~993
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from HoangNguyen0403/agent-skills-standard at commit b529c2d, republished under its MIT licence (© HoangNguyen0403). 375 words, ~993 tokens.

Download SKILL.mdSave it as .claude/skills/nextjs-app-router/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
nextjs-app-router
description
Configure file-system routing with nested layouts, route groups, parallel routes, and error boundaries in Next.js App Router. Use when creating page routes, adding loading/error states, or organizing routes with groups and dynamic segments.

Priority: P0 (CRITICAL)

Workflow: Add New Route

  1. Create page — Add app/dashboard/page.tsx as Server Component.
  2. Add layout — Create app/dashboard/layout.tsx returning {children}.
  3. Add loading state — Create app/dashboard/loading.tsx for Suspense boundary.
  4. Add error boundary — Create app/dashboard/error.tsx with 'use client' and reset prop.
  5. Await async APIs — In Next.js 15+, await params, cookies(), headers().

Route Group Example

See implementation examples

Implementation Guidelines

Routing Architecture
  • Structure: Use app/ directory. Define routes with app/dashboard/layout.tsx returning {children}; shared UI nests inside app/layout.tsx automatically. Handle states with loading.tsx, error.tsx, and not-found.tsx.
  • Segments: Organize features with Route Groups (brackets (auth)) to excluded from URL path. Use Dynamic Routes (brackets [slug]) and define static paths via generateStaticParams.
  • Specialized: Use Parallel Routes (@modal) by adding slot to parent layout and providing default.tsx fallback. Use Intercepting Routes ((.)route) for advanced layouts like dashboards.
Data & Functions
  • Next.js 15+ Async: Always await params: Promise, searchParams, cookies(), and headers().
  • Security: Use middleware.ts for edge-side authentication and redirection. Ensure all Route Handlers (route.ts) secured with appropriate auth checks.
  • RSC: Default to React Server Components (RSC). Only use 'use client' at leaf nodes for interactivity (hooks/events).
  • Error Boundaries: Create app/dashboard/loading.tsx to auto-wrap routes in Suspense boundary. In error.tsx, use 'use client' and provide reset: () => void function.

File Conventions

  • page.tsx: UI for route.
  • layout.tsx: Shared UI wrapping children. Persists across navigation.
  • loading.tsx: Suspense boundary for loading states.
  • error.tsx: Error boundary (Must Client Component).
  • route.ts: Server-side API endpoint.
Show full SKILL.md (142 more words)Show less

Structure Patterns

  • Route Groups: Use parenthesis (auth) to organize without affecting URL path.
  • Private Folders: Use underscore _lib to exclude from routing.
  • Dynamic Routes: Use brackets [slug] or [...slug] (catch-all).

Best Practices

  • RSC Boundaries: Ensure props passed to Client Components serializable. See RSC Boundaries & Serialization.
  • Parallel Routes (@folder): Render multiple pages in same layout. Use default.tsx for fallback.
  • Intercepting Routes ((..)folder): Load routes within current layout context.
  • Colocation: Keep component files, styles, and tests inside route folder.
  • Layouts: Use Root Layout (app/layout.tsx) for <html> and <body> tags.
  • Self-Hosting Standard

Anti-Patterns

  • No unawaited async APIs: params, cookies(), headers() Promises in Next.js 15+; always await.
  • No 'use client' at tree root: Place at leaves; keep layouts and pages as Server Components.
  • No <html>/<body> in nested layouts: Only app/layout.tsx (root layout) should include them.
  • No missing error.tsx: Every route segment needs Client Component error boundary.

© HoangNguyen0403, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/nextjs/nextjs-app-router of HoangNguyen0403/agent-skills-standard.

  • SKILL.md
  • evals/evals.json
  • references/SELF_HOSTING.md
  • references/implementation.md

Open the folder on GitHubat commit b529c2d

Compare with similar skills

Nextjs App Router next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Nextjs App Router compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nextjs App Router this skillHoangNguyen0403/agent-skills-standard572—~993Automated safety check: PassMIT
Next Best Practicesvercel-labs/openreview1.7k18 repos~1kAutomated safety check: PassNone
Nextjsblencorp/claude-code-kit106—~2.6kAutomated safety check: PassMIT
App Routerdavepoon/buildwithclaude3.6k1 repos~1.3kAutomated safety check: PassMIT
Nextjs Data Fetchinggiuseppe-trisciuoglio/developer-kit357—~2.2kAutomated safety check: NotesMIT
Nextjs ExpertLeoYeAI/openclaw-master-skills2.2k—~4.8kAutomated safety check: PassMIT

Similar skills

  • Next Best Practices

    vercel-labs/openreview

    Official

    Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

    1.7k GitHub starsUsed in 18 repos~1k tokens
    DevelopmentAuto-check passed

  • Nextjs

    blencorp/claude-code-kit

    Next.js 15+ App Router development patterns including Server Components, Client Components, data fetching, layouts, and server actions.

    106 GitHub stars~2.6k tokensUpdated 10 mo ago
    DevelopmentAuto-check passed

  • App Router

    davepoon/buildwithclaude

    This skill should be used when the user asks to "create a Next.js route", "add a page", "set up layouts", "implement loading states", "add error boundaries", "organize routes", "create dynamic…

    3.6k GitHub starsUsed in 1 repo~1.3k tokens
    DevelopmentAuto-check passed

  • Nextjs Data Fetching

    giuseppe-trisciuoglio/developer-kit

    Provides Next.js App Router data fetching patterns including SWR and React Query integration, parallel data fetching, Incremental Static Regeneration (ISR), revalidation strategies, and error…

    357 GitHub stars~2.2k tokensUpdated 1 mo ago
    Backend & APIsAuto-check: notes

  • Nextjs Expert

    LeoYeAI/openclaw-master-skills

    A skill your agent uses when building Next.js 14/15 applications with the App Router.

    2.2k GitHub stars~4.8k tokensUpdated 2 mo ago
    Backend & APIsAuto-check passed

  • Nekocap Runtime Cautions

    nopol10/nekocap

    A skill your agent uses when working on Next.js routing/middleware, error handling, Sentry/logging, user-facing notifications, performance-sensitive paths (Octopus subtitle renderer, large lists…

    105 GitHub stars~1.4k tokensUpdated 8 days ago
    Media & CreativeAuto-check passed

More from HoangNguyen0403/agent-skills-standard

All 211 skills in this repo

  • Subagent-Driven Development

    HoangNguyen0403/agent-skills-standard

    Runs a multi-task implementation plan by sending each task to a fresh implementer subagent, reviewing it independently, then reviewing the whole branch.

    572 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • draw.io Architecture Diagramming

    HoangNguyen0403/agent-skills-standard

    Draws architecture diagrams as editable draw.io files from a JSON spec, with a fixed house style, one C4 level per diagram and evidence-tagged shapes.

    572 GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • Android Navigation 3 Guide

    HoangNguyen0403/agent-skills-standard

    Implements and migrates to Jetpack Navigation 3 in Compose: NavDisplay, typed route objects, a state-list back stack, deep links, multiple back stacks and dialog scenes.

    572 GitHub stars~687 tokensUpdated yesterday
    Auto-check passed

  • Angular HttpClient Standards

    HoangNguyen0403/agent-skills-standard

    Sets rules for Angular HTTP code: functional interceptors, typed requests, services that own every call, and httpResource for reactive data loading in Angular 17+.

    572 GitHub stars~652 tokensUpdated yesterday
    Auto-check passed

  • Angular Tooling

    HoangNguyen0403/agent-skills-standard

    Angular CLI usage, code generation, build configuration, and bundle optimization.

    572 GitHub stars~743 tokensUpdated yesterday
    Auto-check passed

  • Common Code Review

    HoangNguyen0403/agent-skills-standard

    Conduct high-quality, persona-driven code reviews. An agent skill from HoangNguyen0403/agent-skills-standard.

    572 GitHub stars~772 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Nextjs App Router

What does Nextjs App Router do?

Configure file-system routing with nested layouts, route groups, parallel routes, and error boundaries in Next.js App Router. Nextjs App Router is an agent skill from HoangNguyen0403/agent-skills-standard.js App Router.

When should I use Nextjs App Router?

Nextjs App Router fits situations like: creating page routes; adding loading/error states; organizing routes with groups and dynamic segments.

How do I install Nextjs App Router in Claude Code?

Run `npx skills add HoangNguyen0403/agent-skills-standard --skill nextjs-app-router -a claude-code`. Or copy the skill folder (skills/nextjs/nextjs-app-router in HoangNguyen0403/agent-skills-standard) into .claude/skills/nextjs-app-router in your project. Claude Code loads it when a task matches its description.

How do I install Nextjs App Router in Codex?

Run `npx skills add HoangNguyen0403/agent-skills-standard --skill nextjs-app-router -a codex`. Or copy the skill folder (skills/nextjs/nextjs-app-router in HoangNguyen0403/agent-skills-standard) into .agents/skills/nextjs-app-router in your project. Codex loads it when a task matches its description.

Can I use Nextjs App Router in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add HoangNguyen0403/agent-skills-standard --skill nextjs-app-router -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nextjs-app-router, .gemini/skills/nextjs-app-router, .github/skills/nextjs-app-router and .opencode/skills/nextjs-app-router in your project.

What does Nextjs App Router need to run?

SKILL.md names no scripts, command-line tools or credentials: Nextjs App Router is instructions for the agent only.

Does Nextjs App Router access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Nextjs App Router safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Nextjs App Router use?

Nextjs App Router is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nextjs App Router use?

About 993 tokens (SKILL.md is roughly 4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 405 tokens, read only when the agent opens those files.

What are the alternatives to Nextjs App Router?

Skills that share tags, products or a category with Nextjs App Router: Next Best Practices (vercel-labs/openreview, 1.7k stars), Nextjs (blencorp/claude-code-kit, 106 stars), App Router (davepoon/buildwithclaude, 3.6k stars) and Nextjs Data Fetching (giuseppe-trisciuoglio/developer-kit, 357 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nextjs App Router?

HoangNguyen0403 (a GitHub user) maintains it in HoangNguyen0403/agent-skills-standard, which has 572 GitHub stars. The repository holds 211 skills in this directory. The repository was last updated on October 9, 2026.

Source: HoangNguyen0403/agent-skills-standard on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.