🚀

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

2022/10/07に公開

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

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

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

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

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

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

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

Next.js公式

yarn create next-app --typescript

プロジェクトの名前は何ですか?→sample
ESLintを使用しますか?→Yes
src/ ディレクトリを使用しますか?→Yes
実験的な app/ ディレクトリを使用しますか→No
インポート エイリアスを設定→そのままEnter

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

yarn dev

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

不要なファイルを削除

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

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

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

- const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
- <Head>
- <title>Create Next App</title>
- <meta name="description" content="Generated by create next app" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="icon" href="/favicon.ico" />
- </Head>
- <main className={styles.main}>
- <div className={styles.description}>
- <p>
- Get started by editing&nbsp;
- <code className={styles.code}>src/pages/index.tsx</code>
- </p>
- <div>
- <a
- href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-               target="_blank"
-               rel="noopener noreferrer"
- >
-               By{' '}
-               <Image
-                 src="/vercel.svg"
-                 alt="Vercel Logo"
-                 className={styles.vercelLogo}
-                 width={100}
-                 height={24}
-                 priority
-               />
-             </a>
-           </div>
-         </div>

-         <div className={styles.center}>
-           <Image
-             className={styles.logo}
-             src="/next.svg"
-             alt="Next.js Logo"
-             width={180}
-             height={37}
-             priority
-           />
-           <div className={styles.thirteen}>
-             <Image
-               src="/thirteen.svg"
-               alt="13"
-               width={40}
-               height={31}
-               priority
-             />
-           </div>
-         </div>

-         <div className={styles.grid}>
-           <a
-             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-             target="_blank"
-             rel="noopener noreferrer"
-           >
-             <h2 className={inter.className}>
-               Docs <span>-&gt;</span>
-             </h2>
-             <p className={inter.className}>
-               Find in-depth information about Next.js features and&nbsp;API.
-             </p>
-           </a>

-           <a
-             href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-             className={styles.card}
-             target="_blank"
-             rel="noopener noreferrer"
-           >
-             <h2 className={inter.className}>
-               Learn <span>-&gt;</span>
-             </h2>
-             <p className={inter.className}>
-               Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-           </a>

-           <a
-             href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-             className={styles.card}
-             target="_blank"
-             rel="noopener noreferrer"
-           >
-             <h2 className={inter.className}>
-              Templates <span>-&gt;</span>
-             </h2>
-             <p className={inter.className}>
-               Discover and deploy boilerplate example Next.js&nbsp;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}
-             target="_blank"
-             rel="noopener noreferrer"
-           >
-             <h2 className={inter.className}>
-               Deploy <span>-&gt;</span>
-             </h2>
-             <p className={inter.className}>
-               Instantly deploy your Next.js site to a shareable URL
-               with&nbsp;Vercel.
-             </p>
-           </a>
-         </div>
-       </main>
+ <div></div>
    </>
  )
}
pages/public/favicon.ico
ファイルごと削除
pages/public/next.svg
ファイルごと削除
pages/public/thirteen.svg
ファイルごと削除
pages/public/vercel.svg
ファイルごと削除
pages/styles/Home.module.css
ファイルごと削除
pages/styles/globals.css
// 中身を全て削除

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