Autor: Estevão Acioli
Co-participação: Brendo Jackson
Este documento tem como objetivo detalhar a configuração da integração entre o LocalWP e o Next.js, a fim de facilitar o desenvolvimento e os testes em ambiente local.
Atenção: no tutorial foi usado o domínio local local.cnnbrasil.com.br, você deve substituir este domínio pelo seu, conforme configurado no LocalWP.
Após instalar e configurar o seu WordPress com LocalWP, faça as seguintes configurações:
Passo a passo
1 – Ativar SSL no localhost
No LocalWP ative o SSL clicando em Trust ao lado do domínio, após clicar ele deve exibir uma mensagem de sucesso e mudar para Trusted
2 – Alterar a url da home diretamente no banco de dados
No LocalWP acesse a aba de database e e clique em Open AdminerNeo
No banco de dados procure pela tabela wp-options e altere a home para https://next.local.cnnbrasil.com.br:443
3 – NEXT configuração do .env
No Next.js, é necessário configurar o arquivo .env e garantir que as variáveis abaixo estejam devidamente definidas e descomentadas, conforme o exemplo:
SITE_BASE_URL=https://next.local.cnnbrasil.com.br
NEXT_PUBLIC_WP_API_BASE_URL=https://local.cnnbrasil.com.br
NEXT_PUBLIC_ENVIRONMENT=local
WP_REVERSE_API_KEY=
NEXT_PUBLIC_ENVIRONMENT=production
NEXT_PUBLIC_FALLBACK_IMAGE=https://www.cnnbrasil.com.br/wp-content/themes/master-theme/assets/img/fallbackImage.jpg
NODE_TLS_REJECT_UNAUTHORIZED=0Atenção: Em NEXT_PUBLIC_WP_API_BASE_URL você deve colocar a url do site, de acordo com o LocalWP
4 – Configuração do WP
Agora no WordPress certifique-se de ter uma homepage com nome CNN Brasil e slug = cnnbrasil
Faça login em um dos ambientes de desenvolvimento e no seu ambiente local ative os plugins e os configure conforme o ambiente de develop.
Possíveis erros e conflitos:
1 – Alerta sobre mudança de urls no Localwp
Como alteramos a URL da home do site diretamente no banco de dados, o LocalWP pode detectar que a URL definida no WordPress é diferente da URL configurada no ambiente local. Quando isso ocorre, o LocalWP exibe um alerta sugerindo a correção automática.
Esse aviso pode ser ignorado, pois a correção automática pode sobrescrever a URL que configuramos manualmente e, com isso, comprometer alguma integração específica que depende da URL atual.
2 – Conflitos de porta entre o NEXT e o LocalWP
O LocalWP geralmente utiliza a porta 10005 ou superior para rodar os sites, por isso, normalmente não há conflitos com o Next.js, que costuma usar a porta 443.
No entanto, se ocorrerem problemas relacionados a porta (como conflitos ou falhas no carregamento), você pode alterar a porta do Next.js editando o arquivo package.json, localizado na raiz do projeto:C:\cnn-react\cnnbrasil-next\package.json
Basta modificar o script next:dev da seguinte forma:
De:
"next:dev": "next dev --turbopack -p 443 -H next.local.cnnbrasil.com.br --experimental-https",Para:
(note que alteramos apenas a porta de 443 para 1443, mas pode ser qualquer outra)
"next:dev": "next dev --turbopack -p 1443 -H next.local.cnnbrasil.com.br --experimental-https",⚠️ Importante: Se você alterar a porta do Next.js, lembre-se de atualizar também a URL configurada na home do site (conforme indicado no passo 2 da documentação), informando a nova porta que está no package.json.
⚠️ Atenção
Caso opte por mudar a porta apenas no ambiente local, não comite nem envie essa alteração para os ambientes de desenvolvimento ou produção. Isso pode causar inconsistências ou falhas em integrações que dependem da configuração original.