MENU

最新技術満載!2024年Next.js 14におけるeslint、prettier、shadcn/ui、Tailwind CSS開発環境セットアップ

この記事では、Next.js 14をベースに、eslint、prettier、shadcn/ui、そしてTailwind CSSを組み合わせ、開発者が最先端の技術を駆使した最新の開発環境を手に入れるための手順をご紹介します。
最新技術満載の2024年版Next.js 14開発環境のセットアップについて、一緒に探索していきましょう。

この記事の対象者
  • Next.jsの最新環境に興味ある方
  • フロントエンドの勉強を始めたいけど、やり方がわからない方
  • 最新のフロントエンドの環境を知りたい方
プロフィール
あいば
  1. 現役フルスタックエンジニア
  2. プレイングマネージャー
  3. テックリーダー
  4. 現職でエンジニアの採用、面接を実施中
目次

はじめに

実行環境

2024年1月時点になります。
現時点の筆者の環境はこちらです。
wsl2を使用しています。

$ node -v
v21.1.0
$ npm -v
10.2.0
$ cat /etc/os-release
NAME="Ubuntu"
VERSION="21.04 (Hirsute Hippo)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 21.04"
VERSION_ID="21.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=hirsute
UBUNTU_CODENAME=hirsute

またReact+Vite版の環境構築はこちらの記事で書いているので、viteを使用したい場合はこちらの記事を参考にしてください。

Next.jsのインストール&確認手順

インストール

はじめにNext.jsからインストールします。
2024年1月時点での最新版は14.1.0となりますので、@latestをつけて最新版をインストールします。

対話型のインストールになるためステップバイステップで解説していきます。

npx create-next-app@latest

続いてプロジェクト名を何にするか聞かれます。
任意の名前で良いです。
この手順では「next-app-2024」というプロジェクト名で進めていきます。

? What is your project named? › next-app-2024 #プロジェクト名を入力

Typescriptを使用するかを聞かれます。
「Yes」を選択します。

? Would you like to use TypeScript? › No / Yes #yesを選択

ESLintを使用するかを聞かれます。
「Yes」を選択します。

? Would you like to use ESLint? › No / Yes #yesを選択

Tailwind CSSを使用するかを聞かれます。
「Yes」を選択します。

? Would you like to use Tailwind CSS? › No / Yes #yesを選択

「srcディレクトリ」使用するかを聞かれます。
「Yes」を選択します。

? Would you like to use `src/` directory? › No / Yes #yesを選択

App Router使用するかを聞かれます。
「Yes」を選択します。

? Would you like to use App Router? (recommended) › No / Yes #yesを選択

インポートエイリアスを使用するかを聞かれます。
「Yes」を選択します。

? Would you like to customize the default import alias (@/*)? › No / Yes  #yesを選択

インポートエイリアスの文字列を何にするかを聞かれます。
デフォルトの「@/*」でよいため、そのままEnterを押します。

? What import alias would you like configured? › @/*  #そのままEnter

質問はこれで以上になります。
あとは勝手にインストールされるため待ちましょう。
以下のような画面になれば成功です。

✔ What is your project named? … next-app-2024
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /home/wsl-user/app/next-app-2024.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next


added 360 packages, and audited 361 packages in 27s

128 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created next-app-2024 at /home/wsl-user/app/next-app-2024

動作確認

続いて動作確認を行います。
以下のコマンドのようにディレクトリを移動して「npm run dev」をしましょう。

$ cd next-app-2024
$ npm run dev

> next-app-2024@0.1.0 dev
> next dev

   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000

 ✓ Ready in 1904ms

するとlocalhost:3000で開発サーバーが立ち上がるので、ブラウザでアクセスしてみてください。
以下の画面が出れば成功です。

人によっては白っぽくなっていると思いますが、端末の設定なので問題ないです。

ESLintのセットアップ

先期ほどNext.jsでESLintもインストールしているため、必要なプラグインだけを入れます。
ちなみにNext.jsをインストールしたパッケージは「next/core-web-vitals」というものになります。

こちらは以下のパッケージを内包しているため、足りないものだけを追加する形でインストールします。

ではないが足りないのかというとTypescriptのエラーが出力されませんので、そちらの設定を行います。

@typescript-eslint/eslint-pluginをインストール

以下のコマンドでインストールします。

npm install -D @typescript-eslint/eslint-plugin

予め作成されているESLintの設定ファイル「.eslintrc.json」に以下の内容を追加します。

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

これで設定は完了です。

Peritterのセットアップ

続いてPrettierのセットアップを行います。

インストール

以下のコマンドで必要なパッケージをインストールします。

npm install -D prettier eslint-config-prettier

Prettier用の設定ファイルを作成します。(手動で作成してもOK)

touch prettier.config.js

以下の内容を記述します。
特に色々設定せずにシンプルな設定で行きます。

/** @type {import("prettier").Config} */
const config = {
  semi: true,
  singleQuote: true,
};

export default config;

ESLintの設定ファイルのextendsの末尾に"prettier"を追記します。
このように記載することによりESLintとの競合を避けることができます。

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

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

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write --ignore-path .gitignore './src/**/*.{js,jsx,ts,tsx}'"
  },

インストール&設定は以上で完了です。

動作確認

以下のコマンドでprettierが正しく設定されているかを確認します。

エラーが出てしまっていますね。
最新版だとこのようなエラーがなぜ出ているのかわからないですが、回避策はあるので試していきます。

$ npm run format

> next-app-2024@0.1.0 format
> prettier --write --ignore-path .gitignore './src/**/*.{js,jsx,ts,tsx}'

(node:10593) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
[error] Invalid configuration for file "/home/wsl-user/app/next-app-2024/src/app/layout.tsx":
[error] Unexpected token 'export'

package.jsonの末尾に「"type": "module"」を追加します。
このようにすることにより先程のエラーが回避できます。

{
  "name": "next-app-2024",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write --ignore-path .gitignore './src/**/*.{js,jsx,ts,tsx}'"
  },
  "dependencies": {
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "lucide-react": "^0.315.0",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^6.19.1",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "eslint-config-prettier": "^9.1.0",
    "postcss": "^8",
    "prettier": "^3.2.4",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  },
  "type": "module"
}

再度試してみましょう。
するとうまくformtのスクリプトが実行されました。

$ npm run format

> next-app-2024@0.1.0 format
> prettier --write --ignore-path .gitignore './src/**/*.{js,jsx,ts,tsx}'

src/app/layout.tsx 516ms
src/app/page.tsx 19ms
src/components/ui/button.tsx 115ms
src/lib/utils.ts 15ms

以上でPrettierの設定は完了になります。

Tailwindcssのセットアップ

Tailwind CSSはNext.jsをインストールするときに選択すると選んでいれば特に設定は不要になります。

またTailwind CSSの環境をより整えたい方はESLint、Prettierの設定がありますので、以下の記事を参考にしてみてください。

shadcn/uiのセットアップ

インストール

以下のコマンドでインストールします。

npx shadcn-ui@latest init

以下の用に対話型で質問されるので1つずつ回答していきましょう。
スタイルを聞かれているのでここは「Default」を選択します。
設定後でも変更可能です。

? Which style would you like to use? › - Use arrow-keys. Return to submit.
❯   Default
    New York

基本の色を聞かれているのでここは「Slate」を選択します。
設定後でも変更可能です。

? Which color would you like to use as base color? › - Use arrow-keys. Return to submit.
❯   Slate
    Gray
    Zinc
    Neutral
    Stone

「Yes」を選択します。

? Would you like to use CSS variables for colors? › no / yes

すると勝手にインストールが始まります。
あれ?少し質問が少ない気がしますが、Next.jsだからでしょうか。

こちらの記事でReact+Viteの環境構築時にはもっと多く聞かれましたが、なにか仕様が違うんですかね?

✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Would you like to use CSS variables for colors? … no / yes

✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...

Success! Project initialization completed. You may now add components.

動作確認

とりあえず動作を確認してみます。
以下のコマンドでボタンコンポーネントをインストールします。

npx shadcn-ui@latest add button

すると以下のディレクトリ構成になります。

「page.tsx」の内容を以下に書き換えて動作するか確認してみます。

import { Button } from '@/components/ui/button';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Button>shadcnインストール完了!!</Button>
    </main>
  );
}

ちゃんとshadcn/uiのボタンコンポーネントが表示されました。
無事にインストールできているようです。

とめ: フロントエンド開発の未来への一歩

この記事では、2024年時点の最新版であるNext.js 14を中心に据え、eslint、prettier、shadcn/ui、そしてTailwind CSSを組み合わせた開発環境のセットアップ手順を詳細に解説しました。

最新技術の導入により、開発者はコードの品質向上と効率化を実現できます。
eslintやprettierを使用してコードの一貫性を確保し、shadcn/uiを利用して洗練されたUIコンポーネントを導入し、Tailwind CSSで柔軟かつ効率的なスタイリングを実現します。

これらのツールを駆使した最新の開発環境は、プロジェクトの成功に向けて重要な一歩となることでしょう。

2024年の技術状況に即した手順やベストプラクティスを踏まえ、本記事は読者がスムーズかつ確実に開発環境を構築できるようにサポートします。
次なるプロジェクトに向けて、最新技術との相性を考慮した開発環境を手に入れましょう

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次