页面与布局概览
探索页面与布局之间的区别，以及它们如何组合形成 Next.js 应用的用户界面结构
页面与布局概览 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack (App Router + Server Actions) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Welcome to Pages & Layouts
Next.js UI rests on two ideas: Pages and Layouts. This lesson shows what each one is and how they combine to build your interface.
What is a Page?
A Page is a React component that renders the UI for one route. Default-export it from a page.js file and that route gets its own view.
Creating a Simple Page
Here's a basic page.js that renders the home route /. A page is just a default-exported component — nothing more.
// app/page.js
export default function HomePage() {
return (
<h1>Welcome to My App!</h1>
);
}What is a Layout?
A Layout is UI shared across pages — a wrapper that gives consistent structure. Export it from layout.js; it takes a children prop for nested content.
The Root Layout
Every App Router app needs a root layout at app/layout.js. It wraps the whole app, including the html and body tags — the place for global styles and metadata.
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Nested Layouts
Add a layout.js inside any folder for a nested layout. An app/dashboard/layout.js wraps every page under dashboard — unique shared UI per section.
How They Combine
Next.js nests layouts automatically: a page renders inside its parent layout's children, that inside its parent's, all the way up to the root.
Example: A Blog Section
Picture a blog: blog/layout.js gives a shared nav, blog/page.js is the index, and blog/first-post/page.js a post — each nesting upward into the root.
Code: Blog Layout Example
This blog/layout.js wraps every /blog page with a header, nav, and footer — shared chrome that stays consistent across the section.
// app/blog/layout.js
export default function BlogLayout({ children }) {
return (
<div>
<header><h1>My Awesome Blog</h1></header>
<nav>
<a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
</nav>
<main>{children}</main>
<footer><p>© 2023 CoddyKit Blog</p></footer>
</div>
);
}Code: Blog Page Example
And here's blog/page.js. Its content renders right where {children} sits inside BlogLayout — page slotting into layout.
// app/blog/page.js
export default function BlogHomePage() {
return (
<section>
<h2>Welcome to the Blog Homepage!</h2>
<p>Discover our latest articles and insights.</p>
</section>
);
}Pages vs. Layouts Quiz
Let's check your understanding of Next.js pages and layouts.
Recap: Pages & Layouts
Recap: Pages (page.js) render a route's unique UI, Layouts (layout.js) share UI across routes, and Next.js nests them via children.
常见问题解答
「页面与布局概览」课时是免费的吗？
是的 — 「页面与布局概览」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack (App Router + Server Actions) 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。
「页面与布局概览」这节课中我会学到什么？
探索页面与布局之间的区别，以及它们如何组合形成 Next.js 应用的用户界面结构 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack (App Router + Server Actions)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack (App Router + Server Actions) 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack (App Router + Server Actions) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「页面与布局概览」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。