はじめに
これまで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を使用するための設定をします。
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の先頭に以下を追記
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
nextUIのライブラリを使うためのプロバイダを作成
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でプロバイダを読み込む
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コンポーネントを使ってみます。
※公式にあるものをそのままコピペです。
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>
);
}
↓↓こんな感じの結果です。
環境構築で詰まったところ
NextUI公式のNext.jsを使用したドキュメントを参考に最初はやっていましたが、638.jsが読み込めません。的なエラーが出て詰まりました。
※エラーメッセージ残してませんでした・・・。
tailwindcssを使うのでcreate-next-appするときにtailwindcssを使う設定で作るのが手っ取り早いと思い、
上述の手順をやってみたところうまくいきました。
おわりに
ドキュメントを読むとコンポーネントも多く、ダークモードに対応しているのが今時でいい感じです。
これ使って何かWEBアプリを作ってみようと思います。
参考