NextUI × Next.js × TypeScriptの環境構築

2024/03/15

はじめに

これまでReact×Typescript開発ではChakraUIを使ってきました。
他のUIライブラリも知っておきたいと思い、調査したところNextUIが気になったので環境構築をしてみました。

公式のドキュメント通りにやってみましたがうまくいかなかったので
うまくいった環境構築手順をご紹介します。

NextUIの特徴

tailwindcssをスタイルエンジンとして採用している
ランタイムCSSは使用せず、ビルド時にCSSを生成する
VueやAngularなど他のフロントエンドフレームワークとは同時に使用できない

開発環境

MacBook Pro Apple M1 Pro
macOS Ventura 13.4.1
node 20.8.1
npm 10.4.0

環境構築方法

create-next-appでプロジェクトを作成します。

npx create-next-app@latest my-project --typescript --eslint
cd my-project

framer-motionをインストール

npm i @nextui-org/react framer-motion

tailwindcssを使うための準備をします。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwindcssを使用するための設定をします。

import {nextui} from "@nextui-org/react";
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  darkMode: "class",
  plugins: [nextui()]
};
export default config;

tailwindcssを使用するためにglobal.cssの先頭に以下を追記

@tailwind base;
@tailwind components;
@tailwind utilities;

nextUIのライブラリを使うためのプロバイダを作成

'use client'

import { NextUIProvider } from '@nextui-org/react'
import { FC, ReactNode } from 'react'

type UiProviderProps = {
  children: ReactNode
}

export const UiProvider: FC<UiProviderProps> = ({ children }) => {
  return <NextUIProvider>{children}</NextUIProvider>
}

layout.tsxでプロバイダを読み込む

layout.tsx
import { Provider } from './provider'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { ReactNode } from 'react'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: ReactNode
}) {
  return (
    <html lang='en'>
      <body className={inter.className}>
      <Provider>{children}</Provider>
      </body>
    </html>
  )
}

導入はここまでで終わりです。

試しに使ってみる

Cardコンポーネントを使ってみます。
※公式にあるものをそのままコピペです。

import React from "react";
import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react";

export default function App() {
  return (
    <Card className="max-w-[400px]">
      <CardHeader className="flex gap-3">
        <Image
          alt="nextui logo"
          height={40}
          radius="sm"
          src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
          width={40}
        />
        <div className="flex flex-col">
          <p className="text-md">NextUI</p>
          <p className="text-small text-default-500">nextui.org</p>
        </div>
      </CardHeader>
      <Divider/>
      <CardBody>
        <p>Make beautiful websites regardless of your design experience.</p>
      </CardBody>
      <Divider/>
      <CardFooter>
        <Link
          isExternal
          showAnchorIcon
          href="https://github.com/nextui-org/nextui"
        >
          Visit source code on GitHub.
        </Link>
      </CardFooter>
    </Card>
  );
}

↓↓こんな感じの結果です。

環境構築で詰まったところ

NextUI公式のNext.jsを使用したドキュメントを参考に最初はやっていましたが、638.jsが読み込めません。的なエラーが出て詰まりました。
※エラーメッセージ残してませんでした・・・。

tailwindcssを使うのでcreate-next-appするときにtailwindcssを使う設定で作るのが手っ取り早いと思い、
上述の手順をやってみたところうまくいきました。

おわりに

ドキュメントを読むとコンポーネントも多く、ダークモードに対応しているのが今時でいい感じです。
これ使って何かWEBアプリを作ってみようと思います。