Next.jsを使ってみる。~チュートリアル編~

概要

業務でNext.js + Reactを使う可能性が出てきたので簡単なWebアプリを作ってみたいと思います。 Next.jsはサーバーサイドレンダリングをやってくれるものらしい。 サーバサイドレンダリングを行うことでSEOとかにいいらしい。

環境

OS: Mac OS High Sierra　バージョン10.13.4 Homebrew 1.9.3

準備

brewでyarnをインストールします。

brew install yarn

適当にプロジェクトを作成します。

mkdir sample
cd sample
yarn init -y

必要なパッケージをインストールします。

yarn add react react-dom next
yarn add webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

babelの設定ファイル .babelrcに設定を記述

{
    "presets": [
      [
        "@babel/preset-env", {
          "targets": {
             "node": "current"
            }
          }
      ],
      "@babel/react"
      ]
}

次にめんどくさいwebpack.config.jsの設定です。

module.exports = {
    entry: './src/App.jsx',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    devtool: 'inline-soruce-map',
    module: {
        rules : [
            {
                test: /\.js(x?)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    devServer: {
        historyApiFallback: {
            index: 'index.html'
        },
        port: '3000'
    }
}

package.jsonも設定します。

{
  "name": "DepositCalculation",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "hogehoge",
  "author": "hogehoge",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "next": "^7.0.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  },
  "devDependencies": {
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "scripts": {
    "dev": "next",
    "start": "next start",
    "build": "next build"
  }
}

コード書いていきます。 Next.jsはpagesディレクトリ配下のファイルがそのままルーティングとなってくれます。 そのためpagesディレクトリの下に対象のファイルを作成していきます。 まずはpages/index.js

mkdir pages
cd pages
vim index.js

index.js内

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

const Index = () => (
  <Link href="/about">
    <div>
      <p>Hello Next.js</p>
    </div>
  </Link>
)

export default Index

次に同じpagesディレクトリ内にabout.jsを作成します。

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

export default () => (
  <Link href="/index">
    <div>
      <p>This is the about page</p>
    </div>
  </Link>
)

ここまで終わったら実行するのみです。 コマンドを実行しましょう。

# ビルド→スタート
yarn build
yarn start

# サーバがスタートした合図がでたら、http://localhost:3000にアクセス
> Ready on http://localhost:3000

アクセスしたらアクセス先で表示されているメッセージをクリックしてみましょう。 おそらく、aboutページに遷移すると思います。 これで完了です。

所感

SSRは意外とめんどくさいものだと思っていましたが、Next.jsの登場でハードルがだいぶ下がったような気がします。 これからはReactも勉強していかないといけないですね。。。

ソース