部署Vercel后如何从MongoDB获取数据？Next.js电商站问题

问题核心：部署到Vercel后，getServerSideProps中硬编码的http://localhost:3000/api/products无法正常请求——Vercel服务器运行时，localhost指向其内部环境，而非你的本地MongoDB服务，且本地服务在部署后并未运行，导致请求失败。

解决方案一：直接在getServerSideProps中查询数据库（推荐） #

无需通过HTTP请求调用自身API，直接在服务器端逻辑中连接数据库查询，减少冗余请求，提升性能。

修改SummerFine页面的代码：

import React from 'react'
import Footer from '../component/Footer'
import Header from '../component/Header'
import Link from "next/link"
import { useRouter } from 'next/router'
// 引入数据库连接和模型
import dbConnect from "../utils/Mongo";
import Product from "../model/Product";

export default function SummerFine({ allProducts }) {
    const router = useRouter()

    return (
        <div>
            <Header />
            <p className=" itemHeader ml-auto text-left">  
                <span className='cursor-pointer' onClick={() => router.push('/men')}>Men</span>  
            </p>
            <p className='itemHeader_Main text-5xl text-left'>SUMMER FINE SELECTON</p>
            <div className="grid productSection lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 gap-4 mt-10">
                {
                    allProducts.map((summerFineItem) => (
                        <Link href={`/summerFineItem/${summerFineItem._id}`} passHref key={summerFineItem._id}>
                            <div className='productGrid ' key={summerFineItem._id}>
                                <img className='productImages' src={summerFineItem.images} />
                                <br />
                                <p className='itemName'>{summerFineItem.name}</p>
                                <br />
                                <p className='itemPrice'>$ {summerFineItem.price}</p>
                            </div>
                        </Link>
                    ))
                }
            </div>
            <Footer />
        </div>
    )
}

export const getServerSideProps = async () => {
    // 连接数据库
    await dbConnect();
    // 查询所有商品
    const allProducts = await Product.find();
    // 转换为可序列化的JSON对象（处理MongoDB文档的特殊类型）
    return {
        props: {
            allProducts: JSON.parse(JSON.stringify(allProducts))
        }
    }
}

解决方案二：修改API请求地址为部署域名（不推荐） #

通过环境变量动态配置请求地址，适配本地与部署环境：

1. 在Vercel控制台的「环境变量」中添加NEXT_PUBLIC_APP_URL，值为你的部署域名https://lacostestore.vercel.app
2. 修改getServerSideProps代码：

export const getServerSideProps = async () => {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";
    let prodRes = await axios.get(`${baseUrl}/api/products`);
    return {
        props: {
            allProducts: prodRes.data
        }
    }
}

额外必要配置 #

• MongoDB网络权限：若使用MongoDB Atlas，需在数据库的「网络访问」设置中，将Vercel服务器的IP加入白名单，或临时设置为允许所有IP（0.0.0.0/0，仅开发环境使用，生产环境需配置Vercel出站IP）
• 环境变量配置：确保dbConnect中使用的MongoDB连接字符串来自环境变量（如process.env.MONGODB_URI），并在Vercel控制台中配置该变量，避免硬编码敏感信息
• 移除无效代码：组件中const isServerReq = req => !req.url.startsWith('/_next');这行代码会报错（req仅在服务器端函数中可用，组件内未定义），需删除

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