免费AI编程助手
Next.js 布局和页面创建：新手指南
如何创建布局和页面
Next.js 使用基于文件系统的路由，这意味着你可以通过文件夹和文件来定义路由。本页将指导你如何创建布局和页面，以及如何在它们之间链接。
创建页面
页面是在特定路由上渲染的 UI。要创建一个页面，只需在 app 目录中添加一个 page 文件，并默认导出一个 React 组件。例如，要创建一个索引页面（/）：
export default function Page() {
return <h1>Hello W3Cschool!</h1>
}创建布局
布局是在多个页面之间共享的 UI。在导航时，布局会保留状态、保持交互性，并且不会重新渲染。
你可以通过从 layout 文件中默认导出一个 React 组件来定义布局。该组件应接受一个 children 属性，该属性可以是一个页面或另一个布局。
例如，要创建一个接受索引页面作为子元素的布局，在 app 目录中添加一个 layout 文件：
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="zh">
<body>
{/* 布局 UI */}
{/* 在此处渲染页面或嵌套布局 */}
<main>{children}</main>
</body>
</html>
)
}
上述布局被称为根布局，因为它在 app 目录的根部定义。根布局是必需的，并且必须包含 html 和 body 标签。
创建嵌套路由
嵌套路由是由多个 URL 段组成的路由。例如，/blog/[slug] 路由由三个段组成：
/（根段）blog（段）[slug]（叶段）
在 Next.js 中：
- 文件夹用于定义映射到 URL 段的路由段。
- 文件（如
page和layout）用于创建在段中显示的 UI。
要创建嵌套路由，你可以将文件夹彼此嵌套。例如，要添加一个 /blog 路由，在 app 目录中创建一个名为 blog 的文件夹。然后，要使 /blog 公开访问，添加一个 page 文件：
import { getPosts } from '@/lib/posts'
import { Post } from '@/ui/post'
export default async function Page() {
const posts = await getPosts()
return (
<ul>
{posts.map((post) => (
<Post key={post.id} post={post} />
))}
</ul>
)
}
你可以继续嵌套文件夹来创建嵌套路由。例如，要为特定博客文章创建一个路由，在 blog 文件夹中创建一个新 [slug] 文件夹，并添加一个 page 文件：
function generateStaticParams() {}
export default function Page() {
return <h1>Hello, Blog Post Page!</h1>
}小贴士：将文件夹名称用方括号括起来（例如
[slug]）会创建一个特殊的动态路由段，用于从数据生成多个页面。这对于博客文章、产品页面等非常有用。
嵌套布局
默认情况下，文件夹层次结构中的布局也会被嵌套，这意味着它们通过 children 属性包裹子布局。你可以在特定路由段（文件夹）中添加 layout 来嵌套布局。
例如，要为 /blog 路由创建一个布局，在 blog 文件夹中添加一个新 layout 文件。
export default function BlogLayout({
children,
}: {
children: React.ReactNode
}) {
return <section>{children}</section>
}
如果你将上述两个布局结合起来，根布局（app/layout.js）将包裹博客布局（app/blog/layout.js），而博客布局又将包裹博客页面（app/blog/page.js）和博客文章页面（app/blog/[slug]/page.js）。
页面之间的链接
你可以使用 <Link> 组件在路由之间导航。<Link> 是 Next.js 的内置组件，它扩展了 HTML 的 <a> 标签，提供了预取和客户端导航功能。
例如，要生成博客文章列表，从 next/link 导入 <Link>，并为组件传递一个 href 属性：
import Link from 'next/link'
export default async function Post({ post }) {
const posts = await getPosts()
return (
<ul>
{posts.map((post) => (
<li key={post.slug}>
<Link href={`/blog/${post.slug}`}>{post.title}</Link>
</li>
))}
</ul>
)
}
<Link> 是在 Next.js 应用程序中路由之间导航的主要和推荐方式。不过，对于更高级的导航，你也可以使用 useRouter 钩子。
API 参考
阅读 API 参考 ，了解有关本页中提到的功能的更多信息。
- layout.js
layout.js文件的 API 参考。
- page.js
page.js文件的 API 参考。
- 链接
使用内置的 'next/link' 组件实现快速的客户端导航。
更多建议：