Next.js项目导入Navbar组件报错，请求协助修复

在Next.js项目中尝试给RootLayout添加Navbar和Footer时遇到报错，相关代码与报错信息如下：

layout.js 代码 #

import './globals.css'
import { Inter } from 'next/font/google'

import {Navbar} from '@/components/Navbar'
const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

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

报错信息 #

Attempted import error: 'Navbar' is not exported from '@/components/Navbar' (imported as 'Navbar').

Import trace for requested module:
./src/app/layout.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.

Check your code at layout.js:15.
- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1684:8) @ attemptResolveElement
- error Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)

1. 匹配组件的导入与导出方式 #

打开@/components/Navbar文件，根据组件的导出类型调整导入代码：

• 若组件是默认导出：

// Navbar.jsx
export default function Navbar() {
  return <nav>...</nav>
}

则将layout.js中的导入改为：

import Navbar from '@/components/Navbar'

• 若组件是命名导出：

// Navbar.jsx
export function Navbar() {
  return <nav>...</nav>
}

则保持import {Navbar} from '@/components/Navbar'，但必须确保组件名拼写完全一致（大小写敏感）。

2. 校验文件路径与命名 #

• 确认components文件夹下存在Navbar.jsx/Navbar.tsx文件，文件名拼写无错误（Next.js对文件名大小写敏感）。
• 若使用@别名，确保next.config.js中已正确配置（Next.js 13+默认@指向src目录，无src目录则改用相对路径../components/Navbar）。

3. 修正RootLayout的DOM结构 #

Next.js要求html标签下只能直接包含head和body标签，需将Navbar移入body内部：

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar />
        {children}
        {/* 可在此处添加Footer组件 */}
      </body>
    </html>
  )
}

4. 标记客户端组件（可选） #

若Navbar使用了客户端专属API（如useState、useEffect或交互事件），需在Navbar组件顶部添加指令：

// Navbar.jsx
'use client'

export default function Navbar() {
  // 组件逻辑
}

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