Next.js getStaticProps doesn't run and on next build shows error

Question

import { medusa } from "@/app/requests/medusaClient";
import { useState, useEffect, JSXElementConstructor, PromiseLikeOfReactNode, ReactElement, ReactNode, ReactPortal } from "react";
import { Product} from "@/app/models/productModel";
import { GetStaticPaths, GetStaticPathsContext, GetStaticProps, InferGetStaticPropsType, NextPage, NextPageContext } from "next";
import { ParsedUrlQuery } from "querystring";

interface Iparams extends ParsedUrlQuery {
    productSlug: string;
}
interface ProductsProps {
    product:Product;
}

const ProductPage:NextPage<ProductsProps> = ({product}) => {
   
    console.log(product);
    return (
        <>  
        <h1>Product details</h1>
        <div>
            <h2>
                {product?.title}
            </h2>
        </div>

      
        </>
    )
}

export const getStaticPaths:GetStaticPaths = async () =>{
    
    const response = await medusa.products.list();
   

    const paths = response.products.map((product:Product) => {
        return {
            params: {
                productSlug: product.id
            }
        }
    })
        console.log(paths);
    return {
        paths,
        fallback:false
    }
}
export const getStaticProps: GetStaticProps<ProductsProps,Iparams> = async(context) => {
    console.log("GET STATIC PROPS");
    
    const productSlug=context.params!
    
    console.log('id', productSlug.productSlug);

    const res = await fetch(`http://localhost:9000/store/products/${productSlug.productSlug}`)
    const product = (await res.json()) as Product;
    
    return {
        props: {
            product
        }
    }

    

    

  }


  export default ProductPage;

This is my code for dynamic routing with medusa server, but getStaticProps never runs, so product in ProductPage is undefined.

Also when I run next build it shows this error:

Type error: Type 'OmitWithTag<typeof import("C:/Users/Katarina/Desktop/medusaProductProject/product_project/src/app/pages/products/[productSlug]/page"), "revalidate" tProject/product_project/src/app/pages/products/[productSlug]/page"), "revalidate" | "metadata" | "default" | "metadata" | "default" | "config" | ... 6 more ... | "generateMetadata", "">' doeaint '{ [x: string]: never; }'.s not satisfy the constraint '{ [x: string]: never; }'. Property 'getStaticPaths' is incompatible with index signature. Type 'GetStaticPaths' is not assignable to type 'never

I searched for so many solutions and nothing works, can someone help me with this?

I tried different ways to write a code in Typescript, but I don't understand the problem.

Answer 1

The error you're encountering typically arises when there are exports in your page component file that conflict with Next.js's expectations. Ensure the following:

Default Export: Your page component ([productSlug].tsx) should have a default export of the page component itself.

Named Exports for Next.js Functions: Only getStaticProps and getStaticPaths should be named exports in this file. They should not be included in the default export or exported within any other object.

TypeScript Types: Double-check your TypeScript types. Ensure that you're not exporting any type, interface, or component that doesn't directly relate to the Next.js data fetching methods (getStaticProps and getStaticPaths).

A correct structure looks like this:

// Inside [productSlug].tsx
const ProductPage = ({ product }) => {/* ... */};
export default ProductPage;

export const getStaticPaths = async () => {/* ... */};
export const getStaticProps = async (context) => {/* ... */};

Answer 2

I have the same issue today.

I'm using the last version of NextJs (13.4.9) with the app folder structure.

It's been a while since I worked with the frontend but I found on documentation there's a new way to handle dynamic routes and static paths.

I can solve this issue using the generateStaticParams instead of getStaticPaths and getStaticProps, here's an example.

I hope this helps you.

Answer 3

I got the same error but for a different reason. In my case, it was because I had the export of this page without default in the file.

The code that generates the error:

export const HomePage = () => {
  return <Home />;
}

export deafult HomePage;

Solution:

const HomePage = () => {
  return <Home />;
}

export deafult HomePage;

Source: https://github.com/vercel/next.js/discussions/48724#discussioncomment-5884311

P.S. Maybe someone who will read this answer, it will be useful