Next.js部署Vercel/Netlify报错：迭代器元素缺少key prop求协助

你遇到的错误是因为React要求在使用map循环渲染列表元素时，必须为每个迭代出的元素提供唯一的key属性——这是React diff算法的必要条件，缺失该属性会导致部署校验不通过。

查看你的Navbar组件代码，在navs.map渲染<li>元素时没有添加key。只需要给<li>标签加上基于唯一值的key即可，这里可以用每个导航项的href（所有路径都是唯一的，适合作为标识）。

修改后的完整代码如下：

import Link from "next/link";
import { withRouter } from "next/router";

function Navbar({ router }) {
  const navs = [
    { text: 'Home', href:'/'},
    { text: 'About', href:'/about'},
    { text: 'Portfolio', href:'/portfolio'},
    { text: 'Contact', href:'/contact'},
  ];
  return (
    <nav>
      <div>
        <ul className="nav-links">
          {navs.map(nav => ( 
            <li key={nav.href}>
              <Link href={nav.href} className={`nav-item ${ router.pathname == nav.href ?  'active' : ''}`}>
                {nav.text}
              </Link>
            </li> 
          ))}
        </ul>
      </div>
    </nav>
  );
}

export default withRouter(Navbar);

key属性需要是列表项的唯一标识，确保列表项顺序变化或增删时，React能正确追踪元素变化。这里使用nav.href是合理的，因为每个导航路径都是唯一的。

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