ReactとNext.jsでデフォルトと名前付きエクスポートをimport(インポート)する時の注意点

名前付きエクスポート (export {})

そのファイルで複数のエクスポート（他のボタンコンポーネントなど）がある時に使います。

PrimaryButton.tsx

const PrimaryBtn = ({children} : PropsType  ) => {
  return (
    <Button 
        bg="lime.800"
        color="white" 
        p="8" 
        borderRadius="lg" 
        fontSize="20" _hover={{ bg: "lime.700" }}>
            { children }
    </Button>
  )
}

export default PrimaryButton;

デフォルトエクスポート(export default)

そのモジュールに1つのエクスポートしかない時に使います。

PrimaryButton.tsx

export const PrimaryBtn = ({children} : PropsType  ) => {
  return (
    <Button 
        bg="lime.800"
        color="white" 
        p="8" 
        borderRadius="lg" 
        fontSize="20" _hover={{ bg: "lime.700" }}>
            { children }
    </Button>
  )
}

importの書き方の違い

名前付きエクスポートをインポート

{}を使ってインポートします。

import { PrimaryButton } from "@/components/atoms/PrimaryButton.tsx";

デフォルトエクスポートをインポート

特に {}などはつけない です。

import  PrimaryButton  from "@/components/atoms/PrimaryButton.tsx";