一键在 Manus 中运行任何 Skill

nextjs-app-router

星标94

分支11

更新时间2026年7月5日 07:18

Use when adding pages, layouts, route handlers, or data fetching in this Next.js App Router project, to follow server-first conventions correctly.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

johnku2011

johnku2011/boilerplates-with-ai-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Next.js App Router

Overview

Build features the App Router way: server components by default, client components only when needed, and colocated routes under app/.

Process

Add a route by creating app/<segment>/page.tsx; add layout.tsx for shared UI and loading.tsx/error.tsx for states.
Keep components as React Server Components unless they need state, effects, or browser APIs. Add "use client" only to those leaf components.
Fetch data in server components with async/await; avoid client-side fetching for initial render when the server can do it.
Put API endpoints in app/api/<name>/route.ts using the Web Request/ Response APIs.
Verify with npm run build (catches server/client boundary and type errors).

Data Fetching

Prefer fetch in Server Components with Next.js caching options (cache, next.revalidate) documented in code comments when non-default.
Use loading.tsx for slow segments; avoid blocking the entire page.
Mutations: Server Actions or Route Handlers — validate input server-side.

Route Handlers

Export named HTTP functions (GET, POST, …) from route.ts.
Return Response.json() with correct status codes.
Never import client-only modules into route.ts.

Guidelines

Never import server-only modules (fs, secrets, DB clients) into client components.
Read secrets from environment variables on the server only; never expose them via NEXT_PUBLIC_* unless they are truly public.
Keep page.tsx thin; move logic into small, typed functions under src/ or colocated lib/.
Prefer next/link and next/image over raw anchors/images.
Colocate tests for pure helpers; run npm run build before claiming done.

Deployment

See the shared deploy-vercel skill when shipping to Vercel.

Anti-patterns

Marking entire pages "use client" to avoid thinking about server boundaries.
Fetching secrets or private APIs from the browser.
Giant page.tsx files mixing UI, data access, and validation.

同仓库更多 Skills

同仓库

bwai-advisor

johnku2011/boilerplates-with-ai-skills

Use before scaffolding a bwai project — runs the full startup-goal workflow then recommends the right boilerplate and outputs the exact bwai new command to run.

2026-07-1894

cto

johnku2011/boilerplates-with-ai-skills

Use when acting as a startup CTO for architecture, technical risk, platform direction, codebase boundaries, or engineering strategy.

2026-07-1294

founding-engineer

johnku2011/boilerplates-with-ai-skills

Use when acting as a startup founding engineer for implementation, tests, debugging, review, and verification.

2026-07-1294

product-manager

johnku2011/boilerplates-with-ai-skills

Use when acting as a startup product manager for discovery, PRDs, issue slicing, roadmap tradeoffs, or customer-value sequencing.

2026-07-1294

qa-lead

johnku2011/boilerplates-with-ai-skills

Use when acting as a startup QA lead for acceptance checks, release risk, regression focus, and verification evidence.

2026-07-1294

startup-goal

johnku2011/boilerplates-with-ai-skills

Use when coordinating a startup goal across CEO, CTO, product manager, engineering manager, founding engineer, and QA lead role subagents.

2026-07-1294

Next.js App Router

Overview

Build features the App Router way: server components by default, client components only when needed, and colocated routes under app/.

Process

Add a route by creating app/<segment>/page.tsx; add layout.tsx for shared UI and loading.tsx/error.tsx for states.

Keep components as React Server Components unless they need state, effects, or browser APIs. Add "use client" only to those leaf components.

Fetch data in server components with async/await; avoid client-side fetching for initial render when the server can do it.

Put API endpoints in app/api/<name>/route.ts using the Web Request/ Response APIs.

Verify with npm run build (catches server/client boundary and type errors).

Data Fetching

Prefer fetch in Server Components with Next.js caching options (cache, next.revalidate) documented in code comments when non-default.

Use loading.tsx for slow segments; avoid blocking the entire page.

Mutations: Server Actions or Route Handlers — validate input server-side.

Route Handlers

Export named HTTP functions (GET, POST, …) from route.ts.

Return Response.json() with correct status codes.

Never import client-only modules into route.ts.

Guidelines

Never import server-only modules (fs, secrets, DB clients) into client components.

Read secrets from environment variables on the server only; never expose them via NEXT_PUBLIC_* unless they are truly public.

Keep page.tsx thin; move logic into small, typed functions under src/ or colocated lib/.

Prefer next/link and next/image over raw anchors/images.

Colocate tests for pure helpers; run npm run build before claiming done.

Deployment

See the shared deploy-vercel skill when shipping to Vercel.

Anti-patterns

Marking entire pages "use client" to avoid thinking about server boundaries.

Fetching secrets or private APIs from the browser.

Giant page.tsx files mixing UI, data access, and validation.

name	nextjs-app-router
description	Use when adding pages, layouts, route handlers, or data fetching in this Next.js App Router project, to follow server-first conventions correctly.