Nextjsのプロジェクトを作成する際に自分がいつも行うセットアップをまとめてみました。
基本的にあったら困らない無難なものをまとめているので、プロジェクトによって臨機応変にカスタマイズはしています。
目次
- 開発環境
- Nextjsのプロジェクトを建てる
- 開発環境にPrettierをインストールする
- Huskyとlist-stagedで安心安全なコード整形を行う
- stylelintの設定
- Storybookのセットアップ
開発環境
開発環境のバージョン一覧、今回取り上げるもののみまとめています。
| バージョン | |
|---|---|
| node.js | 22.0.0 |
| prettier | 3.6.2 |
| husky | 9.1.7 |
| stylelint | 16.23.1 |
| storybook | 9.1.10 |
Nextjsのプロジェクトを建てる
基本的に必要なものしかないので全て追加します。（Tailwindは個人的な好み）
$ npx create-next-app@latest project-name --ts --tailwind --eslint --app --src-dir --turbopack
開発環境にPrettierをインストールする
$ npm i -D prettier eslint-config-prettier
eslint.config.mjsのdefineConfigにprettierを追加します。
/* existing codes... */
const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
'prettier', // ←ココ
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
'.next/**',
'out/**',
'build/**',
'next-env.d.ts',
]),
]);
.prettierrcの設定項目
{
"endOfLine": "lf",
"semi": true,
"singleQuote": true,
"jsxSingleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 60
}
.prettierignoreの設定項目
**/node_modules
**/git
package.json
package-lock.json
Huskyとlint-stagedで安心安全なコード整形を行う
npm i -D husky
npx husky init
.huskyディレクトリが作成されます。
pre-commitにPrettier実行コマンドを記述します。
- npm test
+ npx lint-staged
package.jsonにlint-stagedで実行したいコマンドを記述します。
"lint": "next lint",
"prepare": "husky"
},
+ "lint-staged": {
+ "**/*": "prettier --write --ignore-unknown"
+ },
stylelintの設定
stylelintとstylelint-config-tailwindcssを追加しコンフィグファイルの設定を行います。
npm i -D stylelint stylelint-config-tailwindcss
npm init stylelint
生成された.stylelintrc.jsonにtailwind用のプラグインを追加します。
{
"extends": [
"stylelint-config-standard",
+ "stylelint-config-tailwindcss"
]
}
.jsonとか.tsxでstylelintのエラーを出されても意味が無いので、.css以外を無視するように設定します。
/node_modules
/.next
*.*
!*.css
Storybookのセットアップ
UIテストのためStorybookを導入します。
個人開発でも意外と便利だったり...
Dev環境の手元で再現/表示するのが面倒なコンポーネントを確認するのに使ったりします。
npx storybook@latest init
別ターミナルでStorybookのローカルサーバーを起動します。
npm run storybook
/src配下に生成された/storiesディレクトリは不要なので削除します。
以上でプロジェクトのセットアップは完了です。
この後はお好みのサーバーサイドプロジェクトと連携して使えます。
あとがき
これでいい感じにセットアップできたのかなと思います。
他にもMSW、CopilotやClaude用の指示書の追加とかできることありますが今回はこの辺で。
あとはお好みでディレクトリ構成をカスタマイズしてあなたにあったWEBアプリ開発を楽しみましょう。