Zenn
🚥

Next.jsをはじめよう

2022/08/10に公開
Git
GitHub
Next.js
TypeScript
JavaScript
tech

Next.js プロジェクト作成

TypeScriptベースのNext.jsプロジェクト

yarn create next-app --typescript アプリ名

TypeScript不要なら、オプションを外すだけ。

yarn create next-app アプリ名

フォルダ構成はこうなる

|-- README.md
|-- next-env.d.ts
|-- next.config.js
|-- node_modules
|-- pages
|-- public
|-- styles
|-- tsconfig.json
|-- yarn.lock

Git連携

作成したプロジェクトのディレクトリで下記のコマンドを実行

リポジトリをつなぐ

git remote add origin 使うレポジトリのURL

ちゃんとなっているか確認

git remote -v

こうなっていれば、OK

origin https//github.com/test-repo/repository.git (fetch)
origin https//github.com/test-repo/repository.git (push)

プロジェクトをPUSH

git push origin main

するとエラーになる

git push origin main
 ! [rejected]        main -> main (non-fast-forward)
error: failed to push some refs to 'https//github.com/test-repo/repository.git'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

forceをつけて、再実行

git push origin main --force

これでOK

Enumerating objects: 20, done.
Counting objects: 100% (20/20), done.
Delta compression using up to 16 threads
Compressing objects: 100% (18/18), done.
Writing objects: 100% (20/20), 47.41 KiB | 9.48 MiB/s, done.
Total 20 (delta 0), reused 0 (delta 0), pack-reused 0
To https//github.com/test-repo/repository.git
 + 43356...f323458 main -> main (forced update)

ESLint & Prettier導入

コードコンベンションの一貫性を担保するため
ESLintとPrettierを導入する

ESLintインストール

yarn add --dev eslint
yarn add v1.22.19
warning ../../package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ eslint@8.21.0
info All dependencies
└─ eslint@8.21.0
✨  Done in 1.21s.

ESLint設定

yarn eslint --init
...
Successfully created .eslintrc.js file in ディレクトリ
...
✨  Done in 162.13s.

好みの設定を行う

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {
  },
};

設定した内容が上記のように.eslintrc.jsに反映される。

touch .eslintignore
vi .eslintignore
.next
next-env.d.ts
node_modules
yarn.lock
package.lock.json
public

eslintで除外する対象を設定する。

Prettierインストール

yarn add --dev prettier
yarn add v1.22.19
warning ../../package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ prettier@2.7.1
info All dependencies
└─ prettier@2.7.1
✨  Done in 1.15s.

yarn add --dev eslint-config-prettier
yarn add v1.22.19
warning ../../package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ eslint-config-prettier@8.5.0
info All dependencies
└─ eslint-config-prettier@8.5.0
✨  Done in 1.07s.

eslintとprettierの間で競合するフォーまっティングを片方に任せるため（Prettierに担当してもらう）

.eslintrc.jsを編集
extendsの最後に、prettierを追記する。
（react/react-in-jsx-scopeを追加。
react/react-in-jsx-scopeはNext.jsではReactを別途importする必要ないため追記してエラーが出ないようにするため設定）

module.exports = {
...
  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
...
  rules: {
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-props-no-spreading': 'off',
    'react/function-component-definition': [
      2,
      {
        namedComponents: 'arrow-function',
        unnamedComponents: 'function-expression',
      },
    ],
    'react/jsx-filename-extension': [
      0,
      {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    ],
  },
}

Prettier設定

.prettierrc.jsをプロジェクトのルートに作成して、下記の内容にする

module.exports = {
  endOfLine: 'lf',
  printWidth: 80,
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  jsxSingleQuote: true,
  trailingComma: 'all',
}

prettierで除外する対象を追加（eslintと同様にした）

touch .prettierignore
vi .prettierignore
.next
next-env.d.ts
node_modules
yarn.lock
package.lock.json
public

vscode設定

保存時にPrettierが働くように設定。
default formater : Pretter

Format On Save : check

package.json反映

"scripts": {
...
  "format": "prettier --check --ignore-path .gitignore .",
  "format:fix": "prettier --write --ignore-path .gitignore ."
...
},

Visual Studio Codeの設定

mkdir .vscode
cd ./vscode
touch settings.json

settings.jsonに下記の内容を設定。
これでGithubからcloneしてもvscodeの設定が反映されるようになる。

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.format": true
  }
}

husky設定

gitコミット、プッシュ前にコンベンションチェックを走らせるために導入。

npx husky-init && yarn

すると、
.husky/_
.husky/pre-commit
が生成される。また、package.jsonを下記のように修正

 "scripts": {
    ...
    "format": "prettier --write --ignore-path .gitignore .",
    ...
    "prepare": "husky install",
    "check-types": "tsc --pretty --noEmit",
    "check-format": "prettier --check .",
    "check-lint": "eslint . --ext ts --ext tsx --ext js",
    "test-all": "yarn run check-format && yarn run check-lint && yarn run check-types"
  },

yarn run format
yarn run v1.22.19
warning ../../package.json: No license field
$ prettier --write --ignore-path .gitignore .
.eslintrc.js 50ms
.eslintrc.json 3ms
.prettierrc.js 5ms
.vscode/settings.json 3ms
next.config.js 5ms
package.json 3ms
pages/_app.tsx 303ms
pages/api/hello.ts 12ms
pages/index.tsx 23ms
README.md 43ms
styles/globals.css 33ms
styles/Home.module.css 17ms
tsconfig.json 7ms
✨  Done in 1.00s.

Discussion