SuperAPI AI 工具集

nextjs-app-router-fundamentals

前端与建站

查看项目

更新于 10-16 07:22

技能介绍

用途:为 Next.js 13+ App Router 提供系统化指导,适用于从 Pages Router(pages/)迁移到 App Router(app/)、从零创建新应用、处理布局与嵌套路由、实现元数据与 SEO、以及构建路由组、并行路由等场景。

主要能力:对比 Pages Router 与 App Router 结构;说明 app 目录特殊文件约定(layout、page、loading、error、not-found、template、route)与可同置文件规则;给出迁移步骤(创建根布局、迁移页面、更新导航、清理 pages 目录);介绍静态与动态元数据;讲解嵌套布局及布局状态保持行为;覆盖动态段、全捕获与可选全捕获、路由组;说明服务器组件与客户端组件默认规则及 'use client' 使用条件;展示服务器组件数据获取、并行请求与 revalidate;详述 generateStaticParams 用法、dynamicParams 配置及从 getStaticPaths 迁移;列出常见迁移陷阱(缺 html/body、误用 next/head、未删除 pages、缺 page.tsx、误用 a 标签)。

必要用法:强制规则为 TypeScript 禁用 any,否则触发 @typescript-eslint/no-explicit-any 构建失败;根布局必须包含 html 与 body;路由在 App Router 中必须存在 page.tsx 才可访问;导航应使用 next/link 的 Link 组件。文档注明当被要求实现 generateStaticParams 时应实际写入文件而非仅输出代码。

常用命令:npx create-next-app@latest my-app;npm run dev;npm run build;npm start。

限制:文中未提供收费、价格、平台兼容性、性能效果等事实信息,暂未提供。