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()

Etiqueta: create-app

NextJS – Criar nova app