Error: getStaticPaths is required for dynamic SSG pages and is missing for '/[topics]/[content]'

14376

I'm trying to render a dynamic route and I want to make an API call before the page load. So, I tried like below.

This is my [topics]/[content].js file


export default function Detail({ data }) {
    return (
            <div className="code">
                    {data}
            </div>
    )
}
export async function getStaticProps(context) {
    const res = await Axios.get(`https://localhost:5000/${context.params.topics
        .split(" ")
        .join("%20")}/${context.params.content.split(" ").join("%20")}`)
    return {
        props: {
            data: res.data
        },
    }
}

1 Answer

4 years ago by

You're rendering a dynamic route so use getServerSideProps() instead of getStaticProps()

export async function getServerSideProps(context) {
    const res = await Axios.get(`https://localhost:5000/${context.params.topics
        .split(" ")
        .join("%20")}/${context.params.content.split(" ").join("%20")}`)
    return {
        props: {
            data: res.data
        },
    }
}
4 years ago by Divya