Next.js向社交平台传递当前URL做分享时生成链接缺少currentUrl参数问题

是的，该问题就是Next.js服务端渲染阶段无window对象导致的。
Next.js的服务端渲染（SSR）、静态站点生成（SSG）阶段都运行在Node.js环境，不存在window对象，你的generateUrl函数在服务端执行时，currentUrl会命中回退逻辑返回空字符串，最终生成的分享链接u参数为空。你在控制台打印时代码已经运行在客户端环境，所以可以正常拿到window.location.href。

下面提供三种可行的修复方案，可根据你的业务场景选择：

方案1：客户端挂载后再生成链接（最常用） #

利用useEffect在组件客户端挂载完成后再生成分享链接存入state，再绑定到标签上：

import { useState, useEffect } from 'react'

function FacebookShareBtn() {
  const [shareUrl, setShareUrl] = useState('')

  useEffect(() => {
    const generateUrl = (platform: string) => {
      const currentUrl = window.location.href
      switch (platform) {
        case 'facebook':
          // 注意对url参数编码，避免特殊字符导致解析错误
          return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`
        default:
          return ''
      }
    }
    setShareUrl(generateUrl('facebook'))
  }, [])

  // 链接生成前可以渲染占位按钮，或者直接隐藏
  return shareUrl ? (
    <a href={shareUrl} target="_blank" rel="noopener noreferrer">
      分享到Facebook
    </a>
  ) : <button disabled>生成分享链接中</button>
}

方案2：点击时动态生成跳转链接 #

不需要提前渲染href属性，点击时再调用生成逻辑跳转，完全规避服务端执行问题：

function handleShare(platform: string) {
  const currentUrl = window.location.href
  let targetUrl = ''
  switch (platform) {
    case 'facebook':
      targetUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`
      break
  }
  targetUrl && window.open(targetUrl, '_blank', 'noopener noreferrer')
}

// 组件内使用
<button onClick={() => handleShare('facebook')}>分享到Facebook</button>

方案3：服务端也可生成链接的方案 #

如果需要服务端渲染阶段就生成完整链接，可以用Next.js路由能力+环境变量拼接站点地址：

1. 先在项目根目录的.env.local中配置站点公共域名：

NEXT_PUBLIC_SITE_URL=https://你的站点域名.com

2. 组件内用useRouter拿到当前页面路径拼接生成完整url：

import { useRouter } from 'next/router'

const generateUrl = (platform: string, pagePath: string) => {
  const fullCurrentUrl = `${process.env.NEXT_PUBLIC_SITE_URL}${pagePath}`
  switch (platform) {
    case 'facebook':
      return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(fullCurrentUrl)}`
    default:
      return ''
  }
}

function ShareComponent() {
  const router = useRouter()
  const facebookShareUrl = generateUrl('facebook', router.asPath)
  
  return (
    <a href={facebookShareUrl} target="_blank" rel="noopener noreferrer">
      分享到Facebook
    </a>
  )
}

• 所有作为参数传递的url都需要经过encodeURIComponent编码，避免url中的特殊字符、中文等导致参数解析失败
• 跳转到外部站点时记得加rel="noopener noreferrer"属性，规避安全风险

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