SuperAPI AI 工具集

nextjs-expert

前端与建站

查看项目

更新于 10-16 00:20

技能介绍

用途:为使用 Next.js 14+ 构建高性能、SEO 友好 Web 应用提供架构与实现指导,覆盖 App Router、SSR/SSG、API 路由、中间件与部署模式。

主要能力:默认使用 Server Components,仅在需要浏览器 API、事件处理或 React 状态时添加 "use client";按 app/ 目录组织路由,用 layout.tsx 共享 UI、page.tsx 承载内容;在服务端用异步 Server Components 与 fetch 缓存语义取数;用 generateStaticParams 构建时预渲染动态路由,长尾页面回退到按需 ISR;用动态导入控制客户端包体积。

常用技术:app/[segment]/page.tsx 结构路由,括号路由组不影响 URL;每个路由段用 loading.tsx 与 error.tsx 提供加载与错误边界;Route Handlers(app/api/.../route.ts)导出 GET、POST、PUT、DELETE;根目录 middleware.ts 配合 matcher 做鉴权、重定向或注入请求头;next/image 与 next/font 优化图片字体;通过 fetch 的 revalidate 或 revalidatePath/revalidateTag 实现 ISR 与按需失效;next.config.js 配置 redirects、rewrites、headers 及实验选项。

常见模式:并行路由用 @named 插槽同屏渲染多页面组件;拦截路由用 (..) 约定在导航时显示模态框并保留直接 URL;Server Actions 用 "use server" 处理表单与变更;Suspense 包裹慢取数组件实现流式 HTML。

限制与注意:不要在 Server Components 中用 useEffect 取数;不要在 layout 层随意加 "use client",否则整棵子树退出服务端渲染;不要混淆 Pages Router 与 App Router 约定;需正确设置缓存头与再验证时间,避免陈旧数据与多余重渲染。具体版本要求、部署平台与收费信息暂未提供。