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

# はじめに
これまで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をインストール
```bash
npm i @nextui-org/react framer-motion
```
tailwindcssを使うための準備をします。
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

tailwindcssを使用するための設定をします。
```javascript:tailwind.config.js
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の先頭に以下を追記
```css:global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

nextUIのライブラリを使うためのプロバイダを作成
```ts:app/provider.tsx
'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でプロバイダを読み込む
```ts: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コンポーネントを使ってみます。
※公式にあるものをそのままコピペです。
```tsx:page.tsx
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>
  );
}
```


↓↓こんな感じの結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/ba832edd-5b24-5d47-5435-3c858ba3cc05.png)


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

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

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


# 参考

https://tailwindcss.com/docs/guides/nextjs

https://nextui.org/docs/frameworks/nextjs

https://zenn.dev/tataya/articles/a8198e283bf1a4