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 johnku2011 in johnku2011/boilerplates-with-ai-skills

A skill your agent uses when adding pages, layouts, route handlers, or data fetching in this Next.js App Router project, to follow server-first conventions correctly.

MITAuto-check passed

Install Nextjs App Router

skills CLI
$ npx skills add johnku2011/boilerplates-with-ai-skills --skill nextjs-app-router -a claude-code

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

GitHub CLI
$ gh skill install johnku2011/boilerplates-with-ai-skills 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/johnku2011/boilerplates-with-ai-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/boilerplates/nextjs-app/skills/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
240
Token cost
~587 tokens
SKILL.md length
271 words
Files
1
Skills in repo
18
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when adding pages, layouts, route handlers, or data fetching in this Next.js App Router project, to follow server-first conventions correctly.

  • Works in 5 steps: Add a route by creating app//page.tsx;… → Keep components as React Server… → Fetch data in server components with… → …
  • Data fetching in this Next.js App Router project
  • SKILL.md covers Overview, Process, Data Fetching and Route Handlers, plus 3 more sections
  • Calls npm

What it does

Nextjs App Router is an agent skill from johnku2011/boilerplates-with-ai-skills. Use when adding pages, layouts, route handlers, or data fetching in this Next.js App Router project, to follow server-first conventions correctly.

Its SKILL.md is about 590 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Next.js App Router TypeScript project

It works with Next.js. The licence is MIT.

When your agent uses it

  • Data fetching in this Next.js App Router project
  • Follow server-first conventions correctly

Example prompts

  • “/nextjs-app-router”

Requirements

  • Compatibility (from SKILL.md): Next.js App Router TypeScript project
  • Pre-approved tools (allowed-tools): Read

Workflow steps

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

  1. Add a route by creating app//page.tsx; add layout.tsx for shared
  2. Keep components as React Server Components unless they need state, effects, or
  3. Fetch data in server components with async/await; avoid client-side
  4. Put API endpoints in app/api//route.ts using the Web Request/
  5. Verify with npm run build (catches server/client boundary and type errors).

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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.

  • Compatibility

    Next.js App Router TypeScript project

    From compatibility in the SKILL.md frontmatter.

Context cost

Nextjs App Router loads about 587 tokens when it runs. Until then it costs about 41 tokens; SKILL.md has 271 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~41
When it runs · the whole SKILL.md, loaded when a task matches
~587

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 johnku2011/boilerplates-with-ai-skills at commit 475dc6a, republished under its MIT licence (© johnku2011). 271 words, ~587 tokens.

Download SKILL.mdSave it as .claude/skills/nextjs-app-router/SKILL.md (or your agent's skills folder).
name
nextjs-app-router
description
Use when adding pages, layouts, route handlers, or data fetching in this Next.js App Router project, to follow server-first conventions correctly.
allowed-tools
Read
compatibility
Next.js App Router TypeScript project
license
MIT
metadata.stack
nextjs

Next.js App Router

Overview

Build features the App Router way: server components by default, client components only when needed, and colocated routes under app/.

Process

  1. Add a route by creating app/<segment>/page.tsx; add layout.tsx for shared UI and loading.tsx/error.tsx for states.
  2. Keep components as React Server Components unless they need state, effects, or browser APIs. Add "use client" only to those leaf components.
  3. Fetch data in server components with async/await; avoid client-side fetching for initial render when the server can do it.
  4. Put API endpoints in app/api/<name>/route.ts using the Web Request/ Response APIs.
  5. Verify with npm run build (catches server/client boundary and type errors).

Data Fetching

  • Prefer fetch in Server Components with Next.js caching options (cache, next.revalidate) documented in code comments when non-default.
  • Use loading.tsx for slow segments; avoid blocking the entire page.
  • Mutations: Server Actions or Route Handlers — validate input server-side.

Route Handlers

  • Export named HTTP functions (GET, POST, …) from route.ts.
  • Return Response.json() with correct status codes.
  • Never import client-only modules into route.ts.

Guidelines

  • Never import server-only modules (fs, secrets, DB clients) into client components.
  • Read secrets from environment variables on the server only; never expose them via NEXT_PUBLIC_* unless they are truly public.
  • Keep page.tsx thin; move logic into small, typed functions under src/ or colocated lib/.
  • Prefer next/link and next/image over raw anchors/images.
  • Colocate tests for pure helpers; run npm run build before claiming done.

Deployment

See the shared deploy-vercel skill when shipping to Vercel.

Anti-patterns

  • Marking entire pages "use client" to avoid thinking about server boundaries.
  • Fetching secrets or private APIs from the browser.
  • Giant page.tsx files mixing UI, data access, and validation.

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

Files

Just SKILL.md in boilerplates/nextjs-app/skills/nextjs-app-router of johnku2011/boilerplates-with-ai-skills.

Open the folder on GitHubat commit 475dc6a

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 skilljohnku2011/boilerplates-with-ai-skills240—~587Automated safety check: PassMIT
Sandbox Benchvercel/next.js143k—~4.1kAutomated safety check: PassMIT
Next Dev Loopvercel/next.js143k9 repos~2.3kAutomated safety check: PassMIT
Vercel Optimize Auditvercel-labs/agent-skills32k8 repos~4.3kAutomated safety check: PassNone
Supabase Development and Debuggingsupabase/agent-skills2.7k3 repos~3.6kAutomated safety check: PassMIT
AI SDKvercel-labs/ai-facts16820 repos~1.2kAutomated safety check: PassNone

Similar skills

  • Sandbox Bench

    vercel/next.js

    Official

    Benchmark React or Next.js changes on Vercel Sandbox VMs with paired A/B statistics: react PR/commit vs base, or Next.js PR/commit vs base, measured end-to-end through the bench/render-pipeline app…

    143k GitHub stars~4.1k tokensUpdated today
    Data & AnalyticsAuto-check passed

  • Next Dev Loop

    vercel/next.js

    Official

    Verify Next.js runtime behavior after editing app code. An agent skill from vercel/next.js.

    143k GitHub starsUsed in 9 repos~2.3k tokens
    Productivity & AutomationAuto-check passed

  • Vercel Optimize Audit

    vercel-labs/agent-skills

    Official

    Runs a metrics-first audit of a deployed Vercel project, gating investigations on real signals to produce ranked, citation-backed cost and performance recommendations.

    32k GitHub starsUsed in 8 repos~4.3k tokens
    DevOps & CloudAuto-check passed

  • Supabase Development and Debugging

    supabase/agent-skills

    Official

    General Supabase skill for database, auth, Edge Functions, Realtime and storage work, plus client libraries, migrations, security audits, debugging and reading logs.

    2.7k GitHub starsUsed in 3 repos~3.6k tokens
    Backend & APIsAuto-check passed

  • AI SDK

    vercel-labs/ai-facts

    Official

    Answer questions about the AI SDK and help build AI-powered features.

    168 GitHub starsUsed in 20 repos~1.2k tokens
    AI & LLM EngineeringAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

More from johnku2011/boilerplates-with-ai-skills

All 18 skills in this repo

  • Project Security

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when reviewing security-sensitive code paths — check auth, secrets, input validation, dependency risk, and data exposure before shipping.

    240 GitHub stars~650 tokensUpdated 1 mo ago
    Auto-check passed

  • Code Review

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when reviewing a diff or pull request — check correctness, tests, readability, security, and server/client boundaries before approving.

    240 GitHub stars~708 tokensUpdated 1 mo ago
    Auto-check passed

  • Python API Design

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when adding or changing FastAPI routes, dependencies, or tests in this Python service — keep endpoints typed, validated, and covered by pytest.

    240 GitHub stars~449 tokensUpdated 1 mo ago
    Auto-check passed

  • Bwai Advisor

    johnku2011/boilerplates-with-ai-skills

    Use before scaffolding a bwai project — runs the full startup-goal workflow then recommends the right boilerplate and outputs the exact bwai new command to run.

    240 GitHub stars~1.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Deploy Vercel

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when deploying or configuring this project on Vercel — env vars, build settings, serverless limits, and production checks for Next.js or Express.

    240 GitHub stars~660 tokensUpdated 1 mo ago
    Auto-check: notes

  • Express API Design

    johnku2011/boilerplates-with-ai-skills

    A skill your agent uses when adding or changing routes, middleware, or error handling in this Express.js API, to keep endpoints consistent, validated, and testable.

    240 GitHub stars~575 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Questions about Nextjs App Router

What does Nextjs App Router do?

A skill your agent uses when adding pages, layouts, route handlers, or data fetching in this Next.js App Router project, to follow server-first conventions correctly. Nextjs App Router is an agent skill from johnku2011/boilerplates-with-ai-skills.js App Router project, to follow server-first conventions correctly.

When should I use Nextjs App Router?

Nextjs App Router fits situations like: data fetching in this Next.js App Router project; follow server-first conventions correctly.

How do I install Nextjs App Router in Claude Code?

Run `npx skills add johnku2011/boilerplates-with-ai-skills --skill nextjs-app-router -a claude-code`. Or copy the skill folder (boilerplates/nextjs-app/skills/nextjs-app-router in johnku2011/boilerplates-with-ai-skills) 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 johnku2011/boilerplates-with-ai-skills --skill nextjs-app-router -a codex`. Or copy the skill folder (boilerplates/nextjs-app/skills/nextjs-app-router in johnku2011/boilerplates-with-ai-skills) 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 johnku2011/boilerplates-with-ai-skills --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?

Going by SKILL.md and its folder, Nextjs App Router needs the command-line tools its instructions call (npm). Its frontmatter pre-approves these tools: Read. Compatibility (from SKILL.md): Next.js App Router TypeScript project.

Does Nextjs App Router access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. 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 (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nextjs App Router use?

About 587 tokens (SKILL.md is roughly 2.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Nextjs App Router?

Skills that share tags, products or a category with Nextjs App Router: Sandbox Bench (vercel/next.js, 143k stars), Next Dev Loop (vercel/next.js, 143k stars), Vercel Optimize Audit (vercel-labs/agent-skills, 32k stars) and Supabase Development and Debugging (supabase/agent-skills, 2.7k 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?

johnku2011 (a GitHub user) maintains it in johnku2011/boilerplates-with-ai-skills, which has 240 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on August 24, 2026.

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