用途:该技能用于指导实现 Next.js——一个用于生产环境的 React 全栈框架,内置服务端渲染、静态生成与现代 Web 优化能力。适用场景包括:构建新 Next.js 应用(v15+)、实现 App Router 架构、使用 Server 组件与 Client 组件、配置路由/布局/导航、数据获取模式、图像与字体及性能优化、元数据与 SEO、API 路由与 Route Handler、从 Pages Router 迁移到 App Router、部署 Next.js 应用。
主要能力:App Router(app/ 目录的基于文件路由,支持布局、loading、error 边界、流式与 Suspense、嵌套路由)与旧版 Pages Router(pages/ 目录,getStaticProps 等)。架构原则:默认 Server 组件(除非标记 'use client')、基于文件路由、嵌套布局、渐进增强、自动优化图像/字体/脚本。路由约定包含 page.tsx、layout.tsx、loading.tsx、error.tsx、not-found.tsx、route.ts、template.tsx、default.tsx,并支持动态路由 [slug]、catch-all [...slug]、可选 catch-all [[...slug]]、路由组 (folder)、并行路由 @slot、拦截路由 (..)。数据获取支持 fetch 缓存策略(force-cache、no-store、next.revalidate、tags 与 revalidateTag)、并行与串行获取。Route Handler 支持 GET/POST 等与动态段。导航提供 Link、useRouter、redirect。元数据支持静态 metadata、generateMetadata、metadata 文件、sitemap、robots。图像使用 next/image,字体使用 next/font(Google 与本地)。另有 loading 与 Suspense 流式、error 与 global-error、notFound、middleware、环境变量(NEXT_PUBLIC_ 前缀)与 next.config.js 配置。
使用方式:创建项目可用 npx create-next-app@latest my-app(或 yarn create next-app my-app、pnpm create next-app my-app、bun create next-app my-app),安装提示含 TypeScript、ESLint、Tailwind CSS、src/ 目录、App Router、导入别名。手动安装:npm install next@latest react@latest react-dom@latest,脚本为 dev/build/start/lint 对应 next dev、next build、next start、next lint。参考文档见 https://nextjs.org/docs/llms.txt。
限制:资料未提供该技能自身的收费、价格、平台支持范围或效果承诺等信息;具体命令与配置请以官方文档为准。