Ao construir 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 a minha aplicação Next.js.

Eu precisava de uma solução que me permitisse usar o WordPress como um CMS sem cabeça. 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 sem cabeça?

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

É ó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 encontrou Next.js, é um framework poderoso baseado em React que torna muito fácil construir aplicações otimizadas, com renderização no servidor (SSR).

Ele oferece um monte de recursos prontos para uso, como roteamento baseado em arquivos, rotas de API, gerência de sites estáticos (SSG) e regeneração estática incremental (ISR). Tudo isso o torna uma ótima escolha para criar sites rápidos e amigos do SEO.

Como conectar WordPress e Next.js

Ao usar WordPress como CMS sem cabeça, existem duas formas primárias de conectar sua aplicação Next.js ao backend do WordPress:

  1. API REST do WP: O WordPress vem com uma API REST integrada, 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 WPGraphQL), o que torna fácil consultar e recuperar conteúdo específico, como posts de blog, para uso em um framework front-end como React.

Embora a API REST seja popular, vamos optar por WPGraphQL porque ele permite consultas mais precisas e flexibilidade. Com GraphQL, você pode pedir exatamente o dado 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.

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

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

Vamos prosseguir para o frontend.

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

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

1. Instale graphql-request para fazer as coisas fáceis quando consultar a 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 construção e passados como props para o componente. Os posts do blog são renderizados por componentes personalizados como BlogHeader, BlogPosts e BlogNewsletter, tornando a página dinâmica e eficiente.

Este exemplo demonstra como o WordPress pode ser usado como um CMS sem cabeça para uma aplicação Next.js. Agora que você integrou o WordPress com sucesso como um CMS sem cabeça em sua aplicação Next.js, você pode continuar buscando mais dados da API GraphQL para melhorar a funcionalidade do seu aplicativo.

Conclusão

Usando o WordPress como um CMS sem cabeça e o Next.js para a interface do usuário, podemos construir um blog rápido e amigável com SEO enquanto aproveitamos as poderosas funcionalidades de gerenciamento de conteúdo do WordPress.

Ao usarmos o WPGraphQL, tivemos acesso a uma maneira eficiente de buscar apenas os dados necessários, dando-nos mais controle e melhorando o desempenho do site.

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