布局与页面组件
掌握如何在 App Router 结构中创建嵌套布局和页面组件，以实现有序的用户界面
布局与页面组件 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack (App Router + Server Actions) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
App Router UI Structure
The Next.js App Router organizes your application's user interface (UI) using special files: layout.js and page.js.
This structured approach helps you build consistent UIs that are easy to manage and scale across your mobile app.
What is a Layout?
A layout defines shared UI for a segment of routes. Think of it as a wrapper that surrounds your pages and other layouts.
- Layouts can contain common elements like navigation bars, footers, or sidebars.
- They don't re-render when navigating between pages within the same layout, improving performance.
The Root Layout File
Every App Router project must have a root layout file named app/layout.js at the top level of your app directory.
This layout defines the essential HTML structure, including the <html> and <body> tags, for your entire application.
Basic Root Layout Code
The children prop in a layout component is crucial. It represents the content of the nested layouts or pages below it.
This example shows a basic root layout with a header and footer.
app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<header>My App Header</header>
{children}
<footer>My App Footer</footer>
</body>
</html>
);
}What is a Page Component?
A page component is defined by a page.js file. This file contains the unique UI content specifically for a given route segment.
- Each URL path (e.g.,
/,/about) typically has its ownpage.js. - It renders within its parent layout(s), filling the
{children}slot.
Basic Page Component Code
This app/page.js file creates the UI for your root URL (/). It will be automatically wrapped by your app/layout.js.
app/page.js
export default function HomePage() {
return (
<main>
<h1>Welcome to CoddyKit!</h1>
<p>Start learning Next.js 15 today!</p>
</main>
);
}Creating Nested Layouts
You can create nested layouts by simply adding a layout.js file inside any subfolder within your app directory.
This allows you to apply shared UI to specific sections of your app, like a dashboard or user profile, while inheriting the root layout's structure.
Nested Layout Example
Here's how you'd create a nested layout for a /dashboard route. This dashboard layout wraps all pages within the /dashboard segment.
app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<section>
<nav>
<p>Dashboard Navigation</p>
</nav>
{children} {/* This will be app/dashboard/page.js */}
</section>
);
}
app/dashboard/page.js
export default function DashboardPage() {
return (
<h1>Dashboard Overview</h1>
);
}Layouts & Pages Hierarchy
The rendering order for your UI components flows from the outermost layout to the innermost page:
app/layout.js(Root Layout)app/dashboard/layout.js(Nested Layout, if applicable)app/dashboard/page.js(Specific Page Content)
Each layout receives the next level of UI as its children prop.
Quick Check
Test your knowledge on how Next.js App Router structures UI.
Recap: Layouts & Pages
You've learned how Next.js App Router uses layout.js files for shared UI and page.js files for unique content specific to a route.
Understanding this fundamental structure is key to building organized and scalable Next.js applications!
用 AI 导师学习 TypeScript — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 22
- 课程
- 88
常见问题解答
「布局与页面组件」课时是免费的吗？
是的 — 「布局与页面组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack (App Router + Server Actions) 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 4 节课。
「布局与页面组件」这节课中我会学到什么？
掌握如何在 App Router 结构中创建嵌套布局和页面组件，以实现有序的用户界面 你通过在浏览器中直接运行的动手代码来练习 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) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「布局与页面组件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 布局与页面组件
- 动态路由与参数
- 加载与错误用户界面
- 路由组与嵌套路由布局