Next.jsでページごとにレイアウトを使い分ける

概要

ログインとログイン後のページではレイアウトが異なるケースがよくあります。そういったページごとにレイアウトを使い分ける場合のメモになります。

レイアウトを作る

このようにLaoutコンポーネントを作成する。

LayoutMain.tsx

function LayoutMain({ children }) {
  return <div>{children}</div>
}
export default LayoutMain

以下のようにpages/_app.tsxにLayoutコンポーネントを配置すると、全てのページがレイアウトでラッピングされます。

_app.tsx

import React from 'react'
import LayoutMain from '../layouts/LayoutMain'

function App({ Component, pageProps }) {
  return (
    <LayoutMain>
      <Component {...pageProps} />
    </LayoutMain>
  )
}
export default App

レイアウトを使い分ける

本記事のタイトル回収に行きます。

pagePropsでページが持つプロパティを取得することができます。なのでswitch文でレイアウトの分岐をしその判定にpagePropsのlayout情報を使用するようにします。

_app.tsx

import React from 'react'
import LayoutMain from '../layouts/LayoutMain'

function App({ Component, pageProps }) {
switch (pageProps.layout) {
    case 'main': {
      return (
        <LayoutMain>
          <Component {...pageProps} />
        </LayoutMain>
      )    
    } default: {
      return (
        <Component {...pageProps} />
      )   
      )
    }
  }
}
export default App

上記ではまだlayout情報を持っていないため、各ページ側でgetStaticPropsを記述しlayout情報を持たせる必要があります。

export const getStaticProps = async () => {
  return {
    props: {
      layout: 'main'
    },
  };
};

これで共通レイアウトを作り、ページごとに切り替えることができるようになりました。