Next.jsでReactをSSR（Server Side Rendering）する

Next.js を使って React.js のコンポーネントを SSR（Server Side Rendering）して表示してみます。

SSR（Server Side Rendering）はサーバーサイドでHTMLを生成（Rendering）して表示する技術を言います。

Next.jsのインストール
Reactのコンポーネントを作成する
Next.jsを起動する
まとめ

Next.jsのインストール

Next.jsをインストールするにはNode.jsのnpmを使って行います。

Node.jsのインストールが完了していない方は先にインストールを行ってください。

Node.jsをWindowsパソコンにインストールする方法

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の Java...

まずNext.jsを起動するフォルダーを作成します。

mkdir next-test
cd next-test

次にnpmで初期化を行います。

npm init

これで初期化したフォルダーにpackage.jsonが生成されます。

次に next 、react 、react-dom をインストールします。

npm install --save next react react-dom

それぞれのインストールされたバージョンは以下の通りです。

C:\next-js>npm info next version
10.1.3
C:\next-js>npm info react version
17.0.2
C:\next-js>npm info react-dom version
17.0.2

インストールが完了したらpackage.jsonのscriptsに以下の行を追加します。

,"dev": "next"
,"build": "next build"
,"start": "next start"

追加すると以下のようになります。

{
    "name": "next-test",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
        ,"dev": "next"
        ,"build": "next build"
        ,"start": "next start"
    },
    "author": "",
    "license": "ISC",
    "description": "",
    "devDependencies": {
        "next": "^10.1.3",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    }
}

これで Next.js を起動する準備は完了です。

Reactのコンポーネントを作成する

次に実際に表示するためのReactコンポーネントを作成します。

まず、起動フォルダーに pages という名前のフォルダーを作成します。

この pages は Next.jsのルートパスになるので必ず pages という名前で作成します。

mkdir pages

作成した pages フォルダーの配下に index.js と言う名前で React コンポーネントを作成します。

import React, { useState } from 'react';

function MainPage() {
    return(
        <>
            <MakeTagH1 message="メッセージ表示テスト" />
            <MakeTagH2 />
            <MakeTagInput />
        </>
    ) ;
}

function MakeTagH1( props ){
    return(
        <>
          <h1>Next.js-Reactで作成したH1タグ</h1>
          <p>{props.message}</p>
        </>
    ) ;
}

function MakeTagH2( props ){
    return <h2>Next.js-Reactで作成したH2タグ</h2>
}

function MakeTagInput( props ){
    const [ text_val, setInputBox ] = useState( '' ) ;

    const handleInputChange = ( event ) => {
        const target = event.target ;
        setInputBox( target.value ) ;
    } ;
    return(
        <>
            <label>Next.js-Reactで作成したテキストボックス:<input value={text_val} onChange={handleInputChange} /></label>
        </>
    ) ;
}
export default MainPage;

これで React コンポーネントの作成も完了しました。

Next.jsを起動する

最後に Next.js を起動して React コンポーネントとして作成したプログラムを表示させます。

npm run dev

起動が成功すると

> next-test@1.0.0 dev C:\next-js
> next

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
event - compiled successfully

というような表示がされます。

これでブラウザーから http://localhost:3000 と入力すると作成した React コンポーネットがレタリングされてページが表示されます。

以下が実際の表示結果です。

まとめ

Next.jsを使えばReactのコンポーネントをSSR（Server Side Rendering）で表示を簡単におこなうことができます。