SuperAPI AI 工具集

nextjs-app-router

前端与建站

查看项目

更新于 10-15 23:41

技能介绍

用途:帮助开发者掌握 Next.js App Router 的基础约定,适用于新建 Next.js 15 项目、理解基于文件的路由、创建跨导航持久化的布局、实现加载状态与错误边界、用路由组组织路由。

主要能力:约定文件包括 page.tsx(路由 UI)、layout.tsx(跨导航共享 UI)、loading.tsx(Suspense 加载 UI)、error.tsx(错误边界,须为 'use client')、not-found.tsx(404)、template.tsx(导航时重新渲染)。路由模式支持动态路由 [slug]、全捕获 [...slug]、可选全捕获 [[...slug]]、路由组 (name)、并行路由 @slot。还涵盖根布局与嵌套布局、并行路由布局、异步服务端组件页面、generateMetadata 与 generateStaticParams、静态与动态元数据、metadata 模板、Suspense 流式加载、全局错误边界、notFound() 触发、服务端与客户端组件组合、Link 组件与 useRouter/usePathname/useSearchParams 导航。

使用方式:按约定在 app 目录放置对应文件即可;动态页面通过 params(Promise)读取参数,用 generateMetadata 生成元数据,用 generateStaticParams 预生成静态路径。

适用场景:App Router 项目搭建与路由组织、布局与加载/错误处理、元数据配置。

限制:资料未提供安装命令、版本兼容细节、收费与价格信息;相关数据获取、进阶路由、缓存策略需参考其他技能。