ข้อผิดพลาด "getStaticProps" ไม่ใช่ค่าการส่งออกเอนทรีที่ถูกต้องของ Next.js กับ TypeScript

ฉันค่อนข้างใหม่กับ Nextjs และ Typescript และฉันกำลังเจอข้อผิดพลาดที่ฉันไม่สามารถหาวิธีแก้ไขได้หรือหาข้อมูลเกี่ยวกับมันได้ไม่มากนัก:

"getStaticProps" ไม่ใช่รายการส่งออกที่ถูกต้องของ Next.js ts(71002)

ฉันกำลังพยายามสอบถามฐานข้อมูลของฉันด้วย prisma ใน getStaticProps เพื่อดึง apikey และส่งมันเป็น prop ให้กับคอมโพเนนต์หน้าของฉัน

"use client";

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 { GetStaticProps, 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 getStaticProps: GetStaticProps<apiKeyProps> = async (context) => {
  const user = await getServerSession(authOptions);

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

export default page;

ถ้าใครสามารถอธิบายได้ว่าทำไมสิ่งนี้ถึงเกิดขึ้น ผม/ฉันจะซาบซึ้งมาก

คำตอบ #1

NextJS 15.1.6 และ ReactJS 19

นี่ไม่ทำงาน

มันจะเกิดข้อผิดพลาด: TS71002: "AwesomePage" ไม่ใช่ค่าการส่งออกเอนทรีที่ถูกต้องของ Next.js

export const AwesomePage = () => {
    return (
        <h1>NextJS is Awesome</h1>
    )
}

นี่ใช้ได้ผล

const AwesomePage = () => {
    return (
        <h1>NextJS is Awesome</h1>
    )
}

export default AwesomePage

ดังนั้น สร้าง const ขึ้นมา และส่งออกมันเป็น export default

คำตอบ #2

ลองสิ มันอาจช่วยคุณได้ ถ้าไม่ได้ หวังว่าคุณจะสามารถให้ตัวอย่างใน codesandbox เพื่อที่ฉันจะช่วยคุณต่อ

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 { GetStaticProps, NextPage } from "next";
import { ApiKey } from "@prisma/client";

interface ApiKeyProps {
  apiKey: ApiKey | null;
}

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

export const getStaticProps: GetStaticProps<ApiKeyProps> = async (context) => {
  const user = await getServerSession(authOptions);

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

export default ApiKeyPage;