CODEWITHSUNDEEP
typescriptnext.jsprisma
Mossy82
Mossy82

Reputation: 365

"getStaticProps" is not a valid Next.js entry export value error with typescript

I am fairly new to Nextjs and Typescript and I am getting an error I wasn't able to figure out or find much info on:

"getStaticProps" is not a valid Next.js entry export value.ts(71002)

I am trying to query my db with prisma in getStaticProps to fetch an apikey and pass it as a prop to my page component.

"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;

If anyone could shed some light as to why this is happening I would really appreciate it.

Upvotes: 5

Views: 5681

Answers (3)

BertC
BertC

Reputation: 2666

NextJS 15.1.6 and ReactJS 19

This does NOT work

It will give the error: TS71002: "AwesomePage" is not a valid Next. js entry export value

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

This does work

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

export default AwesomePage

So, create the const, and export it as export default

Upvotes: 0

Bluebaron
Bluebaron

Reputation: 2526

If you run the server with npm start dev and then open the page, your console should show the following error:

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

Upvotes: 0

Cognia
Cognia

Reputation: 465

Try this ,it may be can help you ,if not ,hope you can give a demo in codesandbox ,so I help you further


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;

Upvotes: 0

Related Questions