用途:该技能指导使用 Next.js(React 生产级框架)构建全栈 Web 应用,涵盖服务端渲染、静态生成和内置优化特性。资料建议在构建新应用(v15+)、实现 App Router 架构、处理服务端与客户端组件、设置路由/布局/导航、实现数据获取、优化图片字体与性能、配置元数据与 SEO、设置 API 路由、从 Pages Router 迁移以及部署时使用。
主要能力:App Router 与 Pages Router 两种架构;文件系统路由,含动态路由、全捕获与可选全捕获、路由组、并行路由、拦截路由;布局(根布局必需)支持嵌套并保留状态;服务端组件默认,客户端组件需 'use client';数据获取支持缓存(force-cache、no-store)、revalidate、标签重验证及并行/串行获取;Route Handlers 提供 GET/POST 等及请求辅助与多种响应类型;导航提供 Link 组件、useRouter、redirect;元数据支持静态、动态与元数据文件;next/image 图片优化与远程图片配置;next/font 字体优化;loading 与 Suspense 流式加载;error/global-error/not-found 错误处理;middleware 中间件;环境变量(NEXT_PUBLIC_ 前缀);next.config.js 配置重定向、重写、headers 等。
使用方式:创建项目可执行 npx create-next-app@latest my-app(或 yarn/pnpm/bun create-next-app my-app),交互式选择 TypeScript、ESLint、Tailwind、src、App Router、导入别名。手动安装 npm install next@latest react@latest react-dom@latest,scripts 为 dev、build、start、lint。参考文档 https://nextjs.org/docs/llms.txt。
适用场景:需 SSR/静态生成的生产级 React 应用、SEO 友好的站点、全栈 API 与前端一体的项目。
限制:服务端组件不能使用 hooks、浏览器 API 或事件监听;客户端交互需标记 'use client';本地与远程图片配置、环境变量作用域有相应约束。资料未提供收费、价格或具体版本兼容等进一步信息。