域名 AXUM.RS 将于 2025 年 10 月到期。我们无意再对其进行续费,如果你有意接续这个域名,请与我们取得联系。
  • AXUM.RS 现仅需人民币 3000 元(大写:叁仟元整。接受适度议价
  • 按照行业规则,AXUM.RS 到期后,大概率会进入长时间的赎回期,该期间内,如果你想拥有该域名,将要付出高额的费用
  • 我们已启用 AXUM.EU.ORG 域名,并将持续运营
  • 仅接受微信或支付宝交易
如果你对 AXUM.RS 有兴趣,请和我们进行联系:

约定即配置

本章我们来看一下 create-next-app 的选项、目录结构以及 Next.js 的「约定即配置」。

什么是 App 路由

此前的 Next.js 使用的是 Pages 路由,即所有路由都放在 pages/ 目录。新版的 Next.js 推出了 App路由,即所有路由都放在了 app/ 目录。当然,两者还是存在一些区别的,而不是单单只是存放路由的目录不同而已。

create-next-app 选项

本专题使用 yarn create next-app 来创建 Next.js 项目,它底层调用的也是 create-next-app 命令。

What is your project named? axum-rs-hello-nextjs-app-router   👉[1]
Would you like to use TypeScript with this project? No / Yes   👉[2]
Would you like to use ESLint with this project? No / Yes  👉[3]
Would you like to use Tailwind CSS with this project? No / Yes  👉[4]
Would you like to use `src/` directory with this project? No / Yes  👉[5]
Use App Router (recommended)? No / Yes  👉[6]
Would you like to customize the default import alias? No / Yes  👉[7]
  • 👉[1] :给创建的项目设置名字,本例为 axum-rs-hello-nextjs-app-router
  • 👉[2]:是否使用 TypeScript,本例为 No(不使用)
  • 👉[3]:是否使用 ESLint,本例为 No(不使用)
  • 👉[4]:是否使用 Tailwind,本例为 No(不使用,需要的时候可以手动安装,并不复杂)
  • 👉[5]:是否使用 src 目录,本例为 No(不使用)
  • 👉[6]:是否使用 App 路由,本例为 Yes(使用)
  • 👉[7]:是否为 import 定义别名,本例为 No (不定义)

显而易见,本专题就是为了讲 App 路由,所以 👉[6] 肯定要选择 Yes

目录结构

  • app 目录:项目的路由
    • app/favicon.ico:偏好图标
    • app/global.css:全局样式
    • app/layout.js:应用程序的根布局(root layout
    • app/page.js:应用程序的“首页”(root page
    • app/page.module.css:应用程序“首页”的模块化样式
  • next.config.js:Next.js 配置文件
  • public目录:公共静态资源

约定即配置

Next.js 的重大策略是:约定即配置,大部分功能都是通过约定而不是手动配置(比如手动修改next.config.js)来实现。其中最明显的就是路由系统。

Next.js 使用约定的文件/目录来实现路由:(以下文件/目录均在app/目录里面)

以下内容的 *.js 可以是 *.js/*.jsx/*.ts/*.tsx,为了简化描述,本专题统一以 *.js 进行描述。

以下内容的 *.js 可以是 *.js/*.jsx/*.ts/*.tsx,为了简化描述,本专题统一以 *.js 进行描述。

路由文件

嵌套路由

目录名说明URL
路由1定义一个名为路由1的路由/路由1
路由1/子路由1定义一个名为子路由1的路由,它的父路由是 路由1/路由1/子路由1
目录名说明
[axum-rs]定义一个动态路由
[...axum-rs]定义一个 Catch-All 动态路由
[[...axum-rs]]定义一个可选的 Catch-All 动态路由

路由分组

目录名说明
(axum-rs)定义一个名为 axum-rs 的路由组
_axum-rs定义一个名为 axum-rs 私有目录,它及它的子路由都将无法访问

并行路由和路由拦截

目录名说明
@axum-rs定义一个名为axum-rs 的命名插槽,以便用于并行路由。
(.)axum-rs拦截同级路由
(..)axum-rs拦截上级路由
(..)(..)axum-rs拦截上2级路由
(...)axum-rs拦截根路由

SEO

文件名说明
sitemap.xml网站地图
sitemap.js或.ts生成网站地图
robots.txtRobots 文件
robots.js或.ts生成 Robots 文件
要查看完整内容,请先登录