🀄

Next.js × Vercel × ESLint × Prettier × Tailwind CSSの環境構築

9 min read

概要

ここでは、Next.jsの環境構築方法についてまとめます。
基本的に備忘録ですが、誰かの参考になったらと思い、Zennに執筆しています。

間違いやベタープラクティスがあったら教えて下さい。

使用技術

  • Next.js(JavaScript)
  • Vercel
  • ESLint
  • Prettier
  • Tailwind CSS

前提

以下はすでにインストール済み/アカウント作成済みとして進めます。

  • Git
  • GitHub
  • Node.js
  • yarn(npmでも問題ありませんが、ここではyarnで進めます)

環境構築方法

基本セットアップ

GitHubにリポジトリを作成

これはそのままです。任意の名前でリポジトリを作成してください。

ローカルにプロジェクトを作成

以下のコマンドを入力して、Next.jsのプロジェクトを作成します。

yarn create next-app プロジェクト名 

プロジェクトを立ち上げる

以下コマンドを入力します。

yarn dev

http://localhost:3000/に接続し、以下のように表示されたら、成功です。

不要ファイルの削除

いらないファイルを削除し、ディレクトリを整理します。

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
ファイルごと削除

srcディレクトリを追加

Next.jsはsrcディレクトリに対応しているので、srcディレクトリをルートディレクトリ直下に作成しpagesディレクトリをその中に移動する。

またcomponentsディレクトリをsrcディレクトリ直下に作成する。

_document.jsファイルを作成

pagesディレクトリ直下に_document.jsを作成する。コードは以下の通り。

src/pages/_document.js
import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <html>
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

jsconfig.jsonファイルを作成

ルートディレクトリにjsconfig.jsonを追加し、以下のように修正

jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./"
  }
}

Tailwind CSSの導入(必要な場合のみ)

Tailwind CSSをインストール

以下コマンドで、Tailwind CSSをインストールします。

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

インストールが完了したらtailwind.config.js、postcss.config.jsを作成します。

$ npx tailwindcss init -p

tailwind.config.jsを修正

tailwind.config.jsを以下のように修正

tailwind.config.js
module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: { // カラーは好きなように定義する
      white: "#ffffff",
      light_gray: "#f9f9f9",
      navy: "#585E74",
      blue: "#519CC6",
      red: "#de3618",
    },
    fontFamily: { // フォントは好きなように定義する
      ja: ["Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", "sans-serif"],
      en: ["Avenir Next", "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "sans-serif"],
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.jsを修正

post.config.js
module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer',
  ],
}

global cssにTailwind CSSを読み込む

global cssにTailwind CSSを読み込むため、以下のコードを記述する。

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

bodyタグにfont-familyとline-heightのクラスを指定する

Tailwind CSSではline-heightの初期値が1.5なので、htmlタグにleading-relaxedクラスを指定して、line-heightを1.625に変えます。

ついでにサイト全体のフォントも指定します(ここではfont-ja)。font-jatailwind.confing.jsで定義したものです。

font-[定義したキー名]でクラス名として使用することができます。

_document.js
import Document, { Head, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
-    <html>
-+    <html className="font-ja leading-relaxed">
+        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

ESLintの導入

.eslintrc.jsonを編集

以下のように.eslintrc.jsonを修正

.eslintrc.json
{
  "extends": ["next", "next/core-web-vitals"]
}

package.jsonを編集

ESLintでは、lintコマンドの対象ディレクトリが以下3つに限定されているため、next lint --dir srcsrcを対象ディレクトリに変更する。

  • pages
  • lib
  • components
package.json
{
  "name": "test",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-   "lint": "next lint"
+   "lint": "next lint --dir src"
  },
  "dependencies": {
    "next": "12.0.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7",
    "eslint-config-next": "12.0.2"
  }
}

Prettierの導入

vscodeの拡張機能をインストール

Prettierの拡張機能をインストールしておく。

.prettierrcを作成

ルートディレクトリに.prettierrcを新規で作成し、以下のように編集

.prettierrc
{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "printWidth": 200
}

prettier eslint-config-prettierをインストール

以下のコマンドで、prettiereslint-config-prettierをインストールする。

yarn add -D prettier eslint-config-prettier

それぞれの役割は以下の通り。
prettier:各ファイルをコマンドで、フォーマットできるようにするため
eslint-config-prettier:ESLint と Prettier のコード整形がバッティングしないようするため

.eslintrc.jsonを修正

ESLint と Prettier のコード整形がバッティングしないようにするため、.eslintrc.jsonを以下のように修正。

.eslintrc.json
{
-  "extends": ["next", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals", "prettier"]
}

package.jsonを修正

package.json
{
  "name": "test",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
+    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
  },
  ...

.vscodeディレクトリを作成 & settings.jsonを作成、編集

プロジェクトのルートディレクトリに.vscodeディレクトリを作成し、その中にsetting.jsonを作成する。

その後、settings.jsonを以下のように編集する。

.vscode/settings.json
{
  // デフォルトのフォーマッタを prettier に設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時、prettier による自動フォーマット
  "editor.formatOnSave": true,
  // ファイル保存時、ESLint による自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // jsファイルでもEmmetを有効化
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

GitHubにpush

ここまでの作業を終えたらGitHubにpushしましょう。

VercelでデプロイするためにはGitHubにデプロイしてあることが必要となります。

Vercelにデプロイ

公式ドキュメントに従えば、簡単にできるかと思います(サボりですいません)。

https://nextjs-ja-translation-docs.vercel.app/docs/deployment

Discussion

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