了解有关 使用页面路由 的更多信息。

英Learn more about using the Pages Router.

很高兴知道： 尽管你可以在同一项目中使用两个路由，但 app 中的路由将优先于 pages 中的路由。 我们建议在你的新项目中仅使用一台路由以避免混淆。

public 文件夹（可选）​

创建 public 文件夹来存储静态资源，例如图片、字体等。然后，你的代码可以从基本 URL (/) 开始引用 public 目录中的文件。

英Create a public folder to store static assets such as images, fonts, etc. Files inside public directory can then be referenced by your code starting from the base URL (/).

运行开发服务器​

运行 npm run dev 以启动开发服务器。

访问 http://localhost:3000 查看你的应用。

编辑 app/page.tsx（或 pages/index.tsx）文件并保存以在浏览器中查看更新的结果。

Previous入门NextNext.js 项目结构自动安装手动安装创建目录运行开发服务器Next.js 中文网 - 粤ICP备13048890号

基本特性: Layouts | Next.js | Next.js中文网

Examples

layout-component

The React model allows us to deconstruct a page into a series of components. Many of these components are often reused between pages. For example, you might have the same navigation bar and footer on every page.

// components/layout.js

import Navbar from './navbar'

import Footer from './footer'

export default function Layout({ children }) {

return (

<>