【Next.js】default exportとexport constの違い

対象のコード

Next.jsだと、componentを他のファイルで使うためにcomponentを作成するときにdefault exportとexport constの2つが選べます。

この違いについてまとめました。

default.ts

export default function Header() {
///
}

const.ts

export const Footer() {
///
}

違いはimport時にある

では、上記のファイルをsrc直下のindex.tsファイルで読み込むことを考えてみます。

1つ目のファイルを読み込むときは以下のようになります。

index.ts

import Header from "./components/Header"
// or 
import TEKITOU from "./components/Header"

ご覧のように、function名でimportすることはもちろんできますが、それ以外に自分で名前をカスタマイズしてimportできてしまいます。

一方2つ目のファイルを読み込むときは以下です。

index.ts

import {Footer} from "./components/Footer"

export constの方はimport時に名前を変えることはできません。これはNamed importと呼ばれます。

どちらがいいか？

名前をimport時に変えられるというのはバグの原因になったり、他のメンバーにとってコードが読みにくくなる原因になりやすいと考えています。そのため、特にこだわりがなければexport defaultではなく、export constの方を使い、Named importを使うと良いでしょう。