Next.JS getInitialProps( ctx ) ctx未定义

Question

这是我的密码

import NavLayout from "../../components/Navigation/Navigation";

export default function WorldOfWarcraft({ game }) {
    return (<NavLayout>
        {game.link}
    </NavLayout>)
}

WorldOfWarcraft.getInitialProps = async (ctx) => {
    const response = await fetch(`http://localhost:6969/favGames/${ctx.query.id}`);
    const game = await response.json();

    return { game };
}

我在另一个“页面”中有相同的代码，而且工作正常。这是完全相同的代码，不同的名称，它不工作。当我尝试记录ctx时，它会返回未定义的内容。另外，这是“index.js”

import Link from "next/link";
import NavLayout from "../../components/Navigation/Navigation";

export default function FavGames({ games }) {
    console.log(games);
    return (<NavLayout title={'Fav Games Page'}>
        <h1>Favorite Games</h1>
        <ul>
            {games.map(game => (
                <li key={game.id}>
                    <Link href={`/fav-games/[games]`} as={`/fav-games/${game.id}`}>
                        <a>
                            {game.title}
                        </a>
                    </Link>
                </li>
            ))}
        </ul>
    </NavLayout>);
}

FavGames.getInitialProps = async () => {
    const response = await fetch('http://localhost:6969/favGames');
    const games = await response.json();

    return { games };
}

因此，我动态地从index.js链接到games.js。我不明白ctx为什么返回undefined：

Answer 1

我已经解决了。这太疯狂了。我被困了两天，原因是在这个代码中：

 <Link href={`/fav-games/[games]`} as={`/fav-games/${game.id}`}>

[games]是我所需要的。所以在这里而不是这个

const response = await fetch(`http://localhost:6969/favGames/${ctx.query.***id***}`);

应该是这样：

const response = await fetch(`http://localhost:6969/favGames/${ctx.query.***games***}`);