😊
NextUIをRSCで使いたい場合の注意点
NextJS13.4 のAppRouterでNextUIを使う
import {Button} from '@nextui-org/react';
import {Button} from '@nextui-org/button';
一見同じに見える二つのButtonコンポーネントのインポートですが、RSCで使う場合は注意が必要です
RSCで使いたい場合
import {Button} from '@nextui-org/button';
こちらの宣言をしないとRSCで定義したコンポーネントの中では使えません。
一応、
import {Button} from '@nextui-org/react';
こちらでも静的解析時はエラーが出ないですが、ランタイム時にエラーが発生します。
公式ドキュメントでも注意書きがされています。
ただ、使用例(Usage)のSample Codeは
import React from "react";
import {Button} from "@nextui-org/react";
export default function App() {
return (
<Button color="primary">
Button
</Button>
);
}
のように、CSR前提で記載されています。
Discussion