Next.js & CMS

Estou aprendendo muito com estes cursos de Next.js! O Next fornece um arsenal de features intuitivas e de fácil implementação, tanto que quis aplicar logo o que está sendo passado nesses cursos na prática, então fiz um pequeno projeto com o layout que foi disponibilizado no curso de Guia de estilos: montando páginas com componentes, neste projeto foquei bastante em integrar o conteúdo da página ao DatoCMS, no getStaticProps e no getStaticPaths (uma das features de Data Fetching) para gerar rotas dinâmicas.

Então o projeto é este: "Casa Verde", não está cem porcento, porém pratiquei bastante o que gostaria de implementar. Vou documentar ele um pouco aqui para quem queira reforçar o conteúdo, além do porquê eu tive alguns problemas que não foram abortados no curso.

Hydration Error

• Ao renderizar seu aplicativo, havia uma diferença entre a árvore do React que foi pré-renderizada (SSR/SSG) e a árvore do React que foi renderizada durante a primeira renderização no Browser. A primeira renderização é chamada de Hidratação, que é um recurso do React. Fonte: Next.js

Este foi um erro que ocorreu pois eu estava tentando modificar a maneira que os dados seriam apresentados na página, para ser mais específico na ordem de um vetor de objetos. Resumindo, eu estava tentando renderizar o conteúdo do vetor de objetos cmsAllProductContent vindo de getStaticProps com uma ordem diferente da original que é fornecida através de getStaticProps, como foi a primeira fez utilizando estes recursos e ainda estou aprendendo Next.js não sabia que o getStaticProps decora exatamente a mesma estrutura de dados no servidor. Para resolver este problema, todos os dados que um componente renderiza devem vir via props, com o getStaticProps podemos traçar a forma que os dados devem ser rederizados na página. Isto ocorre pois o servidor espera renderizar determinados dados, mas são modificados no componente.

Paths Mutáveis

Para quem quiser implementar os Paths sem especificar em algum arquivo, ou diretamente no código fonte, podemos fazer uma requisição para o CMS do slug específico e mapeá-lo no próprio getStaticPaths:

export async function getStaticPaths() {
  const productId = `
    query {
      allProductContents {
        id
      }
    }`

  const pathsList = await cmsService({
    query: productId,
  })

  const paths = pathsList.allProductContents.map((product) => {
    return { params: { slug: `${product.id}` } }
  })

  return {
    paths: paths,
    fallback: 'blocking',
  }
}

Assim seus paths serão gerados dinâmicamente conforme o conteúdo no CMS ser atualizado. Neste caso, se adicionado um novo produto, o path para tal produto já ficará listado no array paths.

Então estes foram os pequenos contrapontos que vale ressaltar, o resto não tem nada que não já tenha sido apresentado no curso. Utilizando o Tailwind CSS para desenvolver a interface e integrando o Dato, pude ter uma página flexível e configurável em menos de três dias (claro que é uma demo, mas já conta kk). No mais sem comentários, muito bom trabalhar com o Next.js! Valeu, Mario Souto!