Reactjs Can'；无法使用动态id获取动态页面的SSR

我正在尝试SSR一个Dnamy页面，但它不起作用。getInitialProps方法中的props和query参数总是空的，我无法理解这是怎么可能的

下面的代码属于pages/products/[id].tsx中的文件。 当我直接访问url或使用以下链接访问url时：

<Link href="/products/[id]" as={`/products/${this.state.item.id}`}>

什么也没发生。有人能解释一下这种行为是从哪里来的吗

import { Component } from "react";
import { useRouter } from 'next/router';
import { Article } from "../../interfaces/article.interface";
import { OverviewItem } from "../../components/shop/overview/overview-item/overview-item";

interface ProductItemPageProps {
    item: Article
    other: Article[];
}

const ProductItemPage = (props: ProductItemPageProps) => {
    console.log(props);  
    const router = useRouter()

    return (
        <div>
            <OverviewItem item={props.item}></OverviewItem>
    <p>TTest</p>
        </div>
    )
}

ProductItemPage.getInitialProps = async ({query}) => {
    console.log("ProductItemPage getInitialprops");
    const { id } = query;
    const graphqlQuery = {
        query: `{article(id:${id}) {id name image price} articles(last:3) {id name image price}}`
    };
    const stringifiedQuery = JSON.stringify(graphqlQuery);
    console.log('Query', stringifiedQuery);
    const res = await fetch(`http://localhost:8888/graphql`, {
        method: 'POST',
        mode: 'cors',
        body: stringifiedQuery
    });
    const arr = [];
    var item = {}
    var other = [];
    try {
        const data = await res.json();
        item = data.data.article;
        other = data.data.articles;
        console.log("AAAAAA", data);
    } catch (exception) {
        console.log("Error", exception);
        item = {
            "aaaah": "AAAAAAAAASDASD" // EVEN THIS DOESN'T SHOW IN PROPS
        };
    }
    return {
        item,
        other
    }
}

export default ProductItemPage;

从“react”导入{Component}；
从“下一个/路由器”导入{useRouter}；
从“../../interfaces/Article.interface”导入{Article}”；
从“../../components/shop/overview/overview item/overview item”导入{overview item}”；
接口ProductItemPageProps{
项目：第条
其他：第[]条；
}
const ProductItemPage=（props:ProductItemPageProps）=>{
控制台日志（道具）；
const router=useRouter（）
返回(
测试

)
}
ProductItemPage.getInitialProps=async（{query}）=>{
log（“ProductItemPage getInitialprops”）；
const{id}=query；
常量图形QLQuery={
查询：`{article（id:${id}）{id name image price}articles（last:3）{id name image price}`
};
const stringifiedQuery=JSON.stringify（graphqlQuery）；
log（'Query'，stringifiedQuery）；
const res=等待取数(`http://localhost:8888/graphql`, {
方法：“POST”，
模式：“cors”，
正文：stringifiedQuery
});
常数arr=[]；
变量项={}
var其他=[]；
试一试{
const data=wait res.json（）；
项目=data.data.article；
其他=data.data.articles；
console.log（“AAAAA”，数据）；
}捕获（例外）{
日志（“错误”，异常）；
项目={
“aaaaah”：“aaaaaaaasdasd”//即使这也不会显示在道具中
};
}
返回{
项目,，
其他
}
}
导出默认ProductItemPage；

浏览器控制台或终端（从下一个dev服务器输出）中是否有任何错误？如果您注释掉

getInitialProps

，是否有效？