はじめに

Next × Typesciprtの環境構築を行なっていきましょう！！！公式サイトはこちらから

環境構築の1歩目

まずは、Next × Typesciprtの環境を簡単に作れるコマンドを叩きましょう！

yarn create next-app --typescript

すると、以下のように聞かれるので、プロジェクト名を書きましょう！

wait is your oriject named?

プロジェクトの生成に成功したら、動くかどうかを確認してみましょう！

yarn dev

ちなみにts.config.jsonはこんな感じ！

ts.config.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "jsxImportSource": "@emotion/react",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "exclude": ["./node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

環境構築の2歩目

▷emotionの導入

続いて、emotion(CSS-in-Jsのライブラリ)を導入してみましょう！

メリットとしては以下の3点です。

TypeScriptとの相性◎
styled-componentsと同じことができる
HTMLが見やすくなる

早速、インストールしていきましょう！

yarn add @emotion/react

▷emotionをよしなに書くためのパッケージも導入

しかし！このままでは/** @jsx jsx */を全ファイルの先頭に書かないといけないらしい

ので、次のパッケージも同時に導入しておきましょう。

// emotin V.11の場合
yarn add -D @emotion/babel-plugin

さらに、.babelrcを作り、以下のコードをコピペします。

.babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

環境構築の3歩目

より開発しやすくするためにESLint と Prettier を導入しましょう！

まずはESLintから！

yarn add -D eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

導入が終わったら.eslintrc.jsonを作り、以下のコードをコピペします。

.eslintrc.json
{
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2019,
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["react-hooks", "react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "rules": {
    "react/prop-types": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/ban-types": "off",
    "react/no-unescaped-entities": "off",
    "react/display-name": "off",
    "semi": "error",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/array-type": [
      "error",
      {
        "default": "array-simple"
      }
    ],
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": ["class", "typeAlias", "enum"],
        "format": ["PascalCase"]
      },
      {
        "selector": ["function", "method"],
        "format": ["camelCase"]
      },
      {
        "selector": ["parameter"],
        "format": ["camelCase", "PascalCase"],
        "leadingUnderscore": "allow"
      },
      {
        "selector": ["variable"],
        "format": ["camelCase", "PascalCase", "UPPER_CASE"]
      },
      {
        "selector": "interface",
        "format": ["PascalCase"],
        "custom": {
          "regex": "^I[A-Z]",
          "match": false
        }
      }
    ]
  }
}

続いてPrettier！

yarn add -D eslint-config-prettier prettier

導入が終わったら.prettierrcを作り、以下のコードをコピペします。