NextJS部署动态页面时getServerSideProps报错如何解决

我尝试部署一个动态网页，用getServerSideProps实现Google通用登录，但部署时出现了相关错误。

登录页面代码 #

import {getProviders, signIn as SignIntoProvider } from "next-auth/react";
import Header from "../../components/Header";
import Image from "next/future/image";
//Brower...
function signIn({providers}){
    return (
        <>
        <Header />

        <div className="flex flex-col items-center min-h-screen py-2 mt-56 text-center">
            <Image className="w-80" src="/img/스쿼드 로고.png" alt="" width={400} height={200}/>

            <p className="font-xs italic">
                SQUARD PROJECT - By EunSeo PARK  
            </p>
                <div className='mt-20'>
                    {Object.values(providers).map((provider) => (
                        <div key={provider.name}>
                            <button className="p-3 bg-blue-500 rounded-lg text-white" onClick={() => SignIntoProvider(provider.id, {callbackUrl: "/"})}>
                                Sign in with {provider.name}
                            </button>
                        </div>
                    ))}
                </div>
        </div>
    </>
    );
}

//Server side 
export async function getServerSideProps() {
    const providers = await getProviders();

    return {
        props: {
            providers,
        },
    };

}

export default signIn;

报错信息 #

[WARNING]: Error occurred prerendering page "/auth/signin". Read more: https://nextjs.org/docs/messages/prerender-error
                                    Error: Error for page /auth/signin: pages with `getServerSideProps` can not be exported. See more info here: https://nextjs.org/docs/messages/gssp-export
                                    at /codebuild/output/src687705454/src/SNS-Community-Instagram/node_modules/next/dist/export/worker.js:218:27
                                    at async Span.traceAsyncFn (/codebuild/output/src687705454/src/SNS-Community-Instagram/node_modules/next/dist/trace/trace.js:79:20)

报错原因 #

你当前使用了静态导出模式（执行next export），但getServerSideProps是服务端渲染专属函数，静态导出会把所有页面预渲染成静态HTML，无法运行服务端逻辑，因此冲突报错。

方案1：改用支持服务端渲染的部署方式 #

直接放弃next export，使用next build && next start启动服务，部署到支持Node.js的平台（比如Vercel、AWS EC2、DigitalOcean等）。这是最适配NextAuth的方案，因为getProviders原本就依赖服务端环境读取配置。

方案2：将getProviders调用移到客户端（适配静态导出） #

如果必须用静态导出，把提供商信息的获取逻辑移到客户端组件内：

1. 删除页面中的getServerSideProps函数
2. 用useEffect在客户端异步获取提供商数据

修改后的代码示例：

import { getProviders, signIn as SignIntoProvider } from "next-auth/react";
import Header from "../../components/Header";
import Image from "next/future/image";
import { useEffect, useState } from "react";

function signIn() {
  const [providers, setProviders] = useState(null);

  useEffect(() => {
    const fetchProviders = async () => {
      const res = await getProviders();
      setProviders(res);
    };
    fetchProviders();
  }, []);

  // 加载状态提示
  if (!providers) {
    return <div>加载中...</div>;
  }

  return (
    <>
      <Header />
      <div className="flex flex-col items-center min-h-screen py-2 mt-56 text-center">
        <Image className="w-80" src="/img/스쿼드 로고.png" alt="" width={400} height={200} />
        <p className="font-xs italic">
          SQUARD PROJECT - By EunSeo PARK
        </p>
        <div className='mt-20'>
          {Object.values(providers).map((provider) => (
            <div key={provider.name}>
              <button className="p-3 bg-blue-500 rounded-lg text-white" onClick={() => SignIntoProvider(provider.id, { callbackUrl: "/" })}>
                Sign in with {provider.name}
              </button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

export default signIn;

注意：这种方式依赖NextAuth的API路由（pages/api/auth/[...nextauth].js），需确保该路由配置正确，且静态部署平台支持API路由的运行（部分静态平台可能需要额外配置）。

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