SuperAPI AI 工具集

nextjs

前端与建站

查看项目

更新于 10-16 00:29

技能介绍

用途:该技能面向使用 Next.js 构建全栈 React 应用,涵盖 App Router、Server Components、Server Actions 与优化部署模式。

主要能力:提供文件约定(page.tsx、layout.tsx、loading.tsx、error.tsx、not-found.tsx、route.ts)、路由模式(动态段、catch-all、路由组、并行与拦截路由)、布局嵌套、Server/Client 组件划分、数据获取(含并行请求与 Suspense 流式渲染)、Server Actions 表单与校验、缓存与再验证(revalidatePath/revalidateTag、dynamic、revalidate、generateStaticParams)、Route Handlers、middleware、Metadata/SEO、next/image 图片优化、环境变量、认证检查、错误与加载状态,以及最佳实践和常见错误对照。

使用方式:创建项目可运行 npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir,然后 cd my-app && npm run dev。默认组件为 Server Component,需要交互时在文件顶部加 'use client'。数据变更推荐用 Server Action('use server')而非 API 路由,并在变更后调用 revalidatePath 或 revalidateTag。Next.js 15 中 params 与 searchParams 为 Promise,需 await。

适用场景:需要服务端渲染、静态生成、流式加载、表单变更与边缘部署的 React 全栈项目。

限制:资料未提供具体版本兼容范围、性能数据、收费与价格信息,也未提供官方文档链接;部分高级主题仅以参考文件形式列出,未展开细节。