getServerSideProps

Para recolher informação de forma dinâmica, usamos o metodo getServerSideProps() em NextJS.

Este metodo consulta a API sempre que o link é requisitado pelo cliente.

No exemplo em baixo fazemos um query à API do WordPress e a um CPT chamado KB criado para o efeito desta Base de Conhecimento

export async function getServerSideProps(context) {

    const {id} = context.query

    const res_kb = await fetch(`WORDPRESS_URL}/kb`)
    const kbs = await res_kb.json()
  
    return { 
        props: { 
            kbs
        }
    }
}

Para recolher informação de um post especifico usamos o parametro context que contém informação da URL. Neste caso estamos a usar o campo ID para filtar uma etiqueta no WordPress (tag). O valor da constante id vem do parametro context-query que retorna o ultimo valor da URL, sendo neste caso o ID da tag.

export async function getServerSideProps(context) {

    const {id} = context.query

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

Vamos desenvolver o seu próximo projecto!