Next.js 13 App目录下使用next/Link报错求助

针对你遇到的运行时TypeError: Cannot read properties of undefined (reading 'call')和水合错误，以下是常见原因及解决方法：

1. 错误使用Link组件API #

Next.js 13 App Router对next/link的API做了简化，不再需要手动包裹<a>标签。如果沿用Pages Router时期的写法，会触发运行时错误。

• 错误写法：

  import Link from 'next/link';
  <Link href="/"><a>首页</a></Link>
  

• 正确写法：

  import Link from 'next/link';
  <Link href="/">首页</Link>
  

2. 未标记组件为客户端组件 #

App Router下默认所有组件都是服务器组件，而next/link依赖客户端交互能力。如果包含Link的Header组件是服务器组件，会导致水合失败。
解决方法：在Header组件的第一行添加客户端组件指令：

'use client';
import Link from 'next/link';

export default function Header() {
  return (
    <nav>
      <Link href="/">首页</Link>
      <Link href="/about">关于我们</Link>
    </nav>
  );
}

3. Next.js版本兼容性问题 #

早期的Next.js 13 beta版本（如13.0.x）的App Router存在不少Link相关的bug，建议升级到13.4及以上的稳定版本（App Router正式GA的版本）：

npm install next@latest react@latest react-dom@latest

4. 水合不匹配导致的错误 #

如果Header组件中存在依赖客户端环境的代码（比如直接访问window对象），服务器渲染时生成的DOM会和客户端不一致，触发水合错误。需要确保这类代码仅在客户端执行：

'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    // 仅在客户端执行scroll监听
    const handleScroll = () => setIsScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className={isScrolled ? 'bg-white shadow' : 'bg-transparent'}>
      <Link href="/">首页</Link>
    </nav>
  );
}

5. 构建缓存残留问题 #

旧的构建缓存可能引发异常，尝试清除缓存后重新构建：

rm -rf .next
npm run build
npm run dev

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