Dynamic Routing in Next.js

Question

I have started with Next.js and the learning curve has been okay since I was comfortable with React.

So I'm trying to make a dynamic routing in my app -

My live/index.js - (This is where I use getServerSideProps to make the API request and fetch the initial data)

import Link from "next/link";

export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch(`https://api.pandascore.co/matches/running?sort=&page=1&per_page=50&token=#`)
    const data = await res.json()
    const games = data;

    // Pass data to the page via props
    return {
        props:
        {

            results: games,
        }
    }

}

const liveGames = ({ results }) => {
    return (
        <div>
            <div className="game-container">
                <h2>Live Games NOW - </h2>
                {results.map((q) => (
                    <Link href = {'/live/' + q.slug}key={q.slug}>
                       <a className="live_link"> <h3>{q.name}</h3></a>
                    </Link>
                ))}
            </div>
        </div>
    )
}

export default liveGames;

Then my live/[slug].js file - (This is where I render more information about each game after click)

export const getStaticPaths = async () => {
    const res = await fetch(`https://api.pandascore.co/matches/running?sort=&page=1&per_page=50&token=#`);
    const data = await res.json();

    const paths = data.map(o => {
        return {
            params: { slug: o.slug.toString() }
        }
    })
    return {
        paths,
        fallback: false
    }
}

export const getStaticProps = async (context) => {
    const slug = context.params.slug;
    const res = await fetch(`https://api.pandascore.co/matches/running?search[slug]=${slug}&token=#`);
    const data = await res.json();
    console.log(data)

    return {
        props: {
            game: data
        }
    }
}
const live = ({ game }) => {
    return (
        <div>
            <p></p>
            <h1>{game.name}</h1>
            <h1>{game.id}</h1>
        </div>
    );
}

export default live;

So everything kind of works, My index page is perfectly routed and the URLs are being generated according too the slug as I want, I'm even able to get the data in my console from [slug].js , However the return() is not rendering anything at all. I cannot figure out the issue as there are no errors or anything for me to work on,

I had another question is it okay to use getServerSideProps in index.js and getStaticPaths in the [slug].js, Will this potentially cause CORS issues in production or is it fine to do this? (Still new to Next.js so not very sure - My API provider has made it clear all api requests should be made in the server side and suggested me to use Next.js)

Answer 1

Okay so I figured out the issue, I guess the smallest errors are always the hardest ones, I just had to map again through the array, in the [slug].js file and everything is working as I want now.