🌴

Next.js + Typescript + Tailwind CSS + Eslint + Prettier セットアップ

2022/10/07に公開約11,300字

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

以下の初期設定について説明していきます。

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

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

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

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

create-next-app使用してTypeScriptプロジェクトを作成します。

Next.js公式

yarn create next-app --typescript

プロジェクト名を聞かれるので、今回はsampleとします。

sample上で以下のコマンドを実行

yarn dev

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

不要なファイルを削除

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

pages/_app.tsx
- import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
pages/api/hello.ts
ファイルごと削除
pages/index.tsx
import type { NextPage } from 'next'
- import Head from 'next/head'
- import Image from 'next/image'
- import styles from '../styles/Home.module.css'

- const Home: NextPage = () => {
  return (
-     <div className={styles.container}>
-       <Head>
-         <title>Create Next App</title>
-         <meta name="description" content="Generated by create next app" />
-         <link rel="icon" href="/favicon.ico" />
-       </Head>

-       <main className={styles.main}>
-         <h1 className={styles.title}>
-           Welcome to <a href="https://nextjs.org">Next.js!</a>
-         </h1>

-         <p className={styles.description}>
-           Get started by editing{' '}
-           <code className={styles.code}>pages/index.tsx</code>
-         </p>

-         <div className={styles.grid}>
-           <a href="https://nextjs.org/docs" className={styles.card}>
-             <h2>Documentation &rarr;</h2>
-             <p>Find in-depth information about Next.js features and API.</p>
-           </a>

-           <a href="https://nextjs.org/learn" className={styles.card}>
-             <h2>Learn &rarr;</h2>
-             <p>Learn about Next.js in an interactive course with quizzes!</p>
-           </a>

-           <a
-             href="https://github.com/vercel/next.js/tree/canary/examples"
-             className={styles.card}
-           >
-             <h2>Examples &rarr;</h2>
-             <p>Discover and deploy boilerplate example Next.js projects.</p>
-           </a>

-           <a
-             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-             className={styles.card}
-           >
-             <h2>Deploy &rarr;</h2>
-             <p>
-               Instantly deploy your Next.js site to a public URL with Vercel.
-             </p>
-           </a>
-         </div>
-       </main>

-       <footer className={styles.footer}>
-         <a
-           href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-         >
-           Powered by{' '}
-           <span className={styles.logo}>
-             <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-           </span>
-         </a>
-       </footer>
-     </div>
+ <div></div>
  )
}
pages/public/favicon.ico
ファイルごと削除
pages/public/vercel.svg
ファイルごと削除
pages/styles/Home.module.css
ファイルごと削除
pages/styles/globals.css
- html,
- body {
-   padding: 0;
-   margin: 0;
-   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
- }

- a {
-   color: inherit;
-   text-decoration: none;
- }

- * {
-   box-sizing: border-box;
- }

- @media (prefers-color-scheme: dark) {
-   html {
-     color-scheme: dark;
-   }
-   body {
-     color: white;
-     background: black;
-   }
- }

srcディレクトリを作成してpagesとstylesを移動する

※publicディレクトリは移動しません。

tsconfig.jsonを変更してルートディレクトリからのパスで直接インポート可能にする

相対パスだと見ずらいので、絶対パスでインポート可能になるように設定を追加します。

tsconfig.json
{
  "compilerOptions": {
+     "baseUrl": "."
  }
}

VScodeにも設定を追加(インポートしたときに絶対パスになる)

.vscode/settings.json
+ {
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+ }

Prettier導入

yarn add -D prettier

eslint-config-prettierも入れておく

後から導入するeslintとの競合を防ぐためのもの

yarn add -D eslint-config-prettier

eslint-config-prettierを有効化する

.eslintrc.json
{
-   "extends": "next/core-web-vitals"
+   "extends": ["next/core-web-vitals","prettier"]
}

VSCodeの設定ファイルに設定を追加

.vscode/settings.json
{
"javascript.preferences.importModuleSpecifier": "non-relative",
+   "editor.formatOnSave": true,
+   "editor.defaultFormatter": "esbenp.prettier-vscode"
}

ESLintのプラグインを導入

eslint-plugin-sort-keys-custom-order

typeやobjectのキーを自動でソートしてくれるプラグイン

yarn add -D eslint-plugin-sort-keys-custom-order

設定を追加する

.eslintrc.json
{
+   "plugins": ["sort-keys-custom-order"],
  "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"] }
+      ]
  }
}
.vscode/settings.json
{
    "javascript.preferences.importModuleSpecifier": "non-relative",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
+   "editor.codeActionsOnSave": ["source.fixAll.eslint"]
}

https://github.com/hugoattal/eslint-plugin-sort-keys-custom-order

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の導入

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
-   content: [],
+   content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
globals.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

追加することで文字を1文字打つたびに補完を出してくれる。

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

yarn add -D eslint-plugin-tailwindcss

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

.eslintrc.json
{
  "plugins": [
    "sort-keys-custom-order",
    "simple-import-sort",
    "import",
    "unused-imports",
+     "tailwindcss"
  ],
  "extends": [
    "next/core-web-vitals",
    "prettier",
+     "plugin:tailwindcss/recommended"
  ],
  "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"
  },
+   "settings": {
+     "tailwindcss": {
+       "groupByResponsive": true,
+       "whitelist": []
+     }
+   }
}

プラグインを追加

@tailwindcss/typography

見た目をいい感じにしてくれるプラグイン

yarn add -D @tailwindcss/typography

@tailwindcss/forms

フォーム要素のスタイルを上書きして、デフォルトのフォームスタイルを提供してくれる。

yarn add -D @tailwindcss/forms

@tailwindcss/line-clamp

指定した行数でテキストを切り捨てて省略して表示することができる。

yarn add -D @tailwindcss/line-clamp

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

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  plugins: [
+     require("@tailwindcss/typography"),
+     require("@tailwindcss/forms"),
+     require("@tailwindcss/line-clamp"),
  ],
  theme: {
    extend: {},
  },
};

Discussion

ログインするとコメントできます