layout.tsx
複数のpageで共有されるUI
例
code:tsx
export default function DashboardLayout({
children,
}: {
children: React.ReactNode,
}) {
return (
<dic>
<header/>
<nav></nav>
{children}
</div>
);
}
引数でchildrenを受け取る
children以外の場所が共通のUIを定義する場所になる
例えばCCなら、pageを移動してもstateは維持される
layout.tsxをccにすると、すべての子要素がクライアントコンポーネントになるのか？
関係ないけど、今そのcomponentがclient/serverどちらでrenderingされているかってどうやって確認するんだ
ツリーを辿っていかないとわからない？
use clientとかが境界というのの弊害
By fetching data in a layout, rendering for all route segments beneath it can only start once the data has finished loading. ref そうなんだmrsekut.icon
大きく分けると2種類
Root Layout
必須
app/layout.tsxに書く
project内の全ページに対する共通のlayout
<html>とか<body>を書くことになる
やっていることは同じmrsekut.icon
「Layout」という言葉が何を指しているのかわかりづらい
何がしたいのか
headerは、ほぼ全てのページで使う
従来は、<Header />を各ページ内に設置していた
しかし、<Header />内で状態を管理しているとき
例えば、検索フォームの中身だったり、ログイン状態だったり？
ページを遷移すると、その状態がリセットされてしまう
(もちろんglobal state管理とかすればいけるが、そういう話ではない)
子になるpage.tsxが複数無いとあまりうれしみはない？mrsekut.icon
nestしたpageと何が違うのかわからなくなってきた #?? そんなにこれ使うか？
ああ、こういう感じのサイドバーとかだとあるか
https://gyazo.com/4d74506455f696195966fb6ac0745b67 https://www.publickey1.jp/blog/22/_nextjs_13webnextjs_conf_2022.html
「header + footer + 変えられるcontent」のようなLayoutを定義して使い回す感じ？
ページ遷移すると、変えられるcontentの部分のみが切り替わる
だから、headerの部分は状態を保持し続けられる
ナビゲーションをまたいで状態を維持し、高価な再レンダリングを回避し、高度なルーティングパターンを可能にする複雑なインターフェースを簡単に作成する
複数ページにまたがる共通のコンポーネントを再レンダリング等に配慮して設置
いまいちどういう意味なのかわからんmrsekut.icon
ページ間で共通のheaderを使っている時の話ということはわかる
もともとどういう問題が会ったのかを知りたいmrsekut.icon
わかりやすい
Layoutsをいくつか用意しつつ、
個々のpagesで、そのLayoutsを指定して表示できる
headerありのLayout、サイドバーありのLayouts、のようなものを用意しておけばいい
2022/5/24にRFCが出た
Nested Layouts
: Build complex applications with nested routes.
Designed for Server Components
: Optimized for subtree navigation.
Improved Data Fetching
: Fetch in layouts while avoiding waterfalls.
Using React 18 Features
: Streaming, Transitions, and Suspense.
Client and Server Routing
: Server-centric routing with SPA-like behavior.
100% incrementally adoptable
: No breaking changes so you can adopt gradually.
Advanced Routing Conventions
: Offscreen stashing, instant transitions, and more.