NextJS에서 NextUI를 사용하기 위해선 _document.tsx와 _app.tsx를 세팅해야한다.
install
yarn add @nextui-org/react
# or
npm i @nextui-org/react_document.tsx
import React from "react";
import Document, { Html, Head, Main, NextScript, DocumentInitialProps, DocumentContext } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps
};
}
render() {
return (
<Html lang="ko">
<Head>
{CssBaseline.flush()}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;_app.tsx
import type { AppProps } from "next/app";
import { NextUIProvider } from '@nextui-org/react';
function MyApp({ Component, pageProps }: AppProps) {
return (
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
);
}
export default MyApp;_document.tsx와 _app.tsx를 세팅한 뒤 NextUI components를 사용하면 적용가능하다.
🧡 Frontend developer / 어제보다 오늘 더 성장한 개발자