【Next.js入門③】next/linkでSPA構成にしてみる

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

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

Index.jsをSPA構成にしてみよう

SPAについての説明は省略します。

以下のように書き換えてみましょう。
pages/index.js

import React from 'react';
import Link from 'next/link';

class Index extends React.Component{
    render() {
        return (
            <div>
                <p>Hello Next.js</p>
                <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>
            </div>
        )
    }
}

export default Index;

見た目の部分ではMPAとほとんど変わりませんが、
SPAの場合には画面のイニシャライズの際に全てのページデータを読み込んでいるため、
画面「遷移」はありません。

以前のindex.jsはMPAだったため、aタグを押すたびにGETパラメータが飛び、
サーバにデータを要求していましたが、SPAの場合にはそのような構成が必要ではないわけです。

そしてNext.jsの場合には、このSPA構成がnext/linkによって実現してしまうため、
驚くほど簡単にSPAが書けてしまえる、というのが私の実感でした。