Next.js App Router Patterns
Master Next.js 14+ App Router — Server Components, streaming, parallel routes, data fetching, Server Actions
- What
- Master Next.js 14+ App Router — Server Components, streaming, parallel routes, data fetching, Server Actions
- Cost
- Free
- Needs
- a Next.js 14+ project (see the repo README for setup)
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — the App Router architecture guide: rendering-mode table (Server Components for data fetching/secrets, Client Components for interactivity, Static, Dynamic, Streaming), file conventions (`layout.tsx`, `page.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx`, `route.ts`, `template.tsx`, `default.tsx`, `opengraph-image.tsx`), quick-start layout/page snippets, and worked patterns with a Do/Don't list (start with Server Components, colocate data fetching, Suspense boundaries for streaming, parallel routes for independent loading states, Server Actions for mutations; never pass non-serializable data across the server→client boundary, never use hooks in Server Components, never fetch in Client Components). Disjoint from the two published wshobson fiches: `wshobson-nodejs-backend-patterns` (lot 33, Node/Express API backend) and `wshobson-brand-landingpage` (lot 33, Stitch SDK landing pages) — this one is full-stack frontend architecture. By @wshobson, listed here with credit to its creator. Honest caveats: requires a Next.js 14+ project (free and open source); deep details live in the repo's references/details.md. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Prerequisites: a Next.js 14+ project (see the repo README for setup) Install "Next.js App Router Patterns" for me. Give my agent the Next.js App Router architecture guide: rendering modes (Server/Client/Static/Dynamic/Streaming), file conventions (layout, page, loading, error, not-found, route, template, default), quick-start snippets, data fetching and caching patterns, Server Actions, and the Do/Don't list — with deeper patterns from references/details.md when the summary isn't enough Repository: https://github.com/wshobson/agents/blob/main/plugins/frontend-mobile-development/skills/nextjs-app-router-patterns/SKILL.md 1. Fetch the SKILL.md file for the wshobson-agents-nextjs-app-router-patterns skill from the repository into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md into the agent's skills directory, in a folder named "wshobson-agents-nextjs-app-router-patterns". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. have a Next.js 14+ project, read references/details.md for depth). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. Never ask me to paste secrets in chat — credentials go through the secure vault or environment variables. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.