😊

NextUIをRSCで使いたい場合の注意点

2023/08/27に公開

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