Next.js 13中<Link>标签无法使用，是否需要额外配置？

问题根源 #

在你用--experimental-app启用的Next.js 13 App Router模式下，组件导入规则和旧版Pages Router不同：

• <Link>组件需要从next/navigation导入，而非旧版的next/link
• <Image>组件必须从next/image导入，且必须提供src属性（你的代码中<Image>缺少这个必填属性）

你没有添加这两个组件的导入语句，导致运行时无法找到组件的内部方法，触发Cannot read properties of undefined (reading 'call')错误。

修复方案 #

1. 在组件文件顶部添加正确的导入语句：

import Link from 'next/navigation';
import Image from 'next/image';

2. 给<Image>组件补充必填的src属性，同时建议设置width和height（或使用fill属性配合父容器实现响应式布局）

修复后完整代码示例 #

import Link from 'next/navigation';
import Image from 'next/image';

export default function Home() {
  return (
    <>
      <h1 className='text-3xl font-bold underline'>
        Hello my friends
      </h1>

      <Link href='/'>Click Me</Link>
      <Image 
        alt='图片描述文本' 
        src='/your-image-file.jpg' // 替换为实际图片路径
        width={200} 
        height={200} 
      />
    </>
  )
}

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