安装及项目结构

项目结构

• app 应用路由
  • layout.tsx 布局
  • page.tsx 页面
  • loading.tsx 加载界面
  • not-found.tsx “未找到”页面
  • error.tsx 错误页面
  • ⚠️ global-error.tsx 全局错误页面
  • ⚠️ route.ts API 终端
  • ⚠️ template.tsx
  • default.tsx 回退默认页面
  • folder 子路由片段
  • [folder] 动态路由片段
  • [...folder] 捕获剩余子路由
  • [[...folder]] 捕获剩余子路由，可以为空
  • (folder) 路由分组
  • _folder 私有文件夹，不参与路由
  • @folder 页面插槽
  • (.)folder 同级路由下拦截路由
  • (..)folder 上级路由下拦截路由
  • (..)(..)folder 上上级路由下拦截路由
  • (...)folder 根路由下拦截路由
  • favicon icon apple-icon 图标
  • sitemap robots SEO
• pages 页面路由
  • index.tsx 页面
  • folder/index.tsx file.tsx 子路由页面
  • 404.tsx 500.tsx 错误页面
  • _app.tsx 自定义 App
  • _document.tsx 自定义文档
  • _error.tsx 自定义错误页面
  • [folder]/index.tsx [file].tsx 动态路由片段
  • [...folder]/index.tsx [...file].tsx 捕获剩余子路由
  • [[...folder]]/index.tsx [[...file]].tsx 捕获剩余子路由，可以为空
• public 静态资源
• src 源代码
• next.config.js Next.js 配置文件
• instrumentation.ts
• middleware.ts Next.js 请求中间件
• .env 环境变量
• .env.local 本地环境变量
• .env.producation 生产环境环境变量
• .env.development 开发环境环境变量
• next-env.d.ts 专为 Next.js 的 TS 声明文件