Mi ruta dinámica con NextJS no terminará de compilarse cuando la pruebe. Se atasca y luego muere.

Aquí está mi ruta de enlace que conduce a la página dinámica:

 const options = props.response.data.map(r => ( <Link href={`/games/${r.gameID}`}> <Flex key={r.gameID} borderWidth="1px"> <Box p="2" as="button" borderWidth="1px"> <Image src={r.thumb} alt={props.gameID} width={{ md: 20 }} height={{ md: 10 }} /> </Box> <Spacer /> <Box p="2"> <Text>{r.external} - {r.cheapest}</Text> </Box> </Flex> </Link> ))

Esto lleva a mi página dinámica NextJS llamada juegos que usa el parámetro [id] en la URL. Llamo a async getStaticPaths y getStaticProps que se muestran a continuación:

 export async function getStaticPaths(){ const router = useRouter() const gameID = router.query.id return { params: { id: gameID } } } export async function getStaticProps({ params }) { // Call an external API endpoint to get game data // Access route params: const response = await axios.get(`https://www.cheapshark.com/api/1.0/games?id=${params.id}`) const gameData = response.json() return { props: { data: gameData, }, } }

Luego paso el gameData como accesorio a la función exportada predeterminada. ¿Alguna idea de dónde me estoy equivocando?