仕事ですぐに使えるTypeScriptを読んでいくその65

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

Next.js(React)の環境構築

ビルドのツールのインストールと設定

Next.jsは単独で機能するものではなく、react、react-domをインストールする必要がある。
参考ではReactのJSX対応をさせるためにeslint-plugin-reactを追加。

$ npm install --save next react react-dom
$ npm install --save-dev @types/node @types/next @types/react @types/react-dom
$ npm install --save-dev typescript prettier
    eslint @typescript-eslint/eslint-plugin eslint-plugin-prettier
    eslint-config-prettier eslint-plugin-react npm-run-all
$ npm install --save-dev jest ts-jest @types/jest

公式ではこう書いてある。
TypeScriptを考慮しない場合は非常に簡単に導入ができそう。

npm init -y
npm install --save react react-dom next

他の参考では以下のような方法もあった。

npm init -y
npm i next react react-dom @zeit/next-typescript && npm i -D @types/next @types/react @types/react-dom

qiita.com

Next.js本家が提供するSCSSを導入し、快適さをあげる。

$ npm install --save-dev @zeit/next-typescript @zeit/next-sass node-sass

Next.jsだけではまっしろい画面が表示されるHTMLになってしまうので、UIパッケージを追加。

$ npm install --save @material-ui/core @material-ui/icons react-jss

tsconfigの変更

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

.babelrcにも設定変更をする

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

package.jsonの修正

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "lint": "eslint .",
    "fix": "eslint --fix .",
    "test": "jest",
    "watch": "jest --watchAll"
  }
}

eslintrcの修正

{
  "plugins": [
    "prettier"
  ],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "no-console": 0,
    "prettier/prettier": "error",
    "@typescript-eslint/no-var-requires": false,
    "@typescript-eslint/indent": "ingore",
    "react/jsx-filename-extension": [1, {
      "extensions": [".ts", ".tsx", ".js", ".jsx"]
    }]
  }
}

今日はここまで。