【Next.js入門④】Componentを他のComponentとシェアする

Next.js

f:id:nekorokkekun:20190909131206p:plain:w1000
こちらの連載記事では、Next.jsの入門チュートリアルを紹介しながら、最終的にポートフォリオファイルの完成を目指します。

筆者もNext.jsビギナーなので、同じくNext.jsに触れるのが初めてだという方を対象に書き進めていきます。

シェアするComponentを作成

ヘッダーやフッターなど、どのページにも表示されてほしいComponentはシェアできるようにしましょう。

以下の階層でディレクトリ、ファイルを作成していきます。

components/shared/Header.js

import React from 'react';
// index.jsから以下をCopy&Paste
import Link from 'next/link';

class Header extends React.Component {
    render() {
        return (
            <React.Fragment>
　　　　// index.jsから以下をCopy&Paste
                <Link href='/'>
                    <a>Home</a>
                </Link>
                <Link href='/about'>
                    <a>About</a>
                </Link>
                <Link href='/portfolios'>
                    <a>Portfolio</a>
                </Link>
                <Link href='/blogs'>
                    <a>Blog</a>
                </Link>
                <Link href='/cv'>
                    <a>CV</a>
                </Link>
　　　　// index.jsから以上をCopy&Paste
            </React.Fragment>
        )
    }
}

export default Header;

について

先ほどというタグが出てきました。
まず前提としてrender関数でreturnされるjsxは、1つのタグで囲まれていなければなりません。
そのためではなくでも

などで、複数のタグが囲まれていることはよくあります。

の特殊性としては、paddingなどを持たないということ。
で囲んだとしてもHTML側では特に影響を及ぼさないため、使い勝手がとてもいいです。

index.jsでHeader.jsを読み込む

pages/index.js

import React from 'react';
import Header from '../components/shared/Header';

class Index extends React.Component{
    render() {
        return (
            <div>
                <p>Hello Next.js</p>
                <Header />
            </div>
        )
    }
}

export default Index;

これで先ほどのブラウザ上の表示と変わっていなければ成功です！