Na construção de um site de blog dinâmico, é comum buscar dados de uma fonte de conteúdo, como um CMS (Sistema de Gerenciamento de Conteúdo) como o WordPress.

Recentemente, encarrei o desafio de integrar o WordPress em meu projeto existente Next.js. Eu tinha um blog hospedado no WordPress e quis migrá-lo para minha aplicação Next.js.

Eu precisava de uma solução que me permitisse usar o WordPress como um CMS headless (CMS sem interface). O objetivo era simples: aproveitar a potência do WordPress para gerenciar conteúdo enquanto utilizava um framework moderno de frontend para exibi-lo.

Neste artigo, vamos passar por como integrar o WordPress a um aplicativo Next JS.

Por que usar um CMS headless?

Um CMS headless separa o gerenciamento de conteúdo (back-end) da camada de apresentação (front-end). Isso dá aos desenvolvedores mais flexibilidade sobre como o conteúdo é entregue e exibido, sem serem restringidos por temas ou layouts tradicionais.

É ótimo para performance e escalabilidade, oferecendo mais controle sobre como o conteúdo é renderizado no frontend. Neste caso, você usará o WordPress como seu sistema de gerenciamento de conteúdo mas exibirá o conteúdo de uma maneira mais moderna e performante usando Next.js.

O que é Next.js?

Se você ainda não tiver encontrado Next.js, é um framework poderoso baseado em React que torna muito fácil construir aplicações otimizadas, com renderização em servidor (SSR).

Ele oferece um monte de recursos prontos para uso, como roteamento baseado em arquivos, rotas de API, geração de sites estáticos (SSG) e regeneração estática incremental (ISR). Todos esses recursos fazem dele uma ótima escolha para criar sites rápidos e amigos das SEO.

Como Conectar WordPress e Next.js

Quando usar WordPress como um CMS sem cabeça, existem duas formas principais de conectar sua aplicação Next.js ao backend do WordPress:

  1. WP REST API: O WordPress vem com uma API REST embutida, que permite recuperar conteúdo do WordPress em formato JSON.

  2. WPGraphQL: O WordPress suporta gerenciamento de conteúdo sem cabeça através do uso de GraphQL (com plugins como o WPGraphQL), facilitando a consulta e recuperação de conteúdo específico, como posts de blog, para uso em um framework de front-end como React.

Embora a API REST seja popular, vamos optar pelo WPGraphQL pois ele permite consultas mais precisas e flexibilidade. Com GraphQL, você pode solicitar exatamente os dados de que precisa, o que pode reduzir a quantidade de dados transferidos e melhorar o desempenho.

Passos para Conectar WordPress e Next.js Usando WPGraphQL

A primeira coisa que você precisa fazer é instalar o plugin WPGraphQL em seu site WordPress. Este plugin habilita a funcionalidade de API GraphQL dentro do WordPress. Você pode instalar o plugin como qualquer outro, navegando até o painel de admin do WordPress.

Primeiro, vá até Plugins e selecione Add New. Em seguida, procure por WPGraphQL e, assim que o encontrar, simplesmente instale e ative o plugin.

Depois de instalar e ativar o plugin, a IDE GraphQL aparecerá no painel de admin do WordPress. Aqui, você pode testar diferentes consultas que possa precisar para seu desenvolvimento frontend.

Vamos prosseguir para o frontend.

Como Fazer uma solicitação de Dados de WPGraphQL em Next.js

No seu projeto Next.js, você precisará fazer uma solicitação de dados da API GraphQL. Aqui está um exemplo simples usando graphql-request:

1. Instale graphql-request para facilitar as consultas à API GraphQL:

npm install graphql-request

2. Em seu componente Next.js, crie uma consulta GraphQL para buscar os posts do blog:

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

No código acima, a sua aplicação Next.js busca posts do blog do seu backend WordPress usando GraphQL e os exibe no frontend. A consulta GraphQL é criada para recuperar detalhes de posts como o título, autor, conteúdo e imagem destacada.

Usando o Next.js getStaticProps, os dados são buscados no tempo de build e passados como props para o componente. Os posts do blog são renderizados por meio de componentes personalizados como BlogHeader, BlogPosts e BlogNewsletter, tornando a página dinâmica e eficiente.

Isso demonstra como o WordPress pode ser usado como um CMS sem cabeça para um aplicativo Next.js. Agora que você integrou com êxito o WordPress como um CMS sem cabeça em seu aplicativo Next.js, pode continuar a buscar mais dados da API GraphQL para aprimorar a funcionalidade do seu aplicativo.

Conclusão

Ao usar o WordPress como um CMS sem cabeça e o Next.js para o front-end, podemos construir um blog rápido e amigável para SEO, aproveitando os poderosos recursos de gerenciamento de conteúdo do WordPress.

O uso do WPGraphQL nos permitiu buscar com eficiência apenas os dados de que precisávamos, dando-nos mais controle e melhorando o desempenho do site.

Espero que isso tenha sido útil. Boa programação!