Next.jsでSSR

Next.js

Next.jsはReactをサーバサイドでレンダリングし表示する。
また、これを使うことでReactで作ったSPAを複数ページのWebサイトとして
作り変えることもできる。

nextjs.org

サーバサイドレンダリング

サーバ側で表示内容を生成してから送信する。

クライアントサイドレンダリング

スクリプトを受け取ってからレンダリングする。

プロジェクト作成

• ディレクトリ内で package.jsonを作成し下記を記述する

{
    "scripts": {
        "dev": "next",
        "build": "next build",
        "start": "next start",
        "export": "next export"
    }
}

• インストールする

npm install --save next

• next.config.jsを作成し下記を記述する

exportPathMapで出力するページのマッピングを行う (pagesのindex.jsをトップページに設定)

module.exports = {
    exportPathMap: function () {
        return {
            '/': { page: '/'}
        }
    }
}

• さらにpagesというディレクトリを作成し、その中にindex.jsとother.jsを作成する

index.js

import Link from "next/link";
export default () => (
  <div>
    <h1>Welcome to index</h1>
    <p>Hello index</p>
    <Link href="/other">
      <button>go to Other</button>
    </Link>
  </div>
);

other.js

import Link from "next/link";
export default () => (
  <div>
    <h1>Other</h1>
    <p>Hello Other</p>
    <Link href="/">
      <button>go to index</button>
    </Link>
  </div>
);

• プロジェクトの実行

npm run dev

• ビルド

npm run build

• エクスポート

npm run export

コンポーネントを利用する

Next.jsでコンポーネントを利用する際は、下記のようにインポートすることで利用できます。
※componentsフォルダにhoge.jsを作成
index.js

import Link from "next/link";
import Hoge from '../components/hoge'

export default () => (
  <div>
    <h1>Welcome to index</h1>
    <p>Hello index</p>
    <Hoge />
    <Link href="/other">
      <button>go to Other</button>
    </Link>
  </div>
);