🔥

Next.js最速セットアップ

2021/03/19に公開

Next.js

はじめに

最近Next.jsが話題になることや、使われることが増えてきましたね。
個人的にも実務でも個人開発でも愛用しています。
そこでこの記事では、基本的なNext.jsプロジェクトのセットアップ方法についてまとめてみたいと思います。

セットアップ手順

Create Next App
不要なファイルを削除
srcディレクトリを追加
TypeScript導入
ESLint導入
Prettier導入
Chakra UI導入
Jest導入
Renovate導入
Cypress導入
Storybook導入
hygen導入

Create Next App

まずはCreate Next App^[1]で雛形を作成しましょう。
ターミナルで以下のコマンドを入力します。

npx create-next-app <プロジェクト名>

必要であればこの段階でGitHubなどのリモートリポジトリと連携してください。（後にGitHub ActionsでCIを使用するところがあるので連携しておくとスムーズです）

またその後にデプロイまで行ってしまってもよいかもしれません。

ちなみにNext.jsを使用するならデプロイ先はVercel^[2]がおすすめです。（後にGitHub ActionsでVercelのPreview環境のE2Eテストをするところがあるのでデプロイしておくとスムーズです）
GUIでポチポチやるだけで簡単にNext.jsプロジェクトをデプロイでき、その後は特定のブランチ（デフォルトはmainブランチ）にpushすると自動的にデプロイされるため、CD環境も整備されます。
さらにPRごとに自動的にプレビュー環境を作成してくれるため、こちらも非常に便利です。

不要なファイルを削除

現段階でyarn devするとNext.jsのデフォルトページが表示されますが、このページは必要ないので諸々削除しておきましょう。

削除対象は以下です。

pages/_app.js

- import '../styles/globals.css'
-
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

pages/api/hello.js

ファイルごと削除

pages/index.js

- import Head from 'next/head'
- import styles from '../styles/Home.module.css'
-
export default function Home() {
  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <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.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <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}
-          >
-            <h3>Deploy &rarr;</h3>
-            <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{' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} - />
-        </a>
-      </footer>
+    <div>
+      <h1>Hello World!</h1>
    </div>
  )
}

public/favicon.ico

ファイルごと削除
代替ファイルがあれば差し替えでも可

public/vercel.svg

ファイルごと削除

styles/Home.module.css

ファイルごと削除

styles/globals.css

ファイルごと削除

`src`ディレクトリを追加

Next.jsはsrcディレクトリに対応しているので、srcディレクトリをルートディレクトリ直下に作成しpagesディレクトリをその中に移動しましょう。
ただしこれは好みもあると思うのでやらなくても問題ありませんが、これ以降の記事内のディレクトリ構成については適宜読み替えてください。

TypeScript導入

必要なパッケージをインストールします。

yarn add --dev typescript @types/react @types/node

以下のようなnpm scriptsをpackage.jsonに追加します。

package.json

"scripts": {
  "typecheck": "tsc --noEmit"
}

これでyarn typecheckでTypeScriptによる型チェックが可能になります。

src/pages/_app.jsとsrc/pages/index.jsの拡張子をtsxにリネームし、yarn devを実行してください。
Next.jsではプロジェクト内のファイルの拡張子をts、またはtsxにした状態でyarn devを実行すると、tsconfig.jsonなどの必要なファイルが自動生成されるようになっています。

最後に一部ファイルを修正します。（tsconfig.jsonの設定内容はお好みで変更・追加してください。）

src/pages/_app.tsx

+ import { AppProps } from 'next/app'

+ export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "baseUrl": "./"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

ESLint導入

※Next.js@11.0.0リリース以降にCreate Next Appを使用した場合はその時点で導入が完了しているので適宜必要な基本設定のみ行ってください。

Prettier導入

必要なパッケージをインストールします。

yarn add --dev --exact prettier

以下のようなnpm scriptsをpackage.jsonに追加します。

package.json

"scripts": {
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
}

これでyarn formatでPrettierによるフォーマットが可能になります。

以下のような.prettierrcを追加します。

.prettierrc

{
  "singleQuote": true,
  "semi": false
}

設定内容はお好みで変更・追加してください。

ここまででローカル環境ではフォーマットを実行するところまで完了したので、GitHub Actionsで実行した結果差分が発生すると失敗するようにしましょう。

以下の設定ファイルを追加してください。

.github/workflows/main.yml

name: Main

on: pull_request

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: 14.x
      - uses: actions/cache@v2
        with:
          path: ~/.cache/yarn
          key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
          restore-keys: ${{ runner.os }}-yarn-
      - name: Install dependencies
        run: yarn install --frozen-lockfile --prefer-offline
      - name: Run format
        run: yarn format
      - name: Check diff
        run: git diff --exit-code

この状態でGitHubでPRを作成するとPrettierが実行され、その結果差分が発生すると失敗すると思います。

Chakra UI導入

Chakra UI^[3]はUIコンポーネントライブラリです。
他に有名なUIコンポーネントライブラリいえばMaterial UIがありますね。
Chakra UIは実務で初めて使って以来お気に入りで個人開発でも愛用しています。

いくつかよいと思う点をあげると以下のような点があげられます。

Tailwind CSSインスパイアなユーティリティファーストのインターフェース
Pure TypeScriptなので補完もバッチリ
Stackコンポーネントのようなレイアウトが組みやすくなるコンポーネントの存在
デフォルトでもシンプルで癖のないデザイン
カスタマイズ性が非常に高く、デザインシステムの構築も可能であること
他にもあるのですが、もはやこれなしでコンポーネントを作成したくないレベルでお気に入りです。
詳細を書きすぎると本題から外れるのでこの辺にしておきますが、おすすめなのでぜひ使ってみてください。

さて本題に戻ってChakra UIを導入していきましょう。

まずはターミナルで以下のコマンドを入力して、Chakra UI導入に必要なパッケージをインストールします。

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons

公式のGetting Startedでは@chakra-ui/iconsは含まれておらず、インストールしなくても動作に問題はないのですが、よく使うため最初からインストールしています。

次にChakra Providerのセットアップを行います。

src/pages/_app.tsx

+ import { ChakraProvider } from '@chakra-ui/react'
import { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <ChakraProvider>
+      <Component {...pageProps} />
+    </ChakraProvider>
+  )
}

最後にsrc/pages/index.tsxで実際にChakra UIを使用して動作確認を行います。yarn devしてきちんとスタイルが当たっていればOKです。

src/pages/index.tsx

+ import { Box, chakra } from '@chakra-ui/react'
+ import React from 'react'

+ export default function HomePage() {
  return (
-    <div>
-      <h1>Hello World!</h1>
-    </div>
+    <Box>
+      <chakra.h1 color="tomato">Hello World!</chakra.h1>
+    </Box>
  )
}

Jest導入

Renovate導入

Renovateを導入してライブラリのアップデートがあった時に自動でPRを作成してもらえるようにしましょう。

まずは公式ドキュメントを参考にRenovateのGitHub Appをインストールしてください。

インストールが完了したら以下の設定ファイルを追加してください。

.github/renovate.json

{
 "extends": ["config:base"],
 "labels": ["dependencies"],
 "packageRules": [
   {
     "depTypeList": ["devDependencies"],
     "automerge": true
   }
 ],
 "timezone": "Asia/Tokyo",
 "schedule": ["every weekend"]
}

設定内容はお好みで変更・追加してください。
この設定ではdevDependenciesのライブラリについてはCIが通ったら自動的にマージされます。
またそれ以外のライブラリのアップデートについては週末に自動通知がくるようになっています。

Cypress導入

Storybook導入

hygen導入

おわりに

以上で典型的なNext.jsプロジェクトのセットアップは完了です。
少し大変ですが最初にここまで頑張っておくとかなりDXが上がると思いますので、ぜひ参考にしてみてください。
少し長くなりましたが参考になれば幸いです。

それではよいNext.jsライフを！

脚注