Next.jsでコンポーネント化しようとすると

Next.jsのコンポーネント化に躓き
なんだなんだ。。。#駆け出しエンジニアと繋がりたい pic.twitter.com/tUVCY4T9bK

— もりだい@エンジニア挑戦中 (@moridai1104) April 17, 2024

Error: Unsupported Server Component type: undefinedとエラーを吐かれる

直訳すると「サーバーコンポーネントのタイプが未定義であるためにエラーが発生」のようだ。

今回は、Error: Unsupported Server Component type: undefinedの解決方法のまとめです。

結論

default exportとexport constの違いでした。

Next.jsをコンポーネント化に成功！
どうやら、export default とexport constの違いだったようだ。
・export default　→ default export
・export const 　→ named export
import時には、{}がつくかつかないかの違いがあるので注意！#駆け出しエンジニア pic.twitter.com/asuGofFXxW

— もりだい@エンジニア挑戦中 (@moridai1104) April 18, 2024

【Next.js】Error: Unsupported Server Component type: undefinedエラーの解決策

コンポーネント化しようとしていること

app/about/page.jsのリンク部分をcomponents/Links.jsでコンポーネント化したい。

パスが正しいのに何度もエラーが

Links.jsで正しくexportしたはずだが。。。エラーが消えない

import Image from "next/image";
import styles from "../app/page.module.css";


export default function Links() {　//←default exportしている
  return (
    <div className={styles.grid}>
     ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
    </div>
  );
}

ターミナルを見てみると

⚠ ./app/about/page.js
Attempted import error: 'Links' is not exported from '../../components/Links' (imported as 'Links').

Import trace for requested module:
./app/about/page.js
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
⨯ Error: Unsupported Server Component type: undefined
at stringify (<anonymous>)
at stringify (<anonymous>)
digest: "4146262458"
⨯ Error: Unsupported Server Component type: undefined
at stringify (<anonymous>)
at stringify (<anonymous>)
digest: "4146262458"
GET /about 500 in 1197ms
GET /favicon.ico 200 in 72ms

どうやら、「../../components/Links」から’Links’がエクスポートされていないため、インポートエラーが発生。

ファイルでコンポーネントが適切にエクスポートされていないか、デフォルトと名前付きのインポートが混在している可能性があるようだ。

about.jsのimportを確認

インポートを確認すると｛｝があるので、名前付きインポートになっている。。。

import Image from "next/image";
import styles from "../page.module.css";
import { Links } from "../../components/Links";//←名前付きimpotrtしている


export default function Home() {
  return (
    <main className={styles.main}>
     ～～～～～～～～～～～～～～～～～
    </main>
  );
}

エラーの原因はimportとexportの違い

Links.jsのexportがdefaultなので、importは｛｝なし

import Image from "next/image";
import styles from "../app/page.module.css";


export default function Links() { //←default exportなので
  return (
    <div className={styles.grid}>
     ～～～～～～～～～～～～～～～～～～～
    </div>
  );
}

import Image from "next/image";
import styles from "../page.module.css";
import Links from "../../components/Links"; //←{Lins}を{}なしに修正


export default function Home() {
  return (
    <main className={styles.main}>
     ～～～～～～～～～～～～～～～
      <Links /> //←忘れずに
    </main>
  );
}

export default とexport constのimportの違い

export default　→ default exportの場合のimport

import SomeComponent from './SomeComponent';

export const 　→ named exportの場合のimport

import { someVariable } from './SomeModule';

「export default」は、単一の値やモジュールをエクスポートするのに使用され、その値やモジュールは名前なしでインポートされます。

一方、「export const」は、定数や変数を名前付きでエクスポートし、その名前を使用してインポートします。基本的には名前付きエクスポートが推奨されているので注意です。

今回はハマった躓きは、exportとimport方法の違いでした。