NextJS 13在layout.jsx中引入自定义组件时出现运行时错误

我正在使用NextJS 13开发作品集网站，在layout.jsx文件中引入自定义组件时出现错误。

Unhandled Runtime Error
Error: Unsupported Server Component type: undefined

• error Error: Unsupported Server Component type: undefined
  at stringify ()
  digest: "1926456981"

Navbar.jsx #

import Link from 'next/link'
const Navbar = ()=>{
  return(
      <nav>
        <Link href="/">Home</Link>
        <Link href="/contact">Contact</Link>
        <Link href="/projects">Projects</Link>
        <Link href="/links">Links</Link>
        <Link href="/certs">Certs</Link>
      </nav>
  );
}
export default Navbar;

layout.jsx #

import "./globals.css";
import { Inter } from "next/font/google";
import { Navbar } from "../components/Navbar";

const inter = Inter({
  subsets: ["latin"],
});

export const metadata = {
  title: "Stevan's Portfolio",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <header>
          <Navbar />
        </header>
        {children}
      </body>
    </html>
  );
}

• 创建新项目测试
• 检查组件导入路径
• 添加"use client"指令

问题出在组件导入方式不匹配：
Navbar.jsx使用export default Navbar做默认导出，但layout.jsx中用了import { Navbar } from "../components/Navbar"的命名导入语法，这会导致无法正确获取组件，最终Navbar变量为undefined，触发Server Component类型不支持的错误。

修改layout.jsx中的导入语句为默认导入即可解决：

// 替换原来的命名导入
import Navbar from "../components/Navbar";

无需额外添加"use client"，NextJS 13中Link组件支持在Server Component中使用，你的Navbar本身可以作为Server Component运行。

内容的提问来源于stack exchange，提问作者stevan06