Zenn
🚀

Next.js に NextUI を導入する

2023/12/03に公開
Next.js
React
TypeScript
NextUI
tech

概要

Next.js に NextUI を導入した備忘録

環境

  • Next.js：v14.0.3（App Router）
  • NextUI：v2.2.9
  • Bun：v1.0.15

NextUI とは

コンポーネントライブラリ
React Server Component に対応しているコンポーネントライブラリを探した結果、こちらを導入することにした
https://nextui.org/

追記
shadcn/ui にしました
理由は、use client を入れるかこちらで制御できるため
https://zenn.dev/tataya/articles/c14a0b4b0a04fe

インストール

公式に従ってインストールする（Installation）

bun add @nextui-org/react framer-motion

設定

諸々設定する

tailwind.config.ts
+ import { nextui } from '@nextui-org/react'
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/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

NextUIProvider はクライアントコンポーネントで使わないといけないため、以下のように別でコンポーネントを作成して利用する

UiProvider.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
+ import { UiProvider } from '@/app/_component/providers/UiProvider'
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}>
-       {children}
+       <UiProvider>{children}</UiProvider>
      </body>
    </html>
  )
}

Discussion