Source instructions onlyA profile for using Claude Code inside App Router projects without fighting Next.js conventions.

Install or setup path

Install or scaffold the App Router project from the official Next.js docs first, then let Claude Code operate against the repository's real routing, build, and verification conventions.

No verified install command on this page

This profile is useful for evaluation and workflow context, but WhichAITools did not verify one direct install command for it. Use the linked source instructions instead of guessing.

Use this profile for

Developers working on App Router applications who need AI assistance that respects Next.js structure instead of treating the repo like a generic React project.

Primary categorySkill Authoring
Source count3
OpenClaw relevantNo

What it does

This profile focuses on the operating model of modern Next.js apps: route segments, layouts, React Server Components, data fetching patterns, route handlers, and the file conventions that shape what code belongs where.

Best for

Developers working on App Router applications who need AI assistance that respects Next.js structure instead of treating the repo like a generic React project.

Why it stands out

Next.js changes fast, and App Router projects are convention-heavy. A dedicated profile keeps Claude Code anchored to the framework rules that most often cause accidental regressions.

Adopt this skill carefully

Return to the parent path

Move back to the category or hub instead of jumping to the homepage and losing context.

Cross-check the method

Review methodology and manuals before treating a public profile or copied command like production-ready guidance.

Use the surrounding workflow hub

When the profile belongs to OpenClaw operations, continue inside the OpenClaw cluster instead of starting over.

Safety notes

  • Do not blur server-only and client-only code paths when moving logic across App Router boundaries.
  • Verify data fetching and caching behavior after structural edits because small routing changes can alter runtime behavior materially.
  • Keep framework conventions authoritative instead of inventing ad-hoc patterns that bypass special files or route segment rules.

Source context

This profile uses the current Next.js App Router documentation for installation and file conventions, then layers Claude Code workflow guidance on top. Using Next.js first-party docs matters because starter defaults, routing conventions, and special files change over time.

Next.js App Router installationNext.js layouts and pagesBest Practices for Claude Code

Related profiles

TypeScript Project Skill

Use this profile when the repo is TypeScript-first and you want the agent to respect tsconfig boundaries, type inference, strictness, and the build scripts that already define correctness.

CLAUDE.md Setup

Use this profile when Claude Code keeps missing project conventions, architecture context, or operating rules and you need to structure CLAUDE.md files deliberately instead of relying on repeated prompts.

Prompt Engineering Skill

Use this profile when the quality bottleneck is not installation but instruction design: project rules, system framing, few-shot examples, and stable prompt patterns that Claude Code can reuse.