会員登録すると
学習することができます。
会員登録する（無料）
学習することができます。
登録済みの方はこちら
ログイン
レイアウトと共通コンポーネント
目安学習時間 15分
学ぶ目的
layout.tsxは全ページの共通枠
ヘッダーやフッターのように全ページで共通する部分は、app/layout.tsxに書きます。各ページの内容はchildrenとしてレイアウトの中に流し込まれます。
部品はcomponentsフォルダへ
React初級講座で学んだコンポーネント分割をNext.jsで実践します。HeaderやFooterをcomponents/フォルダに切り出し、レイアウトから読み込む構成が定番です。
学ぶ目的
「共通部分はレイアウトに、部品はコンポーネントに」という実務と同じ整理の仕方を、自分のアプリに適用できるようになります。
このレクチャーで学ぶこと
- layout.tsxの役割
- ヘッダー・フッターの共通化
- コンポーネントの分割と配置
質問
まだ質問は投稿されていません。
質問投稿
ログイン後に質問の投稿ができます。
理解度チェックテストに
合格しました！
おめでとうございます！
Next.js初級
Next.js初級講座
レイアウトと共通コンポーネント
理解度チェックテストに合格しました！
＼ SNSにシェアする ／
