Next.js getStaticProps不运行,下次构建时显示错误

nwsw7zdq  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(92)
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;

字符串
这是我在medusa服务器上的动态路由代码,但是getStaticProps从来没有运行过,所以ProductPage中的product是未定义的。
另外,当我运行下一个构建时,它会显示此错误:
类型错误:输入“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”|“元数据”|“预设值”|“元数据”|“预设值”|“配置”|...还有6个...|“generateMetadata”,“">”doeaint“{ [x:string]:never;}”. s不满足约束“{ [x:string]:never;}"。属性”getStaticPaths“与索引签名不兼容。类型”GetStaticPaths "不可分配给类型“never
我找了这么多的解决方案,没有工作,有人可以帮助我吗?
我尝试了不同的方法来写一个代码在Typescript,但我不明白的问题。

dxxyhpgq

dxxyhpgq1#

我今天也有同样的问题。
我使用的是NextJs的最新版本(13.4.9)和应用程序文件夹结构。
我已经有一段时间没有使用前端了,但是我在文档中发现了一种处理动态路由静态路径的新方法。
我可以使用generateStaticParams代替getStaticPathsgetStaticProps解决这个问题,here's an example.
我希望这对你有帮助。

3duebb1j

3duebb1j2#

我得到了同样的错误,但出于不同的原因。在我的情况下,这是因为我在文件中没有默认值的情况下导出此页面。
生成错误的代码:

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

export deafult HomePage;

字符串
解决方法:

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

export deafult HomePage;


来源:https://github.com/vercel/next.js/discussions/48724#discussioncomment-5884311
P.S.也许有人会读这个答案,这将是有用的

gab6jxml

gab6jxml3#

当页面组件文件中的导出与Next.js的预期冲突时,通常会出现您遇到的错误。请确保以下内容:
默认导出:您的页面组件([productSlug].tsx)应该具有页面组件本身的默认导出。
Next.js函数的命名导出:只有getStaticProps和getStaticPaths应该是此文件中的命名导出。它们不应该包含在默认导出中或导出到任何其他对象中。
TypeScript类型:仔细检查你的TypeScript类型。确保你没有导出任何与Next.js数据获取方法(getStaticProps和getStaticPaths)不直接相关的类型、接口或组件。
正确的结构如下所示:

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

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

字符串

相关问题