Next.js中如何隐藏源码及邮箱地址避免爬虫抓取？

关于productionBrowserSourceMaps: false仍能看到“源码”的说明 #

• 该配置仅禁用Source Map文件，不会隐藏编译后的JS Bundle。浏览器中看到的“源码”其实是经过编译压缩后的代码，并非你的原始源码。
• 若部署后仍能看到旧代码，大概率是缓存问题：
  • 清理浏览器本地缓存（快捷键Ctrl+Shift+R强制刷新）
  • 若使用CDN，需同步清理CDN缓存
  • 确保部署的是最新构建产物（next build后重新部署）

隐藏邮箱地址的可靠方案 #

方案1：服务端API动态返回邮箱（推荐） #

前端环境变量只要以NEXT_PUBLIC_开头就会被打包进JS，直接存.env无效。正确做法是将邮箱存为非前端暴露的环境变量，通过服务端API返回给前端：

1. 在项目根目录的.env文件中添加（不要加NEXT_PUBLIC_前缀）：

   CONTACT_EMAIL=your-contact@example.com
   

2. 创建API路由：
   • Pages Router：pages/api/contact-email.js

     export default function handler(req, res) {
       // 仅允许GET请求
       if (req.method !== 'GET') {
         return res.status(405).json({ message: 'Method Not Allowed' });
       }
       res.status(200).json({ email: process.env.CONTACT_EMAIL });
     }
     

   • App Router：app/api/contact-email/route.js

     export async function GET() {
       return Response.json({ email: process.env.CONTACT_EMAIL });
     }
     

3. 前端组件中调用API获取邮箱：

   import { useState, useEffect } from 'react';
   
   export default function ContactCard() {
     const [email, setEmail] = useState('');
   
     useEffect(() => {
       const fetchEmail = async () => {
         try {
           const res = await fetch('/api/contact-email');
           const data = await res.json();
           setEmail(data.email);
         } catch (err) {
           console.error('获取邮箱失败:', err);
         }
       };
       fetchEmail();
     }, []);
   
     return <div className="contact-card">联系邮箱：{email}</div>;
   }
   

   此方案下邮箱仅在API请求时返回，不会出现在任何前端源码中，爬虫无法通过静态分析获取。

方案2：前端动态拼接邮箱（适合简单场景） #

将邮箱拆分为多个部分，前端动态拼接，可绕过基础爬虫的静态文本抓取：

export default function ContactCard() {
  // 拆分邮箱组成部分
  const local = 'your-contact';
  const domain = 'example.com';
  const email = `${local}@${domain}`;

  // 或使用ASCII码转换（进一步提升防爬能力）
  // const email = String.fromCharCode(121,111,117,114,45,99,111,110,116,97,99,116,64,101,120,97,109,112,108,101,46,99,111,109);

  return <div className="contact-card">联系邮箱：{email}</div>;
}

注意：此方法仅能防基础爬虫，若爬虫能执行JS解析拼接结果，仍可获取邮箱。

方案3：图片展示邮箱（不推荐） #

将邮箱制作成图片，前端直接渲染图片。优点是彻底避免文本被抓取，但缺点是用户无法复制邮箱，严重影响体验，仅在极端场景下使用。

关于“隐藏源码”的说明 #

Next.js 编译后的JS Bundle是浏览器渲染页面的必要文件，无法完全隐藏。能做的只是提升代码可读性门槛：

• 确保swcMinify: true已开启（你当前配置已启用），该选项会自动压缩混淆代码
• 无需额外引入其他混淆工具，Next.js默认的SWC压缩已足够应对绝大多数场景
• 核心原则：敏感数据绝对不要放在前端代码中，通过服务端动态返回是唯一可靠的方式

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