启用App Router的Next.js中React-Bootstrap Navbar报错求助

在启用App Router的Next.js 13.5.6项目中，使用React-Bootstrap官方Navbar示例代码时，出现以下错误：

• type is invalid -- expected a string ...
• Unsupported Server Component type: undefined at stringify

仅移除组件中的.运算符（如将Navbar.Brand改为单独导入）能临时编译，但并非合理解决方案。

核心原因 #

Next.js App Router默认所有组件为服务器组件，而React-Bootstrap的组件（包括Navbar.Brand这类子组件）依赖客户端运行环境：

1. 服务器组件无法解析这类通过点语法动态导出的子组件，会被识别为undefined
2. React-Bootstrap组件包含客户端交互逻辑（如Navbar折叠、下拉菜单），服务器组件不支持这类逻辑

修复步骤 #

1. 标记Header为客户端组件
   在Header.js文件顶部添加'use client'指令，强制组件在客户端渲染，确保能正确解析React-Bootstrap的子组件并运行交互逻辑。
2. 导入Bootstrap样式
   添加Bootstrap CSS的导入，保证组件有正常的视觉样式。

修改后的完整Header.js代码 #

'use client';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import 'bootstrap/dist/css/bootstrap.min.css';

function BasicExample() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default BasicExample;

额外排查步骤 #

如果修改后仍有问题，尝试清理缓存并重新安装依赖：

rm -rf .next node_modules
npm install
npm run dev

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