毎回Nextの初期設定をするのですが、何回も他のサイトを見るのも大変なので、
自分用にまとめました🙌
読んでみて、もっと効率良い方法あるよ！
便利な方法あるよ！という方はコメントで教えていただけると幸いです🙏
目次
ディレクトリの変更に関してですが、
Nextのバージョンによっては、srcディレクトリを最初に作るか聞かれるので
そちらで作成していただく方が楽です！
また、本記事の設定で作成したテンプレートリポジトリもありますので
そちらを使われたい方はどうぞ！
Nextアプリの作成
後でアプリ名を聞かれるので、アプリ名の入力は必要ないです！
ターミナル
# npm
npx create-next-app@latest --ts
# yarn
yarn create next-app --typescript
prettierの設定
ここはコードの好みに関する部分です。
クォートをダブルクォートにするか、シングルクォートにするか
みたいな話になります。
インストール
ターミナル
# npm の場合
npm install -D prettier eslint-config-prettier
# yarn の場合
yarn add -D prettier eslint-config-prettier
.prettierrcの設定
.prettierrc
{
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true
}
| 項目 | はたらき |
|---|---|
| "semi": false | セミコロンを外す |
| "singleQuote": true | TSファイルのシングルクォートを有効にする （ダブルクォートを強制的に変更する） |
| "jsxSingleQuote": true | jsx(tsx)ファイルのシングルクォートを有効にする（同上） |
lintとprettierの衝突回避
.eslintrc.json
{
"extends": ["next/core-web-vitals", "prettier"]
}
"prettier"を追記
.prettierignoreの設定
CSSは整形してほしくないので、ここに記述し、除外
.prettierignore
*.css
tailwindCSSの導入
tailwindCSSをよく使うので、残してます！
使いたい人だけ使ってください！
インストール
ターミナル
# npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# yarn
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p
パスの追加
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
componentがない場合は、記載なしでOK
tailwindのprettier追加
tailwindCSSにも便利なprettierがあります。
追加したい場合は、prettierのインストールが済んでいれば
以下のコマンドのみでOKです！
ターミナル
yarn add -D prettier-plugin-tailwindcss
もしprettier自体も設定していない場合は
以下のコマンドです。
ターミナル
yarn add -D prettier prettier-plugin-tailwindcss
ディレクトリ構成を変更していた場合
pagesを大元のディレクトリではなく、srcの直下に
pages, componentsを置いた場合に使ってください！
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
globals.cssに追記
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
ディレクトリ構成の変更
pagesを大元のディレクトリではなく、どうしてもsrcの直下に
pages, componentsを置きたい場合に使ってください！
Nextのバージョンによっては、srcディレクトリを最初に作るか聞かれるので
そちらで作成していただいても構いません。
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",
"incremental": true,
// 暗黙のany型（何も型定義がない場合に勝手anyにすること）を禁止
"noImplicitAny": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
MaterialUIの導入
シンプルな導入
ターミナル
# npm
npm install @mui/material @emotion/react @emotion/styled
# yarn
yarn add @mui/material @emotion/react @emotion/styled
styled-componentを使う場合
ターミナル
# npm
npm install @mui/material @mui/styled-engine-sc styled-components
# yarn
yarn add @mui/material @mui/styled-engine-sc styled-components
Material-Iconを使う場合
ターミナル
# npm
npm install @mui/icons-material
# yarn
yarn add @mui/icons-material
参考文献