定义路由

提示

我们建议在继续之前先阅读路由基础页面。

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

---

创建路由

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

每个文件夹代表一个映射到URL段的路由段。要创建嵌套路由,您可以将文件夹嵌套在彼此内部。

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

在此示例中,/dashboard/analytics URL路径是_不_公开可访问的,因为它没有相应的page.js文件。这个文件夹可以用来存储组件、样式表、图像或其他相关文件。

提示

特殊文件可以使用.js、.jsx、.ts或.tsx文件扩展名。

---

创建UI

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

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

app/page.tsx

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

app/page.js

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