Enquanto o getServerSideProps() faz uma consulta à API sempre que o cliente requisita a informação o método getStaticProps() recolhe toda a informação durante o processo de build no NextJS. No entanto, para que todas as páginas estáticas sejam geradas, é necessário usar o método getStaticPaths() que retorna os caminhos a serem gerados.

export async function getStaticPaths() {
    
    const res_tags = await fetch(`WORDPRESS_URL/tags`)
    const tags = await res_tags.json()

    const paths = tags.map((tag) => ({
        params: { id: tag.id.toString() },
    }))

    return { paths, fallback: false }
}

export async function getStaticProps(context) {

    const {id} = context.params

    const res_kb = await fetch(`WORDPRESS_URL/kb`)
    const kbs = await res_kb.json()

    const res_tags = await fetch(`WORDPRESS_URL}/tags/${id}`)
    const tag = await res_tags.json()
  
    return { 
        props: { 
            tag,
            kbs
        }
    }
}

No exemplo em cima, estamos a gerar o path com o método getStaticPaths() que adiciona um parametro id ao URL. No método getStaticProps() acedemos ao parametro id através do context.params (ao contrário do context.query no método getServerSideProps()

Knowledge Base

weatherplllatform.com

Vamos desenvolver o seu próximo projecto!