如何在Next.js的Link组件中处理不以http、https开头的链接

架构老林

2026-9-28

解决方案

核心原理

Next.js 内置的 <Link> 组件默认会将没有 http/https 前缀的路径识别为站内相对路径，因此会自动拼接在当前站点域名后，这是符合组件设计逻辑的。你只需要在传入href属性前对用户提交的外部链接做一次标准化处理即可解决问题。

步骤1：编写链接标准化工具函数

你可以封装一个通用工具函数，自动为无协议的外部链接补全 https 前缀，同时过滤危险伪协议避免安全风险：

// utils/normalizeUrl.js
export function normalizeExternalUrl(url) {
  // 先去除首尾空格
  const trimmedUrl = url.trim();
  // 过滤危险伪协议，避免XSS风险
  if (trimmedUrl.startsWith('javascript:') || trimmedUrl.startsWith('data:') || trimmedUrl.startsWith('vbscript:')) {
    return '#';
  }
  // 已经带http/https协议的直接返回
  if (/^https?:\/\//i.test(trimmedUrl)) {
    return trimmedUrl;
  }
  // 没有协议的默认补全https前缀
  return `https://${trimmedUrl}`;
}

步骤2：结合`<Link>`组件使用

在渲染用户提交的外部链接时，先用上面的函数处理href值即可：

import Link from 'next/link';
import { normalizeExternalUrl } from '@/utils/normalizeUrl';

function UserSubmittedLink({ rawUrl, linkText }) {
  const normalizedUrl = normalizeExternalUrl(rawUrl);
  
  // 区分内外部链接，外部链接补充安全属性
  const isExternal = !normalizedUrl.startsWith(process.env.NEXT_PUBLIC_SITE_DOMAIN);
  
  return (
    <Link 
      href={normalizedUrl}
      {...(isExternal ? {
        target: '_blank',
        rel: 'noopener noreferrer'
      } : {})}
    >
      {linkText}
    </Link>
  )
}