The error message "Invalid export value for Next.js with TypeScript: 'getStaticProps'" indicates a problem with the entry export value

I'm currently diving into the world of Next.js and Typescript, and I've run into an error that has left me stumped as there doesn't seem to be much information available on it:

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

My aim is to use Prisma to query my database in getStaticProps, retrieve an API key, 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 offer some insight into why this error is occurring, I would greatly appreciate it.

Answer №1

Give this a try, it might be able to assist you. If not, consider providing a demo on codesandbox so I can offer further help.


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;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in Typescript: Function expects two different types as parameters, but one of the types does not have the specified property

There's a function in my code that accepts two types as parameters. handleDragging(e: CustomEvent<SelectionHandleDragEventType | GridHandleDragEventType>) { e.stopPropagation(); const newValue = this.computeValuesFromPosition(e.detail.x ...

When calling UIComponent.getRouterFor, a TypeScript error is displayed indicating the unsafe return of a value typed as 'any'

I have recently integrated TypeScript into my SAPUI5 project and am encountering issues with the ESLint messages related to types. Consider this simple example: https://i.sstatic.net/iorJ5.png In this snippet of code, I am getting an error message saying ...

Is it necessary to continue utilizing PropTypes when incorporating Typescript into a React application?

Typescript brings significant advantages in terms of type validation. Does it completely replace the necessity of using PropTypes? Or do PropTypes still offer unique benefits? ...

Obtain an array containing only one property value from an array of objects

Within my array of objects, I am looking to extract all the controls and move them to a new array: this.formModel = { sections: [ { title: 'Section 01', controls: [ new FormControlInput({ ...

What is the best method for implementing notifications/alerts in React in a way that is both efficient and functional? We require a universal function that can be easily integrated and utilized across

Is there a way to implement a notification or alert function that displays messages and disappears after a specific time? I am looking for a library or implementation that can handle this functionality. The requirement is to have a function that can be ca ...

Using Typescript to Convert JSON Data into Object Instances

My challenge involves a Json object structure that looks something like this: { "key" : "false", "key2" : "1.00", "key3" : "value" } I am seeking to convert this in Typescript to achieve th ...

Incorporating Moment.js into React Native Typescript for Enhanced Date and

I am currently facing an issue while using Moment.js and React Native to work with date and time. My code snippet below showcases how I am attempting to utilize the library. import * as React from 'react'; import { Text, View, StyleSheet } from ...

An optional field has been identified as ng-invalid

In my set-up, I have created a form group using reactive forms. this.transactionForm = fb.group ({ 'location': [null, Validators.required], 'shopper': [null], 'giftMessage': [null], 'retailPrice& ...

Initiate requests to external servers from a NodeJS backend

My NextJS application seamlessly collaborates with a NodeJS server to act as the front end of my innovative three-tier architecture. 'use client'; import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/m ...

What is the best way to implement a subquery using EXISTS in Knex?

I'm currently facing challenges while constructing a query using knex, specifically when it comes to incorporating the 'WHERE' clause with the condition EXISTS (SELECT * FROM caregiver_patient WHERE patient_id IN (0,1)). Below is the origin ...

What are some strategies to enhance the build performance of nextjs in development mode?

I am currently working on a small Next.js application that uses both internal and external libraries. While the production build performs well, I have noticed that the development builds are extremely slow. Whenever I make a change to a page component that ...

Angular: Exploring the most effective strategies for optimizing code within the ".subscribe()" method

Imagine having a component structured like this The Initial Code: import { HttpClient } from '@angular/common/http'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<pre>{{ ...

The variable in my NodeJS code is persisting across multiple requests and not being reset as expected

After setting up a project with the help of Typescript-Node-Starter, I have successfully created a controller and a route to call a specific function. import { Request, Response } from "express"; import axios from "axios"; import { pars ...

Leverage the extended properties of Express.js's Request's generic arguments

I am currently working on extending the Request type to include a property that relies on the request body. However, I am facing an issue where the generic in catchAsync is not being correctly applied and always defaults to any instead of the specified gen ...

Wondering how to implement HubSpot Conversations SDK in a Typescript/Angular application?

Recently, I came across some useful javascript code on this website window.HubSpotConversations.widget.load(); window.HubSpotConversations.widget.refresh(); window.HubSpotConversations.widget.open(); window.HubSpotConversations.widget.close(); Now, I am l ...

A server-side rendered page in Next.js that functions without the need

Hey everyone, I'm curious about the best way to serve an HTML page in a Next Js application without relying on additional JavaScript. I need this because I want to make sure my webpage can be accessed by users who have older phones like Symbian or oth ...

Using localStorage in the client side of nextJS is a breeze

Encountering an error while attempting to retrieve local storage data. Even with the use client directive in place at the beginning, the issue persists. 'use client'; const baseURL = 'https://localhost:7264'; const accessToken = localSt ...

Next/image is encountering an error due to an invalid Element type being generated

Trying to utilize the next/image feature to display an SVG image is causing me some trouble. Every time I attempt this, an error message pops up: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...

Evaluating file selection and uploading functionality within Spectron

Currently, I am faced with the challenge of writing a test for an electron GUI that includes a choose file dialog. Unfortunately, I do not have access to the inner workings of the GUI. Here is the code snippet I have written: await app.client.chooseFile( ...

Angular 6 issue: Data not found in MatTableDataSource

Working on implementing the MatTableDataSource to utilize the full functionality of the Material Data-Table, but encountering issues. Data is fetched from an API, stored in an object, and then used to create a new MatTableDataSource. However, no data is b ...