generateStaticParams() 在 NextJs/TypeScript 中不起作用

Question

我的 NextJs 应用程序中有一个产品页面。动态路由应该使用generateStaticParams()进行静态渲染，但事实并非如此。当我运行“npm run build”时，它会显示“正在生成静态页面 (3/3)”，而它应该远多于 3 个，而且当我在 Vercel 上部署项目并单击单个产品卡时。它没有带我到相应的产品页面，而是给我“500内部服务器错误”。另外，它以前可以工作，但现在我写了一些新类型，否则我没有触及与此页面相关的任何其他内容，但它停止工作了。

import Image from "next/image"

export async function generateStaticParams() {
    const res = await fetch('https://dummyjson.com/products')
    const products = await res.json()

    const paths = products.products.map((product: {id: number}) => ({
        id: `${product.id}`,
    }))

    return paths
}


async function getProduct(id: number) {
    const res = await fetch(`https://dummyjson.com/products/${id}`)
    const data = await res.json()
    return data
}


export default async function Service({ params }: { params: {id: number} }) {
    
    const product = await getProduct(params.id)

    return (
        <div style={{display: "flex", flexDirection: "column"}}>
            <h1>{product.title}</h1>
            <Image src={product.thumbnail} alt="asd" width={400} height={400}/>
            <span>In stock: {product.stock}</span>
        </div>
    )
}

这是家长：

"use client";

import '@/styles/BlogServices.css'
import ServiceSection from '@/components/ServiceSection.tsx'
import React from 'react'


export default function Services() {
    
    interface Product {
        id: number,
        title: string,
        description: string,
        price: number,
        image: string,
        category: string
    }


    const [searchedService, setSearchedService] = React.useState<Product[]>([])
    const [defaultService, setDefaultService] = React.useState<Product[]>([])

    React.useEffect(() => {
        fetch('https://dummyjson.com/products')
        .then(res => res.json())
        .then(res => {
            setSearchedService(res.products)
            setDefaultService(res.products)
        })
    },[])



    function handleSearch (value:string) {
        setSearchedService(defaultService.filter(item => item.title.toLowerCase().includes(value.toLowerCase())))
    }

    return (
        <div className="services-page-container">
            <div className="blog-service-page-title-container parent-flex-column-center dark:bg-slate-900">
                <span className="blog-service-page-short-title">SERVICES</span>
                <h1 className="blog-service-page-title font-bold">Choose and book service with us</h1>
                <p className="blog-service-page-desc text-page-subtitle text-xl dark:text-slate-400">Subscribe to learn about new product features, the latest in technology, solutions, and updates.</p>
            </div>
            <ServiceSection 
                servicePage
                descStyle='services-section-desc'
                handleSearch={handleSearch}
                searchedService={searchedService}
                defaultService={defaultService}
            />
        </div>
    )
}

这是卡片组件本身：

"use client";

import servicearrow from '../public/assets/servicearrow.svg'
import '../styles/Card.css'
import Image, { StaticImageData } from 'next/image'
import { useRouter } from 'next/navigation'

interface ServiceCard {
    id?: number;
    title: string;
    desc: string;
    date?: string;
    img: string | StaticImageData;
    imgStyle: string;
    contStyle: string;
    descStyle: string;
    servicepage?: boolean;
    handleClick?: () => void;
}

export default function ServiceCard(props: ServiceCard) {

    const router = useRouter()

    function handleClick() {
        props.servicepage && router.push(`/services/${props.id}`)
    }
    
    return (
        <div className={`card-container ${props.contStyle} dark:bg-slate-600`} onClick={handleClick}>
            <Image src={props.img} className={`card-img ${props.imgStyle}`} width={300} height={300} alt=''/>
            <span className='card-date'>{props.date}</span>
            <h3 className='text-xl font-bold mb-5 dark:text-slate-200'>{props.title}</h3>
            <p className={`card-description ${props.descStyle} dark:text-slate-50`}>{props.desc}</p>
            <span className='text-service-card-orange flex mt-auto dark:text-orange-700'>View full information <Image className='ml-6' src={servicearrow} alt="" /></span>
        </div>
    )
}

这是文件结构： 注意：“服务”是我所说的产品页面。

我是 TypeScript 的新手，但我仍然认为添加一些新类型不会导致它停止工作。预先感谢。

我什至不知道该尝试什么，因为我在网上找不到任何可以帮助我的东西，而且不熟悉打字稿会让情况变得更糟。

Answer 1

您命名的函数如

generateStaticParams()

或

getServerSideProps()

适用于NextJs的早期版本，也称为page-router。

但是现在你正在使用app-router，它在版本13之后被添加到nextJs中。

当您使用app文件夹作为路线时，页面路由器的功能不可用。您需要根据应用程序路由器更改代码，或者必须通过将应用程序更改为页面来使用页面路由器。

您完全混合了应用程序路由器和页面路由器，请阅读 NextJs 文档，这会有很大帮助。