页面

创建你在Next.js中的第一个页面。

相关链接：

• app/building-your-application/routing/layouts-and-templates
• app/building-your-application/routing/linking-and-navigating

页面是针对路由唯一的UI。你可以通过从page.js文件默认导出一个组件来定义一个页面。

例如，要创建你的index页面，在app目录中添加page.js文件：

// `app/page.tsx` 是 `/` URL的UI
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

// `app/page.js` 是 `/` URL的UI
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

然后，要创建更多页面，创建一个新文件夹并在其中添加page.js文件。例如，要为/dashboard路由创建页面，创建一个名为dashboard的新文件夹，并在其中添加page.js文件：

// `app/dashboard/page.tsx` 是 `/dashboard` URL的UI
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

// `app/dashboard/page.js` 是 `/dashboard` URL的UI
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

须知：

• 页面可以使用.js、.jsx或.tsx文件扩展名。
• 页面始终是路由子树的叶子。
• 需要page.js文件才能使路由段公开可访问。
• 页面默认是服务器组件，但可以设置为客户端组件。
• 页面可以获取数据。查看数据获取部分了解更多信息。