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 a similar code on another 'page' and it functions correctly. This piece of code is exactly the same, just with different identifiers, yet it does not work as expected. When attempting to log ctx, it returns as undefined. Additionally, this code is part of '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 };
}
In essence, I am dynamically linking from index.js to [games].js file. However, the issue lies in why ctx is returning as undefined :(