This is my code

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 };
}

I have same code in another 'page' and it works fine. This is absolutely same code with different names and it doesn't work. When I try to log ctx it returns undefined. Also, this is '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 };
}

So, I link from index.js to [games].js dynamically. I don't understand why ctx returned undefined :(