{"id":67411,"date":"2024-03-04T05:08:42","date_gmt":"2024-03-04T08:08:42","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=67411&preview=true&preview_id=67411"},"modified":"2024-03-08T06:48:31","modified_gmt":"2024-03-08T09:48:31","slug":"wordpress-headless-para-next-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-para-next-js\/","title":{"rendered":"Como Usar o WordPress como um CMS Headless para o Next.js"},"content":{"rendered":"

O WordPress existe h\u00e1 mais de 20 anos, sendo respons\u00e1vel por 42,7% de todos os sites na internet, segundo os dados da W3Techs<\/a>. Al\u00e9m disso, representa 62,5% do mercado de sistemas de gerenciamento de conte\u00fado (CMSs) por tr\u00e1s dos sites.<\/p>\n

Atualmente, existe uma grande variedade de linguagens de programa\u00e7\u00e3o e frameworks que permitem o desenvolvimento de sites com navega\u00e7\u00e3o f\u00e1cil e desempenho elevado, ultrapassando a velocidade do WordPress, mesmo depois de realizar todas as otimiza\u00e7\u00f5es poss\u00edveis no painel do WordPress. Um exemplo not\u00e1vel \u00e9 o Next.js<\/a>, um framework amplamente adotado que \u00e9 constru\u00eddo sobre o React.<\/p>\n

Este guia mostra como voc\u00ea pode usar o WordPress como um CMS Headless, fornecendo dados para o seu aplicativo Next.js. Tamb\u00e9m explica como implantar seu c\u00f3digo Next.js como um site est\u00e1tico<\/a> no servi\u00e7o gratuito de hospedagem de site est\u00e1tico<\/a> da Kinsta.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Entendendo o WordPress Headless<\/h2>\n

O conceito de WordPress Headless refere-se ao uso do WordPress apenas para fun\u00e7\u00f5es de backend, como gerenciamento e armazenamento de conte\u00fado, enquanto uma plataforma separada, como o Next.js, \u00e9 usada para lidar com a interface do usu\u00e1rio (frontend).<\/p>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Esta divis\u00e3o permite aos desenvolvedores combinar as potentes ferramentas de gerenciamento de conte\u00fado do WordPress com os benef\u00edcios dos avan\u00e7os em desenvolvimento frontend. Isso abrange funcionalidades como renderiza\u00e7\u00e3o no lado do servidor e gera\u00e7\u00e3o de p\u00e1ginas web est\u00e1ticas por meio do Next.js, otimizando, assim, a efici\u00eancia e o desempenho do site.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Preparando seu site de WordPress<\/h3>\n

Antes de iniciar o desenvolvimento com Next.js, \u00e9 necess\u00e1rio preparar o seu site WordPress para atuar como um CMS Headless<\/a>.<\/p>\n

Se voc\u00ea ainda n\u00e3o tem um site WordPress, pode criar um facilmente com a Kinsta. H\u00e1 tr\u00eas m\u00e9todos para voc\u00ea criar um site WordPress usando a Kinsta:<\/p>\n

    \n
  1. Crie um site em sua m\u00e1quina local<\/a> (talvez usando nossas ferramentas DevKinsta<\/a>) antes de mover o site para nossos servidores<\/li>\n
  2. Crie um site remotamente usando o painel MyKinsta<\/a><\/li>\n
  3. Crie um site remotamente usando a API da Kinsta<\/a><\/li>\n<\/ol>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    Ap\u00f3s configurar um site WordPress, existem duas principais estrat\u00e9gias para obter dados do seu CMS WordPress no seu framework de frontend: WPGraphQL e API REST<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

    A API REST facilita a recupera\u00e7\u00e3o de dados no formato JSON usando abordagens JavaScript como a API Fetch<\/a> ou a biblioteca Axios<\/a>. A API REST foi integrada ao WordPress desde a vers\u00e3o 4.7, o que significa que ela n\u00e3o requer nenhum plugin para funcionar. Mas para usar o WPGraphQL, que permite que voc\u00ea interaja com os dados do WordPress usando a consulta GraphQL, voc\u00ea deve instalar o plugin WPGraphQL.<\/p>\n

    Para este guia, utilizaremos a API REST. Para acessar os dados do WordPress em formato JSON, adicione \/wp-json\/wp\/v2<\/code> ao final da URL do seu site WordPress.<\/p>\n

    http:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n
    Se a API JSON n\u00e3o estiver ativada quando voc\u00ea visitar http:\/\/yoursite.com\/wp-json<\/code> por padr\u00e3o, poder\u00e1 ativ\u00e1-la abrindo Permalinks<\/strong> em Settings <\/strong>no painel do WordPress e selecionando Post Name <\/strong>ou qualquer outro de sua escolha, exceto Plain<\/strong>:<\/p>\n
    \"Configure
    Configure a API REST do WordPress para acessar dados JSON.<\/figcaption><\/figure>\n
    Isso funciona para sites locais e p\u00fablicos do WordPress, oferecendo endpoints<\/a>\u00a0para conte\u00fado que inclui artigos<\/a>, p\u00e1ginas<\/a>, coment\u00e1rios<\/a> e m\u00eddia<\/a>. Para saber mais, leia nosso guia completo sobre a API REST<\/a>.<\/p>\n
    Configurando seu ambiente Next.js<\/h2>\n
    O Next.js ajuda os desenvolvedores a criar aplicativos web com facilidade, melhorando o desempenho e otimizando a experi\u00eancia de desenvolvimento. Um de seus principais recursos \u00e9 o roteamento baseado em arquivos, que simplifica a cria\u00e7\u00e3o de rotas.<\/p>\n
    O Next.js tamb\u00e9m se concentra muito no desempenho, oferecendo recursos como a divis\u00e3o autom\u00e1tica de c\u00f3digo<\/a>, que carrega somente o JavaScript necess\u00e1rio para cada p\u00e1gina, reduzindo significativamente o tempo de carregamento.<\/p>\n
    Para configurar um projeto Next.js, voc\u00ea pode executar o seguinte comando e usar suas respostas padr\u00e3o:<\/p>\n
    npx create-next-app@latest nextjs-wp-demo<\/code><\/pre>\n
    Para este guia, voc\u00ea pode obter nosso template inicial do Git<\/a> seguindo estas etapas:<\/p>\n
      \n
    1. Visite o reposit\u00f3rio do GitHub<\/a> deste projeto.<\/li>\n
    2. Selecione Use this template<\/strong>\u00a0> Create a new repository<\/strong> para copiar o c\u00f3digo inicial em um reposit\u00f3rio dentro da sua conta do GitHub (marque a caixa include all branches<\/strong>).<\/li>\n
    3. Baixe o reposit\u00f3rio para o seu computador local e mude para a branch starter-files<\/a> usando o comando: git checkout starter-files<\/code>.<\/li>\n
    4. Instale as depend\u00eancias necess\u00e1rias executando o comando npm install<\/code>.<\/li>\n<\/ol>\n
      Quando a instala\u00e7\u00e3o estiver conclu\u00edda, inicie o projeto em seu computador local com npm run dev<\/code>. Isso torna o projeto dispon\u00edvel em http:\/\/localhost:3000\/<\/a>.<\/p>\n
      \"Uma
      Uma captura de tela de um projeto inicial criado com o Next.js.<\/figcaption><\/figure>\n
      Entendendo o projeto<\/h3>\n
      O App Router foi introduzido no Next.js 13, substituindo o diret\u00f3rio page <\/strong> existente para roteamento. O roteamento com o App Router tamb\u00e9m envolve a cria\u00e7\u00e3o de pastas dentro do diret\u00f3rio app<\/strong>. Em seguida, voc\u00ea insere um arquivo page.js<\/strong> na pasta apropriada para definir sua rota.<\/p>\n
      Neste projeto, app<\/strong> \u00e9 o diret\u00f3rio principal com o qual voc\u00ea estar\u00e1 interagindo, e voc\u00ea encontrar\u00e1 a seguinte estrutura de arquivos.<\/p>\n
      \/\n|-- \/app\n    |-- \/blog\n        |-- \/[postId]\n        \t|-- page.js\n        |-- page.js\n    |-- globals.css\n    |-- layout.js\n    |-- navbar.js\n    |-- page.js<\/code><\/pre>\n
      S\u00e3o criadas tr\u00eas p\u00e1ginas: A p\u00e1gina inicial para exibir informa\u00e7\u00f5es b\u00e1sicas, a p\u00e1gina do blog para exibir todos os artigos do seu CMS WordPress e a p\u00e1gina din\u00e2mica ([postId]\/page.js<\/strong>) para renderizar artigos individuais.<\/p>\n
      Voc\u00ea tamb\u00e9m notar\u00e1 o componente navbar.js<\/strong>, que \u00e9 importado para o arquivo layout.js<\/strong> para criar um layout para o projeto.<\/p>\n
      Obtenha dados do WordPress para o Next.js<\/h2>\n
      Com a API REST do WordPress, voc\u00ea pode buscar artigos, p\u00e1ginas e tipos de artigos personalizados enviando solicita\u00e7\u00f5es HTTP para endpoints espec\u00edficos.<\/p>\n
      Vamos fazer uma solicita\u00e7\u00e3o de pesquisa no arquivo blog\/page.js<\/strong> para pesquisar todos os artigos no seu CMS do WordPress e, por fim, fazer uma solicita\u00e7\u00e3o para buscar cada artigo dinamicamente no blog\/[postId]\/page.js<\/strong> com base no par\u00e2metro id<\/code> passado.<\/p>\n
      Antes de fazermos essas solicita\u00e7\u00f5es, \u00e9 uma boa pr\u00e1tica adicionar o endere\u00e7o da API JSON a uma vari\u00e1vel de ambiente. Essa abordagem garante que a URL da base da API seja facilmente configur\u00e1vel e n\u00e3o codificado em v\u00e1rios arquivos.<\/p>\n
      Crie um arquivo .env<\/strong> na raiz do seu projeto Next.js e adicione o seguinte:<\/p>\n
      NEXT_PUBLIC_WORDPRESS_API_URL=https:\/\/yoursite.kinsta.cloud\/wp-json\/wp\/v2<\/code><\/pre>\n
      Certifique-se de que voc\u00ea substitua a URL pela API JSON do seu site. Al\u00e9m disso, adicione .env<\/code> ao arquivo .gitignore<\/a><\/strong> para que voc\u00ea n\u00e3o envie o arquivo para o provedor do Git.<\/p>\n
      Obtenha todos os artigos do WordPress para o Next.js<\/h3>\n
      Para buscar todos os artigos do seu site WordPress, crie uma fun\u00e7\u00e3o ass\u00edncrona chamada getPosts<\/code> no arquivo blog\/page.js<\/strong>. Essa fun\u00e7\u00e3o usa a API Fetch para fazer uma solicita\u00e7\u00e3o GET para o endpoint\u00a0\/posts<\/code> da API REST do WordPress.<\/p>\n
      async function getPosts() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n    return posts;\n}<\/code><\/pre>\n
      Ao receber a resposta, ela converte a resposta em JSON, criando uma array de objetos de post. Esses posts<\/code> podem ent\u00e3o ser renderizados no seu aplicativo Next.js, oferecendo uma lista din\u00e2mica de artigos acessados diretamente do WordPress.<\/p>\n
      const BlogPage = async () => {\n    const posts = await getPosts();\n    return (\n        <div className=\"blog-page\">\n            <h2>All Blog Posts<\/h2>\n            <p>All blog posts are fetched from WordPress via the WP REST API.<\/p>\n            <div className=\"posts\">\n                {posts.map((post) => {\n                    return (\n                        <Link href={`\/blog\/${post.id}`} className=\"post\" key={post.id}>\n                            <h3>{post.title.rendered}<\/h3>\n                            <p\n                                dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n                            ><\/p>\n                        <\/Link>\n                    );\n                })}\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
      Dentro do componente de p\u00e1gina do Next.js, chame getPosts<\/code> de forma ass\u00edncrona para buscar os artigos. Em seguida, utilize a fun\u00e7\u00e3o map<\/code> para iterar sobre o array posts<\/code>, renderizando o t\u00edtulo e o resumo de cada artigo dentro de um componente <Link><\/code>.<\/p>\n
      Isso n\u00e3o apenas exibe os artigos, mas tamb\u00e9m envolve cada uma delas em um link que leva a uma exibi\u00e7\u00e3o detalhada do artigo. Para isso, use o roteamento baseado em arquivo do Next.js, em que o ID do artigo \u00e9 usado para gerar o caminho da URL dinamicamente.<\/p>\n
      Obtenha todos os artigos din\u00e2micos do WordPress para o Next.js<\/h3>\n
      No c\u00f3digo acima, cada artigo \u00e9 agrupado em um link que deve ajudar os usu\u00e1rios a navegar para uma exibi\u00e7\u00e3o detalhada do artigo.<\/p>\n
      Para p\u00e1ginas de artigos individuais, o roteamento din\u00e2mico do Next.js \u00e9 utilizado para criar uma p\u00e1gina que busca e exibe um \u00fanico artigo baseado no seu ID. Uma p\u00e1gina din\u00e2mica [postID]\/page.js<\/strong> j\u00e1 foi estabelecida no c\u00f3digo dos arquivos iniciais.<\/p>\n
      Crie uma fun\u00e7\u00e3o getSinglePost<\/code>, semelhante a getPosts<\/code>, para buscar um \u00fanico artigo usando o ID do artigo passado como par\u00e2metro.<\/p>\n
      async function getSinglePost(postId) {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts\/${postId}`\n    );\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n
      No componente da p\u00e1gina din\u00e2mica, o ID do artigo \u00e9 obtido a partir dos par\u00e2metros da URL. A fun\u00e7\u00e3o getSinglePost<\/code> \u00e9 ent\u00e3o chamada utilizando esse ID, e o conte\u00fado do artigo \u00e9 renderizado na p\u00e1gina.<\/p>\n
      const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    \/\/ ... the rest of the page code\n};<\/code><\/pre>\n
      Em seguida, voc\u00ea pode preencher a p\u00e1gina com os dados obtidos:<\/p>\n
      const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    if (!post) {\n        return <div>Loading...<\/div>;\n    }\n    return (\n        <div className=\"single-blog-page\">\n            <h2>{post.title.rendered}<\/h2>\n            <div className=\"blog-post\">\n                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}><\/p>\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
      Voc\u00ea pode acessar o c\u00f3digo completo em nosso reposit\u00f3rio GitHub<\/a>.<\/p>\n
      Implantando seu aplicativo Next.js na Kinsta gratuitamente<\/h2>\n
      O servi\u00e7o de hospedagem de site est\u00e1tico<\/a> da Kinsta oferece a voc\u00ea a capacidade de hospedar at\u00e9 100 sites est\u00e1ticos gratuitamente<\/strong>.<\/p>\n
      Esse servi\u00e7o hospeda apenas arquivos est\u00e1ticos. Se voc\u00ea usar um gerador de site est\u00e1tico<\/a> como o Next.js, poder\u00e1 configurar op\u00e7\u00f5es que criam seu projeto a partir do GitHub e implantam os arquivos est\u00e1ticos na Kinsta.<\/p>\n
      Renderiza\u00e7\u00e3o est\u00e1tica no Next.js<\/h3>\n
      Para habilitar uma exporta\u00e7\u00e3o est\u00e1tica na vers\u00e3o 13 do Next.js acima, altere o modo output<\/code> em next.config.js<\/strong>:<\/p>\n
      const nextConfig = {\n    output: 'export',\n};<\/code><\/pre>\n
      Ao criar seu projeto, espera-se que o Next.js gere uma pasta de sa\u00edda contendo os ativos HTML<\/a>, CSS<\/a> e JavaScript<\/a> para o seu aplicativo.<\/p>\n
      A partir da vers\u00e3o 13, o Next.js possibilita iniciar como um site est\u00e1tico e, posteriormente, oferece a op\u00e7\u00e3o de atualizar para utilizar recursos que demandam um servidor. Ao usar esses recursos de servidor, a cria\u00e7\u00e3o das suas p\u00e1ginas n\u00e3o resulta em p\u00e1ginas est\u00e1ticas.<\/p>\n
      Por exemplo, na rota din\u00e2mica, voc\u00ea est\u00e1 obtendo esses dados dinamicamente. Voc\u00ea precisa ser capaz de gerar todos os artigos estaticamente. Isso pode ser feito usando a fun\u00e7\u00e3o generateStaticParams<\/code>.<\/p>\n
      A fun\u00e7\u00e3o \u00e9 utilizada em conjunto com segmentos de rota din\u00e2mica para gerar rotas estaticamente no momento da cria\u00e7\u00e3o, em vez de sob demanda no momento da solicita\u00e7\u00e3o. Quando voc\u00ea compila, o generateStaticParams<\/code> \u00e9 executado antes que os layouts ou p\u00e1ginas correspondentes sejam gerados.<\/p>\n
      Em [postID]\/page.js<\/strong>, use a fun\u00e7\u00e3o generateStaticParams<\/code> para obter a rota de todos os artigos:<\/p>\n
      export async function generateStaticParams() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n\n    return posts.map((post) => ({\n        postId: post.id.toString(),\n    }));\n}<\/code><\/pre>\n
      Quando voc\u00ea executar o comando build, o projeto Next.js gerar\u00e1 um diret\u00f3rio de sa\u00edda<\/strong> com os arquivos est\u00e1ticos.<\/p>\n
      Implantando o Next.js na hospedagem de site est\u00e1tico da Kinsta<\/h3>\n
      Envie seus c\u00f3digos para o provedor Git de sua prefer\u00eancia (Bitbucket<\/a>, GitHub<\/a> ou GitLab<\/a>). Em seguida, siga estas etapas para implantar seu site est\u00e1tico Next.js na Kinsta:<\/p>\n
        \n
      1. Fa\u00e7a login ou crie uma conta para visualizar seu painel MyKinsta<\/a>.<\/li>\n
      2. Autorize a Kinsta com seu provedor Git.<\/li>\n
      3. Clique em Sites est\u00e1ticos<\/strong> na barra lateral esquerda e, em seguida, clique em Adicionar site<\/strong>.<\/li>\n
      4. Selecione o reposit\u00f3rio e a branch a partir da qual voc\u00ea deseja implantar.<\/li>\n
      5. Atribua um nome exclusivo ao seu site.<\/li>\n
      6. Adicione as configura\u00e7\u00f5es de build no seguinte formato:\n