Next.jsでプロジェクトを作成した際に共通でやること

ESLint

ESLintを設定します。Next.jsが用意している物を使用します。

package.jsonのスクリプトにlint追加します。

package.json

"scripts": {
  "lint": "next lint"
}

スクリプトを実行します。

npm run lint

いくつか選択肢が聞かれるので、「Strict (recommended)」を選択します。

.eslintrc.jsonを編集して、eslint:recommendedを追加します。

.eslintrc.json

{
  "extends": ["eslint:recommended", "next/core-web-vitals"]
}

hirotaka

Prettier

Prettierの設定ファイルを作成。

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2
}

hirotaka

Tailwindcssのセットアップ

tailwindcssをセットアップします。

npm install --save-dev tailwindcss postcss autoprefixer

設定ファイルを生成します。

npx tailwindcss init -p

tailwind.config.jsを編集します。

tailwind.config.js

module.exports = {
-  purge: [],
+ purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

styles/global.cssを下記の内容に書き換えます。

@tailwind base;
@tailwind components;
@tailwind utilities;

pages/index.jsとstyles/Home.module.cssは削除します。

rm pages/index.js styles/Home.module.css

pages/index.tsxを作成して、内容は下記の通りにします。

pages/index.tsx

export default function Home() {
  return (
    <div>
      <h1 className="text-red-500">Hello, World!</h1>
    </div>
  );
}

「Hello, World!」が赤文字で出力できればセットアップ完了です。

hirotaka

Emacsでlsp-modeを使っていると、インデントが4になってしまう。

tsfmt.jsonを追加します。

tsfmt.json

{
  "tabSize": 2,
  "indentSize": 2,
  "convertTabsToSpaces": true
}

hirotaka

階層をあげておいておけば、配下のプロジェクトに反映されるみたい。

このスクラップは2021/10/01にクローズされました