Next.js+TypeScript报错：getStaticProps不是合法入口导出值

核心报错原因 #

1. 客户端组件无法使用getStaticProps #

你在页面顶部添加了"use client"指令，这会将整个页面标记为客户端组件。而getStaticProps、getServerSideProps这类服务端数据获取函数仅支持在服务器组件中导出，客户端组件不允许导出这类函数，因此TypeScript抛出了"getStaticProps" is not a valid Next.js entry export value.ts(71002)错误。

2. getStaticProps不适合依赖用户会话的场景 #

你在getStaticProps中调用getServerSession获取当前用户信息，但getStaticProps是在项目构建阶段执行的，此时没有用户请求上下文，根本无法获取到登录用户的会话数据，这个逻辑本身就无法正常运行。

修复方案 #

步骤1：移除"use client"指令 #

删除页面顶部的"use client"，让页面恢复为服务器组件，这样就能正常导出服务端数据获取函数。

步骤2：替换getStaticProps为getServerSideProps #

由于需要根据当前登录用户动态获取数据，改用getServerSideProps——它会在每次用户请求时执行，能正常获取到请求上下文和用户会话。

修复后的完整代码：

import TextSimilarityForm from "@/components/TextSimilarityForm";
import { authOptions } from "@/lib/auth";
import { db } from "@/lib/db";
import { getServerSession } from "next-auth";
import { FC, useState, useRef } from "react";
import { GetServerSideProps, NextPage } from "next";
import { ApiKey } from "@prisma/client";

interface apiKeyProps {
  apiKey: ApiKey | null;
}

const page = ({ apiKey }: apiKeyProps) => {
  return (
    <div className="max-w-7xl mx-auto mt-16">
      {/* @ts-expect-error Server Component */}
      {apiKey && <TextSimilarityForm />}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps<apiKeyProps> = async (context) => {
  const session = await getServerSession(context.req, context.res, authOptions);
  
  // 处理未登录情况
  if (!session) {
    return { props: { apiKey: null } };
  }

  const apiKey = await db.apiKey.findFirst({
    where: {
      userId: session.user.id,
      enabled: true,
    },
  });
  
  return {
    props: { apiKey }, 
  };
};

export default page;

补充说明：如果TextSimilarityForm是客户端组件，服务器组件可以直接渲染它，无需额外处理。

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