Next.js+TypeScript+自動コードフォーマットの環境構築手順

以下の仕様のNext.jsアプリケーションの作成手順について紹介します。

Create Next AppでNext.jsの雛形を作成

今回はTypeScriptベースのNext.jsアプリケーションを作成するため、--typescriptオプションを追加します。

$ yarn create next-app next-example --typescript
$ cd next-example

ディレクトリ構成の変更

Next.jsはsrc/pagesというディレクトリ構成に対応しています¹。
今回はsrcディレクトリを作成し、その配下に既存のpagesディレクトリを移動します。

$ mkdir src
$ mv pages src

stylesのパスを修正

pagesのファイルに記載されているstylesのパスを変更します。

_app.tsx

- import '../styles/globals.css'
+ import '../../styles/globals.css'

index.tsx

- import styles from '../styles/Home.module.css'
+ import styles from '../../styles/Home.module.css'

自動コードフォーマット

パッケージを利用するとコミットのタイミングでコードフォーマットが自動で実行されます。
Create React Appの公式ドキュメントで紹介されている方法²をベースに、自動コードフォーマット環境を作成します。

今回huskyは4系を利用するためhusky@4とバージョンを明記しています。

$ yarn add husky@4 lint-staged prettier

package.jsonに以下の部分を追加します。

package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "{src,styles}/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write"
  ]
},

起動確認

yarn dev実行後、localhost:3000にアクセスして画面が表示されればOKです。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！