🐙

[随時更新] Next.jsのプロジェクト構築まとめ

2022/05/09に公開約3,100字

作成環境

対象 バージョン
Node 16.5.0
TypeScript 4.6.4
Next 12系
React 18系

目次

  1. Next.jsリポジトリの作成
  2. ディレクトリ構成の変更
  3. PrettierとESLintの設定
  4. Jestの導入
  5. TailwindCSSの導入
    scaffdog
    ErrorBoundary
    nprogress

1.Next.jsリポジトリの作成

Next.js公式サイトを参考に下記コマンドを実行してTypeScript標準搭載のリポジトリを作成します。

コマンド
npx create-next-app@latest next-template-app --ts

サーバー起動したらOK

コマンド
cd next-template-app
yarn dev

2.ディレクトリ構成の変更

after
next-template-app
├ public # 画像などの静的ファイル
├ src
│ ├── components
│ ├── hooks
│ ├── pages
│ ├── styles # cssなど
│ └── utils # 共通関数などtest
・・・
tsconfig.json
{
 "compilerOptions": {
   ...
   "baseUrl": ".",
   "paths": {
     "@/*": ["src/*"],
     "~/*": ["./*"],
   },
 },
 "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
 "exclude": ["node_modules"]
}

3.PrettierとESLintの設定

Next11系からはデフォルトでeslint-config-nextというライブラリが入っており、eslintに必要なライブラリのインストールが不要です。(微調整したい場合はインストールの必要が出てきます。)

コマンド
yarn add -D prettier
.prettierrc
{
  "tabWidth": 2,
  "printWidth": 150,
  "semi": false,
  "singleQuote": true,
  "bracketSpacing": true,
  "trailingComma": "es5",
  "arrowParens": "always",
  "jsxBracketSameLine": false
}
.eslintrc
{
  "extends": "next/core-web-vitals"
  // 追加で必要な設定を記述
}

下記コマンドでlintが実行されます。

コマンド
yarn lint

4.Jestの導入

コマンド
yarn add -D jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

TypeScriptでJestを使用する際は、ts-jest@types/jestのインストールが必要になりますが、next/jestプラグインを介す場合はこれらのインストールは不要です。

src/__test__/Home.test.tsx
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import Home from '../pages/index'

it('Should render Home text', () => {
  render(<Home />)
  screen.debug() // 表示されているDOMを返す
  expect(screen.getByText('Home')).toBeInTheDocument()
})

5.TailwindCSSの導入

TailwindCSS
公式ドキュメント

コマンド
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
コマンド
npx tailwindcss init -p

TailwindCSSの設定ファイルを記述します。僕のtailwind.config.jsのテンプレートです。

tailwind.config.js
module.exports = {
  purge: ['./src/**/*.tsx'], // allow
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        body: '#DCDDD8',
        accent: '#D74B4B',
        link: '#3366FF',
        navy: '#475F77',
        white: '#FFF',
      },
      screens: {
        sm: { max: '640px' }, // ~sp
        md: { min: '768px' }, // pc~
        lg: { min: '1024px' },
        xl: { min: '1280px' },
      },
    },
  },
  variants: {
    extend: {
      padding: ['hover'],
    },
  },
  plugins: [],
}

cssファイルを作成します。僕のglobals.cssのテンプレートです。

src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Discussion

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