agentsclimarketplace

Nextjs app router production

Skill codezelat/codezela-web-skills/skills/nextjs-app-router-production

Production-grade web development skills for AI coding agents.

Install
npx -y skills add codezelat/codezela-web-skills --skill nextjs-app-router-production

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when implementing or reviewing Next.js App Router routes, layouts, metadata, Server Components, Server Actions, route handlers, caching, images, errors, loading states, scripts, or framework upgrades.

SKILL.md

2.3 KB, as published. Nobody here has run it

Next.js App Router Production

Use this for production Next.js work where version drift can cause subtle bugs.

Non-Negotiables

  • Read the installed Next version and local docs under node_modules/next/dist/docs/ when available; otherwise use current official docs.
  • Keep App Router patterns. Do not introduce Pages Router files or APIs into an App Router project.
  • Use Server Components by default. Add "use client" only for hooks, browser APIs, event handlers, or stateful interactivity.
  • Use Server Actions for form mutations when that is the repo pattern; use route handlers for machine/API integrations.
  • Keep metadata, canonical URLs, robots, sitemap, structured data, and social previews consistent across public routes.
  • Treat loading, error, not-found, and route-group layouts as part of the user experience, not optional extras.

Workflow

  1. Inspect existing app structure, layouts, route groups, and helper modules.
  2. Identify dynamic/static/ISR requirements before changing data fetching or cache behavior.
  3. Read docs for touched APIs: metadata, route handlers, images, caching, forms/actions, redirects, middleware/proxy, errors.
  4. Implement with repo-native conventions, aliases, validation, and typed helpers.
  5. Add scoped skeletons for async sections that should not block the whole page.
  6. Verify initial HTML when metadata, SEO, crawler, or social behavior matters.

Common Decisions

  • Above-the-fold image: reserve dimensions and use eager/high-priority only for the actual LCP candidate.
  • Public DB section: isolate it with Suspense/loading UI if the rest of the page should render quickly.
  • Redirect/auth guard: centralize in layout/helper, not ad hoc page checks.
  • Dynamic route metadata: never emit broken absolute URLs; provide fallback social images when content images are absent.

Checks

  • npm run lint or repo equivalent.
  • Typecheck/build script if present.
  • git diff --check.
  • Production build for route/layout/metadata/config changes.
  • Browser or HTML smoke for changed routes.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.