React Next项目引入Navbar触发Objects are not valid as a React child报错求助

报错完全来自Navbar组件的Image组件导入错误，这也是移除Navbar后项目立即恢复正常的原因。

具体错误点 #

• 导入路径错误：
  你在Navbar组件中写的import Image from "next"是错误写法，Next.js内置Image组件的正确导入路径为next/image。直接导入next模块拿到的不是可渲染的React组件，而是Next.js的核心模块对象，渲染时就会触发你遇到的Objects are not valid as a React child (found: [object Promise])报错。
• Image组件缺少必填属性：
  修正导入后还需要给Image组件补充必填的width和height属性，或者根据布局需求添加fill属性，否则会触发Next.js的Image组件参数校验报错。
• 附带语法问题（不触发本次报错，但会导致功能异常）：
  你代码中多处使用className={样式变量, 字符串类名}的逗号写法，逗号运算符只会返回最后一个值，会导致前面的样式类不生效，正确写法是使用模板字符串拼接，比如：
  把className={styles.masthead_heading , "text-uppercase"}改为className={${styles.masthead_heading} text-uppercase}

修复步骤 #

1. 打开Navbar组件文件，将第一行的导入代码替换为：

import Image from 'next/image'

2. 修改Image组件调用代码，补充宽高属性，示例：

<Image src="./knowledge Memo.svg" alt="站点logo" width={120} height={40} />

3. （可选）修正所有className拼接的逗号写法为模板字符串写法。

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