Development Skill
Angular Migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and…
$15
Next.js App Router Patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced…
A complete pattern library for building modern full-stack apps on the Next.js 14+ App Router with React Server Components. It teaches when to render on the server versus the client, how to stream slow data with Suspense, and how to handle mutations with Server Actions: backed by eight copy-ready patterns covering data fetching, parallel routes, intercepting modals, route handlers, and SEO metadata.
$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.
The difference between a 300KB bundle and a 50KB one is where the client boundary sits. This App Router loop starts on the server and pushes interactivity out to the leaves.
- Starts everything as a Server Component with colocated fetching: async pages call the database or API directly with the right cache hint (revalidate for ISR, tags for targeted invalidation), and secrets never leave the server.
- Isolates client islands at the leaves: only the genuinely interactive pieces (an add-to-cart button with useTransition, a form) get 'use client', which is what turns a 300KB bundle into a 50KB one.
- Streams slow data instead of blocking on it: loading.tsx covers the route level, nested Suspense boundaries wrap reviews, recommendations and other slow widgets so the header renders instantly and the rest flows in.
- Routes mutations through Server Actions: cookie/session check at the top, the database write, then revalidateTag or revalidatePath so exactly the affected cache entries refresh, not the whole site.
- Reaches for the advanced route shapes when the UI calls for them: parallel @slots for dashboard panels with independent loading states, intercepting (.) routes for the modal-over-page photo pattern, generateStaticParams to push dynamic routes into SSG.
- Finishes the SEO layer per page: generateMetadata builds title, description, OG and Twitter cards from live data, and opengraph-image.tsx renders a branded dynamic OG image via ImageResponse on the Edge runtime.
One power source. 6 lines out.
nextjs-app-router-patterns · core
core active · 6 lines
- ✓ building server component
Building Server Component data fetching with ISR and cache tags
- ✓ streaming slow widgets w…
Streaming slow widgets with Suspense and loading.tsx
- ✓ mutations and form handl…
Mutations and form handling with Server Actions
- ✓ parallel and intercepting
Parallel and intercepting routes (dashboard slots, photo modals)
- ✓ generatemetadata + gener…
generateMetadata + generateStaticParams for SEO pages
- ✓ migrating from pages rou…
Migrating from Pages Router to App Router
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
-
Smaller client bundles by keeping logic on the server
license: perpetual -
Faster perceived load via progressive streaming, not blank TTI waits
license: perpetual -
Precise cache invalidation that rebuilds only affected pages
license: perpetual -
Layered auth defense so a bypassed layer is caught by the next
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Rendering-mode decision table (Server/Client/Static/Dynamic/Streaming)
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 React developers building or migrating production apps on the Next.js App Router who want battle-tested architecture instead of guesswork.
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 migrating off the Pages Router. Does this cover that path or only new builds?
Migration is one of the named use cases. The rendering-mode decision table and the full file-convention map are built to translate Pages Router habits, getServerSideProps thinking, _app structure, into their App Router equivalents, alongside the eight patterns you'll build with afterward.
-
I've read the App Router docs end to end and still hesitate on server-versus-client calls, what do the eight patterns give me that the docs didn't?
The docs describe each API in isolation; this packs eight copy-ready production patterns that combine them, plus the decision tables and server-versus-client do's and don'ts that the docs leave you to infer. It encodes the judgment calls, not just the API surface.
-
Does it cover the Next.js 16 cache directives like use cache and cacheLife?
No. This library targets the 14+ App Router foundation: Server Components, ISR with cache tags, Suspense streaming, Server Actions, and parallel routes. The Next.js 16 Cache Components model is a separate, deeper topic with its own dedicated skill.
-
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.