🚀

【Next.js 15】App Router + Tailwind CSS + Eslint + Prettier セットアップ

2022/10/07に公開

今回はNext.jsの初期セットアップ方法についてまとめます。

以下について説明します。

  • Next.js
  • Typescript
  • Tailwindcss
  • ESlint
  • Prettier

また、個人的に最低限導入したほうがいいと思ったESlintのプラグインや各設定についても紹介します。

※Tailwindcssを導入しない場合は、最後の章は飛ばしていただいて問題ありません。

Next.jsのプロジェクトの作成

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

サーバを立ち上げて、デフォルト画面が表示されれば完了です。

不要なファイルを削除

デフォルトページなどは必要ありませんので、ここで必要のないものは削除しておきます。

不要な記述は削除して以下の状態にする

src/app/page.tsx
export default function Home() {
  return <div>Hello World</div>;
}

不要な記述は削除して以下の状態にする

src/app/layout.tsx
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>
  );
}

不要な記述は削除して以下の状態にする

src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
src/app/favicon.ico
ファイルごと削除
public/file.svg
ファイルごと削除
public/globe.svg
ファイルごと削除
public/next.svg
ファイルごと削除
public/vercel.svg
ファイルごと削除
public/window.svg
ファイルごと削除

src配下にcomponentsディレクトリを作成して、src/componentsとする

VScodeに必要な設定を追加

.vscode/settings.json
+ {
+   // 使用するフォーマッターを `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を有効化する

.eslintrc.json
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

設定を追加

.eslintrc.json
{
-   "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"
  }
}

https://github.com/lydell/eslint-plugin-simple-import-sort

eslint-plugin-import

eslint-plugin-simple-import-sortと組み合わせて使うことによって機能を拡張する

yarn add -D eslint-plugin-import

設定を追加

.eslintrc.json
{
-   "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"
  }
}

https://github.com/import-js/eslint-plugin-import

eslint-plugin-unused-imports

使用していないものを削除したり、足りないものを自動で追加してくれるプラグイン

yarn add -D eslint-plugin-unused-imports

設定を追加

.eslintrc.json
{
- "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すべきものがあった場合に、自動で追加してくれるようにする。

.vscode/settings.json
{
    "javascript.preferences.importModuleSpecifier": "non-relative",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": [
+     "source.addMissingImports",
    "source.fixAll.eslint"
  ]
}

https://github.com/sweepline/eslint-plugin-unused-imports

Tailwind CSS

esLintプラグイン

eslint-plugin-tailwindcss

tailwindcssの記述を自動で整えてくれるようになる

npm i -D eslint-plugin-tailwindcss
.eslintrc.json
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

上記3つのプラグインを設定ファイルに追加

tailwind.config.js
plugins: [typography,forms,line-clamp],

Discussion