ページとレイアウトの概要
ページとレイアウトの違い、およびそれらを組み合わせてNext.jsアプリケーションのUI構造を形成する方法を学びます
「ページとレイアウトの概要」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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.
よくある質問
「ページとレイアウトの概要」レッスンは無料ですか？
はい。「ページとレイアウトの概要」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
「ページとレイアウトの概要」で何を学びますか？
ページとレイアウトの違い、およびそれらを組み合わせてNext.jsアプリケーションのUI構造を形成する方法を学びます ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応の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フィードバックを取得できます。ローカル設定は不要です。