Claude Code · Next.js App Router

Stop Claude Code from editing your .env, force-pushing, and breaking the server/client split.

A small, tested set of hooks, a CLAUDE.md template and three subagents for Next.js App Router projects. Plain Node scripts, no dependencies. Install in about ten minutes.

One-time payment. Checkout and instant download through Gumroad.

Free sample or full pack? · Compatibility and buying questions

The failures it catches

Each row is a case the pack's own self-test runs (52 tests, all passing on Node 24 and 26).

Without itWith it
Claude "adds the missing variable" to .env.local and overwrites a real secret.protect-files blocks the edit and tells Claude to update .env.example and ask you.
A version conflict gets "fixed" by hand-editing package-lock.json.Blocked; Claude is pointed at package.json and the install command.
A bug is patched inside .next/ or node_modules/ and comes back on the next build.Blocked; edit the source instead.
A page gets useState with no "use client", and you find out at build time.check-client-boundary flags it right after the edit, so Claude fixes it in the same turn.
A client component imports next/headers or exports metadata, which Next.js rejects.Flagged with the specific fix.
"Let's start clean": git reset --hard, git clean -fdx, rm -rf src.guard-bash blocks it. Removing .next or node_modules is still allowed.
git push --force over a shared branch.Blocked. --force-with-lease still works.
cat .env.local puts secret values into the transcript.Blocked, along with printenv.
Claude says "done" while tsc is failing.typecheck-on-stop hands the errors back once before the turn ends.

What's in the zip

Free sample or the $15 pack?

Start free if you only want to protect files from accidental edits. Choose the pack if you want the additional Next.js checks and a ready-to-adapt workflow in one download.

What you get, without a subscription
IncludedFree sampleFull pack · $15
File-edit protectionprotect-files + helper; example settingsThe same hook, plus settings for all five hooks
Additional hooksNot includedBash guard, client-boundary check, typecheck-on-stop and optional local Prettier formatting
Project workflowSeparate free CLAUDE.md starter guideFull CLAUDE.md template, 3 subagents and /preflight
Setup and checksManual merge; 7 offline sample checksNon-overwriting installer; 52 self-tests; setup and troubleshooting guides
Updates or supportNot includedNot included; one as-is version

Check the fit before buying

Built for: developers using Claude Code with one Next.js App Router project who are comfortable inspecting Node scripts and merging project settings.

Skip it if: you need a Pages Router setup, a Windows-tested pack, a multi-app monorepo configuration, managed setup or ongoing support. This is not an app boilerplate or a security sandbox.

Before you buy

Will this work with my versions and operating system?

The pack targets Claude Code 2.1.x (tested on 2.1.283), Node 20+ (self-tested on 24 and 26), and Next.js App Router projects. macOS is tested; Linux is expected to work. Windows and Pages Router are not covered by the test claim. Next.js 14–16 compatibility is expected, not a tested version matrix: the hooks inspect text rather than importing Next.js.

Will installation overwrite my CLAUDE.md or hooks?

No. The full pack's installer keeps existing files and writes the pack's alternatives alongside them with a .pack-new suffix. You review and merge the parts you want, fill in your project's commands, then restart Claude Code and run /hooks. The free sample uses a manual merge instead. Neither option is managed installation.

Is this a security tool or a replacement for CI?

No. These are guardrails for common mistakes, not a security boundary. The free hook handles edit-style tools, not shell commands or reads. The paid Bash guard uses patterns and can be bypassed; boundary checks also have limits. Keep permission prompts, code review, tests and CI.

Can I use the paid pack on commercial or client projects?

Yes. The included license allows use, copying and modification in any number of your own projects, including commercial projects and projects you build for clients. You may not resell or redistribute the pack itself as a standalone product or inside another template or pack.

What happens after I pay? Are there recurring fees?

The pack is a one-time $15 purchase; Gumroad handles checkout, tax and the download link. You receive static files to inspect and install yourself. No subscription, hosted service, custom setup, updates or support is included. You supply your own Claude Code access and project tooling; those are not part of this purchase.

Still checking the fit? Run the free sample's seven offline checks before deciding.

Start with your project instructions

New to project rules? Use our free CLAUDE.md template for Next.js, with a setup checklist and examples of server/client boundary mistakes.

Hook not firing? Follow the safe hook debugging checklist before changing your configuration.

Try the free hook before you buy

Download, inspect and run seven offline checks. No email, account or purchase. Nothing reads or edits your real secrets.

Download the free sample ZIP

Node 20+ · macOS/Linux · 6 small files, no dependencies. Includes the two hook files shown below, example settings, README, license and verifier.

1. Verify in a new empty folder

Unzip, inspect the source, and run this from the extracted folder:

node verify.mjs

Expected: seven PASS lines and 7 checks passed. Fictional paths sent on stdin prove that secret/generated-file edits are blocked while ordinary source edits are allowed. No real .env file is opened or changed.

2. Enable it without replacing your settings

Copy the two hook files into your project's .claude/hooks/ only after comparing any existing versions. Merge the entry from settings.example.json into .claude/settings.json; do not replace existing hooks or settings. Restart Claude Code and run /hooks to confirm it loaded.

The offline checks verify hook logic, not runtime wiring. If you test the live hook, use a throwaway project with dummy values, never real secrets. To uninstall, remove only this command's settings entry and restart Claude Code.

This sample guards edit-style tools only, not shell commands or reads. It is not a security boundary. Keep permission prompts, review and CI. The full pack adds the other checks listed above; no support or updates are included.

Prefer to inspect or copy the source?

Two pieces from the pack, unchanged. Use them even if you never buy the rest.

1. .claude/hooks/protect-files.mjs

Needs the small lib.mjs helper below next to it.

#!/usr/bin/env node
// PreToolUse (Edit|Write|MultiEdit|NotebookEdit)
// Blocks edits to secrets, lockfiles and generated output.
import path from "node:path";
import { readHookInput, block, allow, editedPaths, toPosix } from "./lib.mjs";

const ENV_OK = new Set([".env.example", ".env.sample", ".env.template"]);
const LOCKFILES = new Set(["package-lock.json", "pnpm-lock.yaml", "yarn.lock", "bun.lockb", "bun.lock"]);
const GENERATED_DIRS = [".next", "node_modules", "out", ".vercel", ".turbo"];

function reasonToBlock(filePath) {
  const p = toPosix(filePath);
  const base = path.posix.basename(p);
  const segments = p.split("/");

  if (/^\.env(\..+)?$/.test(base) && !ENV_OK.has(base)) {
    return `${base} holds secrets. Do not edit it. If a new variable is needed, add it to .env.example with a placeholder value and tell the user which real value to set.`;
  }
  if (LOCKFILES.has(base)) {
    return `${base} is generated by the package manager. Change package.json and run the install command instead of editing the lockfile by hand.`;
  }
  const dir = GENERATED_DIRS.find((d) => segments.slice(0, -1).includes(d));
  if (dir) {
    return `${p} is inside ${dir}/, which is generated output. Edit the source file instead.`;
  }
  if (base === "next-env.d.ts") {
    return "next-env.d.ts is regenerated by Next.js. Put custom type declarations in a separate .d.ts file.";
  }
  return null;
}

const input = readHookInput();
for (const p of editedPaths(input)) {
  const reason = reasonToBlock(p);
  if (reason) block(`Blocked by protect-files hook: ${reason}`);
}
allow();

.claude/hooks/lib.mjs

// Shared helpers for the pack's hooks. Built-in Node modules only.
import { readFileSync } from "node:fs";

// Claude Code sends the hook payload as JSON on stdin.
export function readHookInput() {
  let raw = "";
  try {
    raw = readFileSync(0, "utf8");
  } catch {
    return {};
  }
  try {
    return JSON.parse(raw || "{}");
  } catch {
    return {};
  }
}

// Exit code 2 tells Claude Code to block the action (PreToolUse) or to show
// the message to Claude as feedback (PostToolUse / Stop). stderr is the message.
export function block(message) {
  process.stderr.write(message.trim() + "\n");
  process.exit(2);
}

export function allow() {
  process.exit(0);
}

// Every file path an edit-style tool is about to touch.
export function editedPaths(input) {
  const ti = input.tool_input || {};
  const paths = [];
  if (typeof ti.file_path === "string") paths.push(ti.file_path);
  if (typeof ti.notebook_path === "string") paths.push(ti.notebook_path);
  return paths;
}

export function toPosix(p) {
  return String(p).replace(/\\/g, "/");
}

Wire it up in .claude/settings.json

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Edit|Write|MultiEdit|NotebookEdit",
        "hooks": [
          { "type": "command", "command": "node \"$CLAUDE_PROJECT_DIR/.claude/hooks/protect-files.mjs\"", "timeout": 10 }
        ]
      }
    ]
  }
}

Merge this entry with existing settings rather than replacing them. Use the offline verifier above before any live wiring check.

2. From the CLAUDE.md template

## Server and client components

- Files in `app/` are **Server Components** by default. Keep them that way.
- Add `"use client"` only to the smallest component that needs state, effects,
  event handlers or browser APIs. It must be the first line, above imports.
- Never import `server-only` modules, `next/headers`, database clients or
  secret-reading code into a client component. Fetch on the server and pass
  plain serializable props down.
- Client components cannot be `async` and cannot export `metadata`.

Requirements and limits

$15

Next.js Claude Code Workflow Pack: CLAUDE.md template, 5 hooks, 3 subagents, /preflight, installer, 52 self-tests, guides.

Buy on Gumroad

Gumroad handles payment, tax and the download link, which arrives right after checkout.