React+Next.js+Typescript で SSR Webアプリケーションを作成する

はじめまして！

Colorful Bullet の id:nisayama です！

今回はReactとNext.jsを使ってSSR(サーバーサイドレンダリング)のWebアプリケーションを作成していきます

何項かに分けて投稿していきますので、レベル感に合わせて読み進めてもらえればと思います！

今回は環境構築と開発環境で動かしてみるまで

環境

MacOS
node v10.15.3
npm 6.4.1

環境構築

前提条件

以下の環境はインストール済みのこと

npm
node.js
git

ワークスペースの作成

まずは、作業ディレクトリを作成します

$ mkdir myproject
$ cd myproject/

作業ディレクトリはGitHubで管理しましょう

$ git init
$ vim .gitignore
    node_modules/
    .next
    dist
$ add .
$ git commit -m "initial commit"
$ git remote add origin git@github.com/user/myproject.git
$ git push --set-upstream origin master

環境を初期化

$ npm init -y

package.jsonが myproject/ 直下に作成されていることを確認

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "React  Test",
  "main": "index.jsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/user/myproject.git"    // 自分のリポジトリ
  },
  "author": "",
  "license": "ISC"
}

React, Next.js インストール

reactとreact-domとnextをインストールする

$ npm install --save react react-dom next

package.jsonに以下を追記する

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next"    // ここを追加
  },

SSRしてみる

Next.jsはpages/を自動で読み込んでルーティングするので

pages/をmyproject直下に作成

$ mkdir pages
$ cd pages/

ルーティングの/はindex.jsに当たるので、index.jsを作成します

Next.jsは普通のリンクタグでは毎度サーバーに問い合わせてしまうので

Linkタグを使ってSPAと同じ動きをするようにします

これによって最初のレンダリングはサーバーサイドで

ページ遷移はブラウザで行うような仕組みにできます

そうすることで、コンテンツが素早く表示され、かつ、無駄な通信を減らすことができます

import Link from 'next/link'

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

export default Index

遷移ページ先の/aboutページを作成します

const About = () => (
  <div>
    <a>This is About Page</a>
  </div>
)

export default About

開発環境で実行してみましょう

npm run dev

http://localhost:3000 に接続

Hello Next.jsが表示されていれば成功！

Typescriptの準備

Typescriptのライブラリをインストールします

npm install --save @zeit/next-typescript

myproject/直下にnext.config.jsを作成する

const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

次に、.babelrcを作成

ここは実行環境によってライブラリを分けることもできるのですが

今は一旦以下のようにしておきます

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ]
}

さらにtsconfig.jsonを作成

ここは最新の情報を参考にしてください

下記GitHubのREADMEをみてもらえると最新の情報があると思います

next-plugins/packages/next-typescript at master · zeit/next-plugins · GitHub

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "lib": [
      "dom",
      "es2018"
    ]
  }
}

pages/index.jsxをpages/index.tsxに拡張子を変えて保存

http://localhost:3000 に接続

Hello Next.jsが表示されていれば成功！