定义路由

建议继续阅读前先了解路由基础

本页将指导您如何在 Next.js 应用中定义和组织路由。

创建路由

Next.js 使用基于文件系统的路由器,其中文件夹用于定义路由。

每个文件夹代表一个路由段 (route segment),映射到 URL 的一个段。要创建嵌套路由 (nested route),可以将文件夹相互嵌套。

路由段与路径段的对应关系

使用特殊的 page.js 文件可使路由段公开访问。

定义路由

在此示例中,/dashboard/analytics URL 路径_无法_公开访问,因为它没有对应的 page.js 文件。此文件夹可用于存储组件、样式表、图像或其他共置文件。

须知:特殊文件可使用 .js.jsx.tsx 扩展名。

创建用户界面

使用特殊文件约定为每个路由段创建用户界面。最常见的是页面 (pages)用于显示路由专属的 UI,以及布局 (layouts)用于显示跨多个路由共享的 UI。

例如,要创建第一个页面,在 app 目录中添加 page.js 文件并导出一个 React 组件:

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

On this page