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

16274 ワード
テキストリンク

作成環境

対象 バージョン
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;
emotionを使った逆再生アニメーションの実装方法について ～cssプロパティとjavascriptのanimateメソッドを比較して～
ports.ubuntu.com のミラーサイトを探せ