Next.js Layout作成してみよう
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のチュートリアル完了です!
関連記事
Next.js Tailwindcss 導入編
こんにちは、Yuuichi(@WestHillWorker)です。 前回Tail ...
Next.js Tailwindcss プロフィールページを作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、前回 ...
React react-router-dom v5 画面遷移 入門
今回は、react-router-domというライブラリを利用して、Reactで ...
Next.js APIを作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、Ne ...
Next.js getInitialPropsでページの非同期処理を学ぶ
こんにちは、Yuuichi(@WestHillWorker)です。 今回は前回作 ...