Next.js15 + NextUI + α 環境構築手順をまとめる

ずお（エンジニア）

2025.01.16

IT技術

Next.js

はじめに

皆様こんにちは、愛媛県の田舎町からひっそり活動しているフロントエンドエンジニアのずおです。
この記事では、新しくリリースされたNext.js15とNextUIをベースとしたフロントエンドの環境構築手順を備忘録的に残したいと思います。

導入した主要なライブラリ(※eslintやprettierのプラグイン、types周りなどは省いています)、およびバージョンは下記の通りです。

ライブラリ名	バージョン
nextjs	15.1.0
react	19.0.0
react-dom	19.0.0
tailwindcss	3.4.16
nextui	2.6.8
framer-motion	11.13.5
typescript	5.7.2
eslint	9.16.0
prettier	3.4.2
husky	9.1.7
lint-staged	15.2.11

Next.jsインストール

まずは土台のNext.jsをインストールします。
下記コマンドで、プロンプトに沿って、構築に必要なパッケージを自動でインストールすることができます。

1npx create-next-app@latest

プロンプト

1What is your project named? my-app
2Would you like to use TypeScript? No / Yes
3Would you like to use ESLint? No / Yes
4Would you like to use Tailwind CSS? No / Yes
5Would you like your code inside a `src/` directory? No / Yes
6Would you like to use App Router? (recommended) No / Yes
7Would you like to use Turbopack for `next dev`?  No / Yes
8Would you like to customize the import alias (`@/*` by default)? No / Yes
9What import alias would you like configured? @/*

TSやESLint、tailwindまで自動でインストールしてくれるのは、とてもありがたいですね。

サーバーを起動して問題なく立ち上がるかを確認します。

1npm run dev

余談ですが、Next.js15では、Turbopackがstableとなり、package.jsonのscriptsにデフォルトでturbopackのオプションがつくようになっていました。

1// package.json
2...
3  "scripts": {
4    "dev": "next dev --turbopack",
5...

ローカルサーバーの起動の高速化や、高速なコード更新などが実現したようです。開発効率が爆上がりです🚀
詳細は下記をご覧ください。
Turbopack Dev is Now Stable

サーバーが問題なく起動したことを確認し、次に進みます。

voltaでNode.jsのバージョン管理

チームで開発を行うためには、バージョン管理は必要なものと考えています。
そのため、voltaを用いてNode.jsのバージョンを管理します。
下記実行で最新のLTSバージョンがインストールされます(最近LTSになったnode22系を使ってみる)

1volta install node

次に、他の開発者の方のためにバージョンのピン留めをします。

1volta pin node

成功するとpackage.jsonに保存されます。

1// package.json
2...
3  "volta": {
4    "node": "22.12.0"
5  }
6...

以上で設定は終わりです。

NextUIインストール

次に、最近噂のNextUIをインストールします。
個人的には、慣れるととても使いやすいと思います。
MUIなどと比較すると、提供しているUIコンポーネントの数自体は少ないですが、
tailwindをベースに開発でき、カスタマイズも可能（結構慣れるのには苦労しました）かつオシャレというとても良きUIライブラリです。
ちなみにNextUIは、Vercelが開発したものではありません。

ではインストールします。v2.6ではReact19およびNext.js15をサポートしているとのことなので問題なさそうです。

1npm install @nextui-org/react framer-motion

インストールが完了したら、設定周りを行います。

tailwind.config.ts

nextuiをimportして、プラグインに挿入します。

1// tailwind.config.ts
2import { nextui } from "@nextui-org/react";
3export default {
4  content: [
5    ...
6    "./node_modules/@nextui-org/theme/dist/*/*.{js,ts,jsx,tsx}",
7  ],
8...
9plugins: [nextui()],
10}

プロバイダ設定

後々のことを考え、providersファイルを作成して、NextUIProviderを読み込み、ルートレイアウトに渡してあげます。

1// providers.tsx
2"use client"
3
4import { NextUIProvider } from "@nextui-org/react";
5
6export function Providers({ children }: { children: React.ReactNode }) {
7  return <NextUIProvider>{children}</NextUIProvider>
8}
9
10// layout.tsx
11import { Providers } from "./providers";
12
13export default function RootLayout({
14  children,
15}: Readonly<{
16  children: React.ReactNode;
17}>) {
18  return (
19    <html lang="ja">
20      <body className={`${notoSansJP.className} antialiased`}>
21        <Providers>{children}</Providers>
22      </body>
23    </html>
24  );
25}

試しに、pageファイルでButtonを使用してみました。設定はできているようです。
NextUIは内部的にフックを使用しているコンポーネントが多い印象なので、実際に開発する時は、ラップして使ってあげるのが良いかと思います。

1'use client'
2
3import { Button } from '@nextui-org/button'
4
5const ButtonList = [
6  { color: 'default', text: 'Default' },
7  { color: 'primary', text: 'Primary' },
8  { color: 'secondary', text: 'Secondary' },
9  { color: 'success', text: 'Success' },
10  { color: 'warning', text: 'Warning' },
11  { color: 'danger', text: 'Danger' },
12] as const
13
14export default function Home() {
15  return (
16    <main className="h-screen w-screen flex justify-center items-center gap-4">
17      {ButtonList.map((button, idx) => (
18        <Button key={idx} color={button.color}>
19          {button.text}
20        </Button>
21      ))}
22    </main>
23  )
24}

ESLint, Prettier設定

Next.jsでは、ESLintプラグインeslint-plugin-nextが基本構成に含まれており、一般的な問題や不具合を検出することができます。
またv15では、ESLint9に対応しました。それ未満のバージョンはEOLとなったため、v9への移行対応が必要となります。
設定ファイルなどの概念(flat config)も大きく変わっているようです。
この辺りの設定やprettierとの共存については長くなりそうなので、また別の記事にまとめたいと思います。

husky

huskyを導入して、commit時にlintを強制するルールを設定します。
こちらを導入することにより、不適切なコードをレビュー前にリモートリポジトリに含めないようにすることが可能になります。

husky, lint-stagedをインストールして、.huskyディレクトリ配下にpre-commitを作成します。

1npm install --save-dev husky lint-staged && npx husky init && echo "npx lint-staged" > .husky/pre-commit

こちらを参考に、tsチェック、eslintチェック、prettierチェックを行うコードを記述します。

1// .lintstagedrc.js
2const path = require('path')
3
4const tsCheckCommand = () => 'tsc --noEmit'
5
6const buildEslintCommand = (filenames) =>
7  `next lint --fix --file ${filenames
8    .map((f) => path.relative(process.cwd(), f))
9    .join(' --file ')}`
10
11const prettierCommand = 'prettier --write'
12
13module.exports = {
14  '*.{js,jsx,ts,tsx}': [tsCheckCommand, buildEslintCommand, prettierCommand],
15}