Next.js开发NFT搜索应用隐藏Alchemy API密钥时遭遇后端错误求助

嘿，我看你在做NFT搜索应用的时候，为了藏Alchemy的API密钥折腾了半天，还试了ChatGPT和Serverless函数没搞定——其实不用单独搭Express服务器的，Next.js本身自带的API路由就能完美解决这个问题，还能避免跨域之类的麻烦，我给你一步步捋清楚：

第一步：删掉独立的Express服务，改用Next.js API路由 #

Next.js的pages/api目录下的文件会自动成为后端API接口，完全跑在服务器端，不会暴露任何密钥给前端。你只需要：

1. 项目根目录如果没有pages/api文件夹就新建一个；
2. 在里面创建nfts.js文件，写入以下代码：

import axios from 'axios';

// Next.js API路由的标准格式：导出async函数处理请求
export default async function handler(req, res) {
  // 从请求参数里获取钱包地址
  const { owner } = req.query;
  
  // 先做参数校验，避免空请求
  if (!owner) {
    return res.status(400).json({ error: '请传入有效的钱包地址' });
  }

  // 从环境变量拿Alchemy密钥（服务器端运行，绝对不会暴露给前端）
  const apiKey = process.env.ALCHEMY_API_KEY;
  if (!apiKey) {
    return res.status(500).json({ error: '服务器未配置API密钥，请检查环境变量' });
  }

  try {
    // 调用Alchemy的NFT接口
    const baseURL = `https://eth-mainnet.g.alchemy.com/nft/v2/${apiKey}/getNFTs/`;
    const response = await axios.get(`${baseURL}?owner=${owner}`);
    
    // 返回拿到的NFT数据
    res.status(200).json(response.data);
  } catch (error) {
    // 捕获错误并返回友好提示
    res.status(500).json({ error: error.message || '获取NFT数据失败，请稍后重试' });
  }
}

第二步：配置环境变量藏密钥 #

1. 在项目根目录新建.env.local文件，写入你的Alchemy密钥：

ALCHEMY_API_KEY=你的Alchemy密钥内容

2. 注意：这个文件要加入.gitignore，绝对不能提交到代码仓库里！部署的时候（比如用Vercel、Netlify），直接在平台的环境变量配置里加这个键值对就行，平台会帮你安全存储。

第三步：修正前端的请求代码 #

你之前的fetch路径有问题，没有指定参数名，导致后端拿不到钱包地址，改成这样：

const fetchNFTs = async () => {
  // 先判断钱包地址是否为空，避免无效请求
  if (!wallet) {
    alert('请先输入钱包地址');
    return;
  }

  try {
    // 请求刚才新建的Next.js API路由，参数名是owner
    const response = await fetch(`/api/nfts?owner=${wallet}`);
    
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    const nfts = await response.json();
    setNFTs(nfts);
  } catch (error) {
    console.error('获取NFT出错:', error);
    alert(`获取NFT失败：${error.message}`);
  }
};

为什么之前的方式容易出问题？ #

你之前写的Express服务是独立的，和Next.js前端不在同一个服务里，部署的时候要分开部署，还要处理跨域（得在Express里加cors中间件），而且前端请求的时候要写完整的服务器地址（比如http://localhost:3001/api?owner=xxx），反而更麻烦。用Next.js自带的API路由就没这些问题，它和前端同域，部署的时候直接把整个Next.js项目推上去就行，省心多了。

如果还有问题，可以检查这几点：

• 确认.env.local里的密钥拼写正确，Next.js重启后才会加载新的环境变量；
• 前端的wallet变量确实拿到了正确的钱包地址；
• Alchemy的API端点是否匹配你用的网络（比如主网还是Goerli测试网）。

备注：内容来源于stack exchange，提问作者Emin Çoşkun