Next.js13报错：Link组件href属性值为undefined如何修复？

问题根源 #

你遇到的错误是两个简单的拼写/路径问题导致的：

• 属性拼写错误：Link标签里的href被误写成了herf，Next.js无法识别这个错误属性，因此判定href的值为undefined
• 路径大小写不匹配：你的关于页文件名为about.js，但链接里写的是/About（大写开头），Next.js的文件系统路由严格区分大小写，这也会引发路由相关的问题

修正后的代码 #

将pages/index.js修改为以下内容：

import React from "react";
import Link from "next/link";

function MyComponent() {
  return (
    <div>
      <p>Hello from Next.js</p>
      <Link href="/about">About</Link>
    </div>
  );
};

export default MyComponent;

额外说明 #

在Next.js 13的Pages Router中，Link组件内部不需要嵌套<a>标签，Next.js会自动生成正确的锚点元素，直接把跳转文本放在Link标签内即可，这是官方推荐的写法。

验证修复 #

修改完成后，重新运行npm start，访问首页点击"About"链接就能正常跳转到关于页了。

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