Development Skill
Angular Migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and…
$15
Next Best Practices
Next.js best practices: file conventions, RSC boundaries, data patterns, async APIs…
A working reference of Next.js best practices covering file conventions, React Server Component boundaries, async APIs, data patterns, metadata, error handling, and image and font optimization. It enforces the disciplines that actually matter in production: keeping the use-client boundary at the leaf, awaiting async params, generating metadata from a single source, and never shipping a route without its loading, error, and not-found states.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Development
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
Misplace a special file in Next.js and it fails silently, not loudly. That is why this review starts at file conventions and works down to an explicit cache strategy on every fetch.
- Audits file conventions first: special files in the right places, route segments and groups correct, and the v16 rename respected (middleware becomes proxy), because a misplaced file fails silently rather than loudly.
- Enforces server/client boundary discipline with the wrapper pattern: 'use client' spreads upward through imports, so interactive pieces are isolated at the leaves while pages, grids and lists stay server-rendered and ship no JS.
- Migrates async APIs for Next.js 15+: params, searchParams, cookies() and headers() are all Promises now, so every page, layout and generateMetadata gets the await, and waterfalls get collapsed into Promise.all.
- Requires the failure-mode trio on every route: loading.tsx skeleton, error.tsx with a reset/retry, not-found.tsx with a way forward. A network failure showing a blank page is treated as a release blocker.
- Keeps metadata in one source of truth: generateMetadata produces title, description, OG, canonical and alternates; manual meta tags in page bodies are banned, sitemap.ts and robots.ts live in code.
- Closes on the verification checklist: Zod validation inside Server Actions, next/image with sizes and priority on the LCP element, NEXT_PUBLIC_ prefix rules, and an explicit cache strategy (force-cache, no-store or revalidate) on every fetch.
One power source. 6 lines out.
next-best-practices · core
core active · 6 lines
- ✓ keeping the use-client b…
Keeping the use-client boundary small to shrink the JS bundle
- ✓ migrating to async params
Migrating to async params and searchParams on Next.js 15 and up
- ✓ generating seo metadata
Generating SEO metadata, sitemap, and robots from one source
- ✓ avoiding data-fetch wate…
Avoiding data-fetch waterfalls with parallel Promise.all
- ✓ adding error, loading, and
Adding error, loading, and not-found states to every route
- ✓ optimizing images and fo…
Optimizing images and fonts for Core Web Vitals
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Cut client JavaScript by isolating interactivity at the leaf
license: perpetual -
Catch breaking changes at build time instead of in production
license: perpetual -
Rank better with single-source dynamic metadata and OG images
license: perpetual -
Eliminate blank pages with mandatory failure-state coverage
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Server and client boundary wrapper pattern with right and wrong examples
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
For Next.js developers who want App Router code that is fast, SEO-correct, and production-safe without learning every pitfall the hard way.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
We're still on the Pages Router. Is this reference relevant to us?
Only partially. The image, font, and metadata fundamentals carry over, but the core disciplines, RSC boundary placement, async params migration, and the route-level loading/error/not-found convention, all assume the App Router. It's most valuable while or after you switch.
-
What's the concrete discipline that actually shrinks my JS bundle?
Keeping the use-client boundary at the leaf: interactive bits get isolated into the smallest possible client component while everything above stays on the server. The reference shows the wrapper pattern with right and wrong examples, because the common mistake is marking a whole page client for one button.
-
Does it scan my existing codebase and flag violations automatically?
No. It's a working reference plus an eight-point validation checklist you apply during review, not a lint rule or scanner. You bring the discipline of running the checklist; it brings the list of what actually matters in production.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.