【Next.js】Next.jsの公式の入門をやってみた④

はじめに

今回は”Using Shared Components”を進めていきたいと思います。

ヘッダコンポーネントを作成する

公式ではサンプルコードをダウンロードして進めていますが、より実感がわくように前回の続きを使っていきたいと思います。

まずはコマンドプロンプトでもエクスプローラーでもいいので、componentsフォルダ内にHeader.jsを作成しましょう。

f:id:hanaaaaaachiru:20190115183311p:plain

そうした後、Header.jsの中身を書き換えていきます。

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

const Header = () => (
    <div>
        <Link href="/">
          <a style={linkStyle}>Home</a>
        </Link>
        <Link href="/about">
          <a style={linkStyle}>About</a>
        </Link>
    </div>
)

export default Header

ヘッダコンポーネントの使い方

このコンポーネントをインポートしてページで使用します。
pagesフォルダのindex.jsを書き換えましょう。

import Header from '../components/Header'

export default () => (
  <div>
    <Header />
    <p>Hello Next.js</p>
  </div>
)

これでローカルホストをみると、

f:id:hanaaaaaachiru:20190115184141p:plain

無事ヘッダーコンポーネントを適応できました！

レイアウトコンポーネント

さまざまなページで共通のスタイルを使用するには、レイアウトコンポーネントを使用します。
componentsフォルダにMyLayout.jsを作成し、以下のコードを書きましょう。

import Header from './Header'

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}

const Layout = (props) => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

export default Layout

これを適応するindex.jsとabout.jsの中身を作っていきたいと思います。
まずpagesフォルダ内にindex.jsのようにabout.jsを作成し、中身を以下のコードに書き換えていきましょう。

// pages/index.js

import Layout from '../components/MyLayout.js'

export default () => (
    <Layout>
       <p>Hello Next.js</p>
    </Layout>
)
<||

>||
// pages/about.js

import Layout from '../components/MyLayout.js'

export default () => (
    <Layout>
       <p>This is the about page</p>
    </Layout>
)

そして、いつもどうりにローカルホストを見てみましょう。

f:id:hanaaaaaachiru:20190115185526p:plain