what is getStaticProps

In the nextjs they has export function of getStaticProps, Which it will runs on the server side also known as static site generation and never runs from the client side, In additional the add on features like the data can be fetch from any external sources of api endpoint or any CMS

Syntax for using getStaticProps

    export async function getStaticProps(){
        const apiEndpoint = await fetch(''); // Any api endpoints
        const data = await response.json();
        return {
            props: {
                 source: mdxSource,
            }
        }
    }

When its needed?

• For the static page, Where data never gonna change
• Blogging Website
• It useful for SEO purpose which is (Search Engine Optimization)

what is getStaticPath

As same of getStaticProps nextjs has export function getStaticPath, The getStaticPath is needed when you use the getStaticProps when the page has routes like dynamic, It's needs to used when you using the getStaticProps, Data will be come from the file system,

Example for getStaticPath

export async function getStaticPaths(){
    const files = fs.readdirSync(path.join('content'))
    const paths = files.map(filename => ({
        params: { slug: filename.replace('.mdx','')}
    }))
    return { paths, fallback: false,}
}