Next.js + TypeScript 環境構築メモ

Next.js (+TypeScript) の環境構築

create-next-app のインストール

npm i -g create-next-app

プロジェクトの作成

npx create-next-app@latest --typescript

実行

npm run dev

ESLint の設定

パッケージのインストール

npm i -D eslint

設定

npx eslint --init

質問に答える

How would you like to use ESLint?
To check syntax, find problems, and enforce code style

What type of modules does your project use?
JavaScript modules(import/expoer)

Which framework does your project use?
React

Does your project use TypeScript?
Yes

Where does your code run?
Browser

How would you like to define a style for your project?
Use a popular style guide

Which style guide do you want to follow?
Standard

What format do you want your config file to be in?
JavaScript

Would you like to install them now with npm?
Yes

Prettier の設定

パッケージのインストール

npm i -D prettier eslint-config-prettier

.eslintrc.js に Prettier の項目を追加する

module.exports = {
  extends: [
    "prettier",
  ],
};

emotion の設定

パッケージのインストール

npm i -D @emotion/react @emotion/babel-plugin @emotion/styled

.babelrc の設定

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

tsconfig.json の設定

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop"],
  }
}