【備忘録】Next.js × TypeScriptのセットアップメモ

どうもてぃ。

毎回eslint/prettierの設定をやり直すのクソだるいのでメモしときます。

環境

node v15.12.0

プロジェクト作成

next v11だと標準でeslintの設定が入るみたいですね。メチャ楽になったな。

# 自分はこれだとeslintが入らなかった…
$ npx create-next-app <project-name> --typescript

or

$ yarn create next-app <project-name> --typescript

package.jsonの中身がこんな感じ。

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/react": "17.0.14",
    "eslint": "7.31.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
}

GitHub Repositoryの作成

これはおまけ

$ gh repo create <project-name>

github cliが入ってないと無理なのでご注意を。

tsconfig.jsonの設定

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

noImplicitAny, baseUrl, paths を追加しただけ。

eslint設定

package.jsonみたらわかりますが、最初から入ってます。

.eslintrcの中身がこれ。

{
  "extends": ["next", "next/core-web-vitals"]
}

prettier設定

.prettierrc.jsをプロジェクトルートに作成。

module.exports = {
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  semi: false,
  printWidth: 110,
  tabWidth: 2,
  parser: 'typescript',
  overrides: [
    {
      files: '*.json',
      options: {
        parser: 'json',
      },
    },
  ],
}

その他必要なもの

babel-plugin-module-resolver導入

$ yarn add -D babel-plugin-module-resolver

babelrc.jsをプロジェクトルートに作成

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        alias: {
          '~': './',
        },
      },
    ],
  ],
}

autoprefixer導入

$ yarn add autoprefixer

axios導入

$ yarn add axios

ReduxToolkit導入

state管理はReduxToolkitを使用。

$ yarn add @reduxｊｓ/toolkit

終わり

最終的な package.jsonがこちら。

{
  "name": "microcms-next-blog",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.6.1",
    "autoprefixer": "^10.3.1",
    "axios": "^0.21.1",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/react": "17.0.14",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "7.31.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
}

$ yarn dev

f:id:rdwbocungelt5:20210718141058p:plain

Rubyと筋肉とギターとわたし

筋トレが仕事です