O Next.js é um framework de React que tem como objetivo simplificar o desenvolvimento de aplicações web, oferecendo recursos como SSR (Server-Side Rendering) e SSG (Static Site Generation) e uma estrutura de roteamento avançada.

O Contentful, por sua vez, é um CMS (Content Management System) que permite gerenciar conteúdo de forma simples e eficiente.

Neste artigo, você aprenderá a construir um blog usando o Next.js como frontend e o Contentful como CMS.

Você verá como configurar o Contentful, integrá-lo com o Next.js e implementar recursos como paginação, filtros e buscas.

Configurando o Contentful

Para começar, você precisará criar uma conta no Contentful e configurar seu espaço.

Em seguida, crie um modelo de conteúdo para o seu blog, definindo campos como título, descrição, corpo do post e imagem de destaque.

Com o modelo de conteúdo criado, você poderá começar a adicionar conteúdo ao seu blog.

Basta criar um novo "Entry" e preencher os campos do modelo de conteúdo.

Integrando o Contentful com o Next.js

Com o conteúdo do blog criado no Contentful, é hora de integrá-lo ao Next.js.

Para fazer isso, você pode usar a biblioteca "contentful" do JavaScript SDK do Contentful.

Comece instalando a biblioteca "contentful" usando o gerenciador de pacotes npm:

npm install contentful

Em seguida, crie um arquivo de configuração do Contentful, que armazenará as chaves de acesso à API do Contentful. Esse arquivo deve ter o seguinte formato:

const client = require('contentful').createClient({
  space: 'YOUR_SPACE_ID',
  accessToken: 'YOUR_ACCESS_TOKEN'
})

export default client

Substitua "YOUR_SPACE_ID" e "YOUR_ACCESS_TOKEN" pelas suas chaves de acesso ao Contentful.

Agora, você pode usar o cliente do Contentful para recuperar o conteúdo do blog.

Para fazer isso, crie uma página de index.js e adicione o seguinte código:

import client from '../utils/contentful'

export default function Home({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key={post.sys.id}>
          <h2>{post.fields.title}</h2>
          <p>{post.fields.description}</p>
          <img src={post.fields.image.fields.file.url} />
        </div>
      ))}
    </div>
  )
}

export async function getStaticProps() {
  const { items } = await client.getEntries({ content_type: 'post' })

  return {
    props: {
      posts: items
    }
  }
}

Este código importa o cliente do Contentful, define uma página de índice e recupera o conteúdo do blog usando o método "getEntries" do cliente. Em seguida, ele renderiza o conteúdo do blog na página.

Implementando recursos de blog avançados

Com o conteúdo do blog integrado ao Next.js, você pode começar a implementar recursos avançados, como paginação, filtros e buscas.

Por exemplo, para implementar paginação, você pode modificar a função "getStaticProps" para retornar apenas os posts de uma determinada página:

export async function getStaticProps({ params }) {
  const { page } = params;
  const { items, total } = await client.getEntries({
    content_type: "post",
    skip: (page - 1) * POSTS_PER_PAGE,
    limit: POSTS_PER_PAGE,
  });

  return {
    props: {
      posts: items,
      totalPages: Math.ceil(total / POSTS_PER_PAGE),
      currentPage: parseInt(page),
    },
  };
}

Este código define a constante POSTS_PER_PAGE, que indica quantos posts devem ser exibidos em cada página, e modifica a função "getStaticProps" para retornar apenas os posts de uma determinada página, com base no parâmetro "page".

Para criar os links de paginação na página, você pode usar o componente "Link" do Next.js:

import Link from "next/link";

export default function Home({ posts, totalPages, currentPage }) {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.sys.id}>
          <h2>{post.fields.title}</h2>
          <p>{post.fields.description}</p>
          <img src={post.fields.image.fields.file.url} />
        </div>
      ))}
      <div>
        {Array.from({ length: totalPages }, (_, i) => (
          <Link href={`/blog/page/${i + 1}`} key={i}>
            <a style={{ fontWeight: currentPage === i + 1 ? "bold" : "normal" }}>
              {i + 1}
            </a>
          </Link>
        ))}
      </div>
    </div>
  );
}

Este código cria os links de paginação usando um loop "Array.from" e o componente "Link". Ele também destaca o link da página atual, com base no parâmetro "currentPage".

Conclusão

Neste artigo, você aprendeu a construir um blog usando o Next.js como frontend e o Contentful como CMS.

Você viu como configurar o Contentful, integrá-lo com o Next.js e implementar recursos avançados, como paginação, filtros e buscas.

Com essas ferramentas em mãos, você está pronto para criar blogs e outros sites dinâmicos de forma rápida e eficiente.