As I recently transitioned to working with Next.js, I have encountered several challenges. One issue that arose was related to the use of useEffect in React compared to its behavior in Next.js.
In my index file, I have implemented the following code:
import Link from "next/link";
import React, {useState, useEffect} from "react";
import { useRouter } from 'next/router';
export async function getStaticProps({ res }) {
try {
const result = await fetch(`https://api.pandascore.co/matches/running??sort=&page=1&per_page=10&&token=#`);
const data = await result.json();
return {
props: { game: data },
revalidate: 10 // 10 seconds
};
} catch (error) {
res.statusCode = 404;
return { props: {} };
}
}
const upcomingGames = ({ game }) => {
return (
<div className="container">
<h2>Live Games - </h2>
<div className="columns is-multiline">
{game.map(q => (
<div className="column is-half" key={q.id}>
<div className="inner">
<div className="inner__box">
<Link href={'/live/' + q.slug} key={q.slug}>
<a className="h2link" key={q.slug}>{q.name}</a>
</Link></div>
</div>
</div>
))}
</div>
</div>
);
}
export default upcomingGames;
The above component is linked to a [slug].js file which provides additional details about a specific game. However, after deploying the application on Vercel, I noticed an issue where newly added games were not accessible when clicking on them, leading to a fallback page (404).
To address this issue, I made modifications to the code as follows:
Code for getStaticPaths and getStaticProps functions...This adjustment resolved the problem, ensuring that newly added games could be accessed without encountering any errors.