Next.js の getLayout パターンの記事を読んだ

Next.jsのgetLayoutパターンを実際にプロダクトで使用してみてのtips

getLayout パターンの記事を読んだ。

getLayout パターン is 何

• Basic Features: Layouts | Next.js
• layouts ディレクトリのやりたいことそのままな感じ
  • 色々なところで使われるレイアウト部分だけをコンポーネント化したもの
• Layouts は改善予定(RFC が出されており、この getLayout パターンは改善されたものが出るまでのつなぎとして著者は見ている)

簡単な例

• 最もシンプルなのは pages/_app.tsx に実装するパターン
• pages/_app.tsx は全てのページで読み込まれるので、レイアウトの出し分けができない

具体例

• getLayout という関数を components/layouts/index.tsx に用意しておく
• ↑の関数を使いたいコンポーネントでは HogeComponent.getLayout = getLayout のように持たせておく
• pages/_app.tsx で getLayout がある場合はそれをそのまま使い、ない場合は page を受け取って page を返すだけの関数を使う
• 簡単に言うとこのような感じという認識だが合っているだろうか

Layout に props を渡す

• getLayout 関数を定義し、それを返す高階関数を用意
• その高階関数を pages で import して使う

ページ遷移で状態を初期化する

• Layout で状態を持っている場合、ページ遷移で状態を保持できることはメリット
• ただ状態を初期化したい場合もある
• 著者の方のやり方でもよさそうだが、どうやらレイアウトコンポーネントの key にユニークな値を渡して初期化するのが最も手早そう
  • ユニークな値は URL をそのまま使うといい感じかもしれないが、今のアプリケーションは URL がそのまま画面の状態を表すものではないので注意が必要そう