Next.js Layout作成してみよう

2020年3月18日2020年9月13日

こんにちは、Yuuichi(@WestHillWorker)です。

今回は共通で利用するLayout作成して、メニューなどの各pagesで汎用的に利用できるようにしてみます。

前回の続きでやっていきますので、手を動かしたい方は以下よりお試しください。

共通Layout作成

components/Layout.jsを作成

import Menu from './Menu';
const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};
const Layout = props => (
  <div style={layoutStyle}>
    <Menu />
    {props.children}
  </div>
);
export default Layout;

props.childrenがLayoutで囲った中のタグが表示されます。

pagesでLayout読み込み

index.js / about.jsにて作成したcomponents/Layout.jsをimportして括ります。

pages/index.js

import Layout from '../components/Layout';
export default function Index() {
  return (
    <>
      <Layout>
        <p>こちらがHomeページ</p>
      </Layout>
    </>
  );
}

こちらがHomeページがの部分がprops.childrenにあたります。

pages/about.js

import Layout from '../components/Layout';
export default function About() {
  return (
    <>
      <Layout>
        <p>こちらがAboutページ</p>
      </Layout>
    </>
  );
}

ブラウザで確認

お疲れ様です！ここまでで完了です。

メニュー以外にも他のコンテンツをLayout.jsに設定すれば、共通で表示できるようになるので後々楽になると思います。

その他のLayout作成方法について

上記以外にも2つLayoutを作成する方法がありました。

Layoutにindex.jsで表示するページ情報を引数にする

以下のようにLayout.jsを書き換えます。

import Menu from './Menu';
const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};
const withLayout = Page => (
  <div style={layoutStyle}>
    <Menu />
    <Page />
  </div>
);
export default withLayout;

withLayoutでPageを取得して、メニュー下にタグを設定する方法

index.js

import withLayout from '../components/Layout';
const Page = () => <p>こちらがHomeページ</p>
export default withLayout(Page)

withLayoutに表示したいPageのDomを渡す。

about.js

import withLayout from '../components/Layout';
const Page = () => <p>こちらがAboutページ</p>
export default withLayout(Page)

Pageで表示する内容を変更するのみです。

表示する内容は先ほどと全く同じ内容となります。

propsのcontentで表示する方法

まずはLayout.jsを修正します。

import Menu from './Menu';
const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};
const Layout = props => (
  <div style={layoutStyle}>
    <Menu />
    {props.content}
  </div>
);
export default Layout;

propsを受け取って、props.contentをメニューの下に定義します。

index.js about.jsの修正

// index.js
import Layout from '../components/Layout';
const indexPageContent = <p>こちらがHomeページ</p>;
export default function Index() {
  return <Layout content={indexPageContent} />;
}
// about.js
import Layout from '../components/Layout';
const aboutPageContent = <p>こちらがAboutページ</p>;
export default function About() {
  return <Layout content={aboutPageContent} />;
}

return する際にLayoutのcontentに表示したいdomを渡す形になります。

表示内容は、最初の内容と同じものが表示されます。

ここまでで、Layoutのチュートリアル完了です！