export default は関数の中に書けない！？Next.js × JSXでハマった話

✅ はじめに

Next.js や React で JSX に慣れていく中で、ある疑問にぶつかりました。

「関数の中に export default を書いたらエラーになったんだけど、なんで？」

…という話と、その延長で「HTMLを変数に入れて動的に扱いたいとき、JSXとどう付き合えばいいの？」という実体験を記事にまとめます。

❌ export default を関数内で使ってはいけない理由

function wrapper() {
  export default function Home() {
    return <div>Hello</div>;
  }
}

これは構文エラーになります。

🔺 エラーメッセージ

SyntaxError: 'export' declarations may only appear at top level of a module

モジュールのトップレベル（最上位）でしか使えないという制約があるためです。

✅ 正しい書き方

export default function Home() {
  return <div>Hello</div>;
}

トップレベルに export を書く必要があります。

💭 処理を関数化したいときは？

function generateHtml(title: string) {
  return `<h1>${title}</h1>`;
}

export default function Home() {
  const html = generateHtml("こんにちは");
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

dangerouslySetInnerHTML を使えばHTML文字列も挿入できます。

✅ まとめ