O WordPress existe há mais de 20 anos, sendo responsável por 42,7% de todos os sites na internet, segundo os dados da W3Techs. Além disso, representa 62,5% do mercado de sistemas de gerenciamento de conteúdo (CMSs) por trás dos sites.
Atualmente, existe uma grande variedade de linguagens de programação e frameworks que permitem o desenvolvimento de sites com navegação fácil e desempenho elevado, ultrapassando a velocidade do WordPress, mesmo depois de realizar todas as otimizações possíveis no painel do WordPress. Um exemplo notável é o Next.js, um framework amplamente adotado que é construído sobre o React.
Este guia mostra como você pode usar o WordPress como um CMS Headless, fornecendo dados para o seu aplicativo Next.js. Também explica como implantar seu código Next.js como um site estático no serviço gratuito de hospedagem de site estático da Kinsta.
Entendendo o WordPress Headless
O conceito de WordPress Headless refere-se ao uso do WordPress apenas para funções de backend, como gerenciamento e armazenamento de conteúdo, enquanto uma plataforma separada, como o Next.js, é usada para lidar com a interface do usuário (frontend).
Esta divisão permite aos desenvolvedores combinar as potentes ferramentas de gerenciamento de conteúdo do WordPress com os benefícios dos avanços em desenvolvimento frontend. Isso abrange funcionalidades como renderização no lado do servidor e geração de páginas web estáticas por meio do Next.js, otimizando, assim, a eficiência e o desempenho do site.
Preparando seu site de WordPress
Antes de iniciar o desenvolvimento com Next.js, é necessário preparar o seu site WordPress para atuar como um CMS Headless.
Se você ainda não tem um site WordPress, pode criar um facilmente com a Kinsta. Há três métodos para você criar um site WordPress usando a Kinsta:
- Crie um site em sua máquina local (talvez usando nossas ferramentas DevKinsta) antes de mover o site para nossos servidores
- Crie um site remotamente usando o painel MyKinsta
- Crie um site remotamente usando a API da Kinsta
Após configurar um site WordPress, existem duas principais estratégias para obter dados do seu CMS WordPress no seu framework de frontend: WPGraphQL e API REST.
A API REST facilita a recuperação de dados no formato JSON usando abordagens JavaScript como a API Fetch ou a biblioteca Axios. A API REST foi integrada ao WordPress desde a versão 4.7, o que significa que ela não requer nenhum plugin para funcionar. Mas para usar o WPGraphQL, que permite que você interaja com os dados do WordPress usando a consulta GraphQL, você deve instalar o plugin WPGraphQL.
Para este guia, utilizaremos a API REST. Para acessar os dados do WordPress em formato JSON, adicione /wp-json/wp/v2 ao final da URL do seu site WordPress.
http://yoursite.com/wp-json/wp/v2Se a API JSON não estiver ativada quando você visitar http://yoursite.com/wp-json por padrão, poderá ativá-la abrindo Permalinks em Settings no painel do WordPress e selecionando Post Name ou qualquer outro de sua escolha, exceto Plain:
Isso funciona para sites locais e públicos do WordPress, oferecendo endpoints para conteúdo que inclui artigos, páginas, comentários e mídia. Para saber mais, leia nosso guia completo sobre a API REST.
Configurando seu ambiente Next.js
O Next.js ajuda os desenvolvedores a criar aplicativos web com facilidade, melhorando o desempenho e otimizando a experiência de desenvolvimento. Um de seus principais recursos é o roteamento baseado em arquivos, que simplifica a criação de rotas.
O Next.js também se concentra muito no desempenho, oferecendo recursos como a divisão automática de código, que carrega somente o JavaScript necessário para cada página, reduzindo significativamente o tempo de carregamento.
Para configurar um projeto Next.js, você pode executar o seguinte comando e usar suas respostas padrão:
npx create-next-app@latest nextjs-wp-demoPara este guia, você pode obter nosso template inicial do Git seguindo estas etapas:
- Visite o repositório do GitHub deste projeto.
- Selecione Use this template > Create a new repository para copiar o código inicial em um repositório dentro da sua conta do GitHub (marque a caixa include all branches).
- Baixe o repositório para o seu computador local e mude para a branch starter-files usando o comando:
git checkout starter-files. - Instale as dependências necessárias executando o comando
npm install.
Quando a instalação estiver concluída, inicie o projeto em seu computador local com npm run dev. Isso torna o projeto disponível em http://localhost:3000/.
Entendendo o projeto
O App Router foi introduzido no Next.js 13, substituindo o diretório page existente para roteamento. O roteamento com o App Router também envolve a criação de pastas dentro do diretório app. Em seguida, você insere um arquivo page.js na pasta apropriada para definir sua rota.
Neste projeto, app é o diretório principal com o qual você estará interagindo, e você encontrará a seguinte estrutura de arquivos.
/
|-- /app
|-- /blog
|-- /[postId]
|-- page.js
|-- page.js
|-- globals.css
|-- layout.js
|-- navbar.js
|-- page.jsSão criadas três páginas: A página inicial para exibir informações básicas, a página do blog para exibir todos os artigos do seu CMS WordPress e a página dinâmica ([postId]/page.js) para renderizar artigos individuais.
Você também notará o componente navbar.js, que é importado para o arquivo layout.js para criar um layout para o projeto.
Obtenha dados do WordPress para o Next.js
Com a API REST do WordPress, você pode buscar artigos, páginas e tipos de artigos personalizados enviando solicitações HTTP para endpoints específicos.
Vamos fazer uma solicitação de pesquisa no arquivo blog/page.js para pesquisar todos os artigos no seu CMS do WordPress e, por fim, fazer uma solicitação para buscar cada artigo dinamicamente no blog/[postId]/page.js com base no parâmetro id passado.
Antes de fazermos essas solicitações, é uma boa prática adicionar o endereço da API JSON a uma variável de ambiente. Essa abordagem garante que a URL da base da API seja facilmente configurável e não codificado em vários arquivos.
Crie um arquivo .env na raiz do seu projeto Next.js e adicione o seguinte:
NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2Certifique-se de que você substitua a URL pela API JSON do seu site. Além disso, adicione .env ao arquivo .gitignore para que você não envie o arquivo para o provedor do Git.
Obtenha todos os artigos do WordPress para o Next.js
Para buscar todos os artigos do seu site WordPress, crie uma função assíncrona chamada getPosts no arquivo blog/page.js. Essa função usa a API Fetch para fazer uma solicitação GET para o endpoint /posts da API REST do WordPress.
async function getPosts() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts;
}Ao receber a resposta, ela converte a resposta em JSON, criando uma array de objetos de post. Esses posts podem então ser renderizados no seu aplicativo Next.js, oferecendo uma lista dinâmica de artigos acessados diretamente do WordPress.
const BlogPage = async () => {
const posts = await getPosts();
return (
<div className="blog-page">
<h2>All Blog Posts</h2>
<p>All blog posts are fetched from WordPress via the WP REST API.</p>
<div className="posts">
{posts.map((post) => {
return (
<Link href={`/blog/${post.id}`} className="post" key={post.id}>
<h3>{post.title.rendered}</h3>
<p
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
></p>
</Link>
);
})}
</div>
</div>
);
};Dentro do componente de página do Next.js, chame getPosts de forma assíncrona para buscar os artigos. Em seguida, utilize a função map para iterar sobre o array posts, renderizando o título e o resumo de cada artigo dentro de um componente <Link>.
Isso não apenas exibe os artigos, mas também envolve cada uma delas em um link que leva a uma exibição detalhada do artigo. Para isso, use o roteamento baseado em arquivo do Next.js, em que o ID do artigo é usado para gerar o caminho da URL dinamicamente.
Obtenha todos os artigos dinâmicos do WordPress para o Next.js
No código acima, cada artigo é agrupado em um link que deve ajudar os usuários a navegar para uma exibição detalhada do artigo.
Para páginas de artigos individuais, o roteamento dinâmico do Next.js é utilizado para criar uma página que busca e exibe um único artigo baseado no seu ID. Uma página dinâmica [postID]/page.js já foi estabelecida no código dos arquivos iniciais.
Crie uma função getSinglePost, semelhante a getPosts, para buscar um único artigo usando o ID do artigo passado como parâmetro.
async function getSinglePost(postId) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`
);
const post = await response.json();
return post;
}No componente da página dinâmica, o ID do artigo é obtido a partir dos parâmetros da URL. A função getSinglePost é então chamada utilizando esse ID, e o conteúdo do artigo é renderizado na página.
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
// ... the rest of the page code
};Em seguida, você pode preencher a página com os dados obtidos:
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
if (!post) {
return <div>Loading...</div>;
}
return (
<div className="single-blog-page">
<h2>{post.title.rendered}</h2>
<div className="blog-post">
<p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}></p>
</div>
</div>
);
};Você pode acessar o código completo em nosso repositório GitHub.
Implantando seu aplicativo Next.js na Kinsta gratuitamente
O serviço de hospedagem de site estático da Kinsta oferece a você a capacidade de hospedar até 100 sites estáticos gratuitamente.
Esse serviço hospeda apenas arquivos estáticos. Se você usar um gerador de site estático como o Next.js, poderá configurar opções que criam seu projeto a partir do GitHub e implantam os arquivos estáticos na Kinsta.
Renderização estática no Next.js
Para habilitar uma exportação estática na versão 13 do Next.js acima, altere o modo output em next.config.js:
const nextConfig = {
output: 'export',
};Ao criar seu projeto, espera-se que o Next.js gere uma pasta de saída contendo os ativos HTML, CSS e JavaScript para o seu aplicativo.
A partir da versão 13, o Next.js possibilita iniciar como um site estático e, posteriormente, oferece a opção de atualizar para utilizar recursos que demandam um servidor. Ao usar esses recursos de servidor, a criação das suas páginas não resulta em páginas estáticas.
Por exemplo, na rota dinâmica, você está obtendo esses dados dinamicamente. Você precisa ser capaz de gerar todos os artigos estaticamente. Isso pode ser feito usando a função generateStaticParams.
A função é utilizada em conjunto com segmentos de rota dinâmica para gerar rotas estaticamente no momento da criação, em vez de sob demanda no momento da solicitação. Quando você compila, o generateStaticParams é executado antes que os layouts ou páginas correspondentes sejam gerados.
Em [postID]/page.js, use a função generateStaticParams para obter a rota de todos os artigos:
export async function generateStaticParams() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts.map((post) => ({
postId: post.id.toString(),
}));
}Quando você executar o comando build, o projeto Next.js gerará um diretório de saída com os arquivos estáticos.
Implantando o Next.js na hospedagem de site estático da Kinsta
Envie seus códigos para o provedor Git de sua preferência (Bitbucket, GitHub ou GitLab). Em seguida, siga estas etapas para implantar seu site estático Next.js na Kinsta:
- Faça login ou crie uma conta para visualizar seu painel MyKinsta.
- Autorize a Kinsta com seu provedor Git.
- Clique em Sites estáticos na barra lateral esquerda e, em seguida, clique em Adicionar site.
- Selecione o repositório e a branch a partir da qual você deseja implantar.
- Atribua um nome exclusivo ao seu site.
- Adicione as configurações de build no seguinte formato:
- Comando build:
npm run build - Versão do node:
18.16.0 - Diretório de publicação:
out
- Comando build:
- Por fim, clique em Criar site.
E é isso! Agora você tem um site publicado em poucos segundos. Você receberá um link para acessar a versão publicada do seu site. Posteriormente, poderá adicionar seu próprio domínio e o certificado SSL, se desejar.
Como alternativa à hospedagem de site estático, você pode optar por implantar seu site estático com o serviço de Hospedagem de Aplicativos da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benefícios e acesso a recursos mais robustos – como escalabilidade, implantação personalizada usando um Dockerfile e análises abrangentes que englobam dados históricos e em tempo real. Você também não precisa configurar seu projeto Next.js para renderização estática.
Resumo
Neste artigo, você aprendeu a aproveitar o WordPress Headless em um projeto Next.js para buscar e exibir artigos dinamicamente. Essa abordagem permite a integração perfeita do conteúdo do WordPress em aplicativos Next.js, oferecendo uma experiência moderna e dinâmica na web.
O potencial da API do CMS headless vai além de artigos; ela permite a recuperação e o gerenciamento de páginas, comentários, mídia e muito mais.
Além disso, hospedar seu CMS WordPress junto com seus frameworks frontend não precisa ser um incômodo. Com o painel MyKinsta da Kinsta, você tem à disposição uma plataforma unificada para gerenciar seus sites, aplicativos, bancos de dados e sites estáticos de WordPress com facilidade.
Deixe um comentário