在Next.js中引入第三方UI库Link组件时出现document is not defined错误求助

不用换Express.js，Next.js本身就能解决这个SSR导致的问题，给你几个可行的方案：

• 动态导入第三方组件（禁用SSR）
  Next.js提供的dynamic函数可以指定组件仅在客户端渲染，避开服务端没有document的问题。修改你的导入代码：

import React from 'react';
import dynamic from 'next/dynamic';

// 禁用SSR，仅在客户端加载Link组件
const Link = dynamic(() => import('@example/example-UI-library-react').then(mod => mod.Link), {
  ssr: false
});

interface CardProps {
    image: string;
    country: string;
}

const Card: React.FC<CardProps> = ({
   image,
   country
}:CardProps): JSX.Element => (
<a className="card" target="_blank">
  <div className="card__picture">
    <img src={image}></img>
  </div>
  <div className="card__content">
    <h3 className="card__content-country">{country}</h3>
    <Link></Link>
  </div>
</a>
);

export default Card;

• 仅在客户端环境渲染组件
  通过判断window对象是否存在，确保Link组件只在客户端渲染：

import React, { useState, useEffect } from 'react';
import { Link } from '@example/example-UI-library-react';

interface CardProps {
    image: string;
    country: string;
}

const Card: React.FC<CardProps> = ({
   image,
   country
}:CardProps): JSX.Element => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // 组件挂载后确认处于客户端环境
    setIsClient(true);
  }, []);

  return (
    <a className="card" target="_blank">
      <div className="card__picture">
        <img src={image}></img>
      </div>
      <div className="card__content">
        <h3 className="card__content-country">{country}</h3>
        {isClient && <Link></Link>}
      </div>
    </a>
  );
};

export default Card;

• 替换为Next.js原生Link组件（可选）
  如果第三方UI库的Link仅用于路由跳转，可以直接换成Next.js自带的next/link组件，它对SSR支持更友好：

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

// 后续组件代码保持不变

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