【Next.js 15】App Router + Tailwind CSS + Eslint + Prettier セットアップ
今回はNext.jsの初期セットアップ方法についてまとめます。
以下について説明します。
- Next.js
- Typescript
- Tailwindcss
- ESlint
- Prettier
また、個人的に最低限導入したほうがいいと思ったESlintのプラグインや各設定についても紹介します。
※Tailwindcssを導入しない場合は、最後の章は飛ばしていただいて問題ありません。
Next.jsのプロジェクトの作成
まずはプロジェクトを作成します
npx create-next-app@latest
Ok to proceed? → y
What is your project named? → 任意のプロジェクト名
Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Tailwindを使用する場合はYes
Would you like your code inside a src/ directory? → Yes
Would you like to use App Router? (recommended) → Yes
Would you like to use Turbopack for next dev? → Yes
Would you like to customize the import alias (@/* by default)? → Yes
What import alias would you like configured? → @/*でそのままEnter
sample上で以下のコマンドを実行
yarn dev or npm run dev
サーバを立ち上げて、デフォルト画面が表示されれば完了です。
不要なファイルを削除
デフォルトページなどは必要ありませんので、ここで必要のないものは削除しておきます。
不要な記述は削除して以下の状態にする
export default function Home() {
return <div>Hello World</div>;
}
不要な記述は削除して以下の状態にする
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "タイトルがはいります",
description: "説明文がはいります",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}
不要な記述は削除して以下の状態にする
@tailwind base;
@tailwind components;
@tailwind utilities;
ファイルごと削除
ファイルごと削除
ファイルごと削除
ファイルごと削除
ファイルごと削除
ファイルごと削除
src配下にcomponentsディレクトリを作成して、src/componentsとする
VScodeに必要な設定を追加
+ {
+ // 使用するフォーマッターを `prettier` に設定（VSCode 拡張 `esbenp.prettier-vscode`）
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ // 保存時に自動でコードフォーマットを適用
+ "editor.formatOnSave": true,
+ // 貼り付け時に自動でコードフォーマットを適用
+ "editor.formatOnPaste": true,
+ // 保存時に不足している `import` を明示的に追加
+ "editor.codeActionsOnSave": {
+ "source.addMissingImports": "explicit"
+ },
+ // JavaScript の `import` 文のモジュール指定を相対パスではなく、非相対（絶対パスやエイリアス）にする
+ "javascript.preferences.importModuleSpecifier": "non-relative",
+ // TypeScript の `import` 文のモジュール指定を相対パスではなく、非相対（絶対パスやエイリアス）にする
+ "typescript.preferences.importModuleSpecifier": "non-relative"
+ }
Prettier導入
npm i -D prettier
eslint-config-prettierも入れておく
後から導入するeslintとの競合を防ぐためのもの
npm i -D eslint-config-prettier
eslint-config-prettierを有効化する
const eslintConfig = [
- ...compat.extends("next/core-web-vitals", "next/typescript"),
+ ...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),
];
ESLintのプラグインを導入
eslint-plugin-simple-import-sort
import/exportを自動でソートしてくれるプラグイン
yarn add -D eslint-plugin-simple-import-sort
設定を追加
{
- "plugins": ["sort-keys-custom-order"],
+ "plugins": ["sort-keys-custom-order", "simple-import-sort"],
"extends": ["next/core-web-vitals", "prettier"],
"rules": {
// For JS objects sorting
"sort-keys-custom-order/object-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
// For TS types sorting
"sort-keys-custom-order/type-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
+ "simple-import-sort/imports": "error",
+ "simple-import-sort/exports": "error"
}
}
eslint-plugin-import
eslint-plugin-simple-import-sortと組み合わせて使うことによって機能を拡張する
yarn add -D eslint-plugin-import
設定を追加
{
- "plugins": ["sort-keys-custom-order", "simple-import-sort"],
+ "plugins": ["sort-keys-custom-order", "simple-import-sort", "import"],
"extends": ["next/core-web-vitals", "prettier"],
"rules": {
// For JS objects sorting
"sort-keys-custom-order/object-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
// For TS types sorting
"sort-keys-custom-order/type-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
+ "import/first": "error",
+ "import/newline-after-import": "error",
+ "import/no-duplicates": "error"
}
}
eslint-plugin-unused-imports
使用していないものを削除したり、足りないものを自動で追加してくれるプラグイン
yarn add -D eslint-plugin-unused-imports
設定を追加
{
- "plugins": ["sort-keys-custom-order", "simple-import-sort", "import"],
+ "plugins": ["sort-keys-custom-order", "simple-import-sort", "import","unused-imports"],
"extends": ["next/core-web-vitals", "prettier"],
"rules": {
// For JS objects sorting
"sort-keys-custom-order/object-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
// For TS types sorting
"sort-keys-custom-order/type-keys": [
"error",
{ "orderedKeys": ["id", "name", "title"] }
],
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
"import/first": "error",
"import/newline-after-import": "error",
"import/no-duplicates": "error",
+ "unused-imports/no-unused-imports": "error"
}
}
vscodeの設定を追加してimportすべきものがあった場合に、自動で追加してくれるようにする。
{
"javascript.preferences.importModuleSpecifier": "non-relative",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": [
+ "source.addMissingImports",
"source.fixAll.eslint"
]
}
Tailwind CSS
esLintプラグイン
eslint-plugin-tailwindcss
tailwindcssの記述を自動で整えてくれるようになる
npm i -D eslint-plugin-tailwindcss
const eslintConfig = [
...compat.extends(
'next/core-web-vitals',
'next/typescript',
'prettier',
+ 'plugin:tailwindcss/recommended',
),
]
Tailwind プラグイン
@tailwindcss/typography
見た目をいい感じにしてくれるプラグイン
npm i -D @tailwindcss/typography
@tailwindcss/forms
フォーム要素のスタイルを上書きして、デフォルトのフォームスタイルを提供してくれる。
npm i -D @tailwindcss/forms
@tailwindcss/line-clamp
指定した行数でテキストを切り捨てて省略して表示することができる。
npm i -D @tailwindcss/line-clamp
上記３つのプラグインを設定ファイルに追加
plugins: [typography,forms,line-clamp],
Discussion