Segredos

Configurações > Segredos armazena as chaves de API e configurações que o código do seu site usa. A IA pode adicionar segredos enquanto cria o site, e os conectores adicionam os deles para você. Os valores são criptografados e ficam ocultos até você revelá-los. Eles chegam ao site no ar quando você publica.

A página tem até três seções: Valores ausentes, Segredos e Dos conectores.

Valores ausentes

Quando a IA escreve código que usa uma chave que você ainda não forneceu, ela adiciona um segredo com esse nome e um valor provisório. Esses segredos aparecem aqui com o aviso "Enquanto estes valores não forem definidos, as partes do seu site que os usam não funcionarão."

Há dois tipos de linha:

• Linhas de conexão: segredos que um serviço preenche para você, como chaves do Stripe, Supabase, Resend ou OpenAI. A linha mostra o nome do serviço e tem um botão Conectar, por exemplo, Conectar Stripe. Conectar o serviço preenche esses valores e os mantém atualizados. Bancos de dados são conectados no painel de dados, e os demais serviços em Conectores.
• Linhas para colar valores: qualquer outro segredo. Cole o valor no campo e clique em Salvar ou pressione Enter. Se o site não precisar dele, clique em Remover. Para serviços comuns, a linha tem um link para onde você pode obter a chave, por exemplo, Obter no OpenAI.

Uma linha também aparece quando um valor salvo não pode mais ser lido. Defina-o novamente para corrigir o problema.

Quando a IA envia um link para uma chave no chat, esta página abre na linha correspondente e a destaca.

Segredos

Todos os seus segredos, em uma de duas visualizações. Alterne entre elas com os botões ao lado de Importar .env:

• Texto: um único editor com um NAME=value por linha. Ideal para colar ou editar vários de uma vez.
• Lista: uma linha por segredo, mostrando quando ele foi adicionado ou atualizado, qual serviço o definiu e Visível no navegador para nomes públicos. Mostre, copie, edite ou exclua um valor na própria linha e clique em Adicionar segredo para adicionar outro.

Os valores ficam ocultos inicialmente. Clique em Revelar segredos para mostrá-los e editá-los, e em Ocultar segredos para ocultá-los novamente depois de salvar ou descartar suas alterações. Se você ainda não tiver segredos, pode adicioná-los diretamente.

Quando um serviço está conectado, o editor agrupa as linhas: os segredos que você adicionou ficam em # Your secrets, seguidos pelos de cada serviço sob o respectivo nome, como # Stripe. Os segredos que o WebTwizz gerencia para você, como os do WebTwizz Cloud e o CRON_SECRET usado pelas tarefas, não aparecem no editor e não podem ser excluídos por ele.

Edição

• Digite ou cole linhas como OPENROUTER_API_KEY=sk-or-.... As linhas são numeradas.
• Os nomes usam letras, números e _, e não podem começar com número.
• Linhas que começam com # e linhas em branco são aceitas, mas não são mantidas ao salvar.
• Um nome sem nada depois de = mostra precisa de um valor e aparece em Valores ausentes depois de salvo.
• Para remover um segredo, exclua a linha dele. Os segredos de um serviço conectado permanecem até você remover o serviço do projeto.
• Você pode alterar um valor definido por um serviço, mas o serviço pode restaurá-lo quando se reconectar.

Erros nas linhas

Os problemas são marcados na linha e listados abaixo do editor, por exemplo:

• Adicione =value depois de NAME. A linha não tem =.
• Um nome não pode começar com número.
• NAME é definido pelo WebTwizz. Alguns nomes são reservados, como NODE_ENV, PORT e qualquer nome que comece com WEBTWIZZ_.
• NAME também está na linha 4. Cada nome só pode aparecer uma vez.

Um aviso aparece quando um nome com NEXT_PUBLIC_ contém algo que parece uma chave privada, porque qualquer pessoa que abrir seu site poderá lê-la. Isso não impede que você salve.

Importação de um arquivo .env

Clique em Importar .env para escolher um arquivo ou arraste um arquivo .env para o editor. Você também pode colar um arquivo inteiro no editor. Os nomes que já existem recebem o novo valor, e os novos nomes são adicionados ao final. Uma mensagem informa quantos foram adicionados e quantos foram substituídos. Nada é salvo até você revisar e salvar.

Salvamento

Assim que algo muda, uma barra na parte inferior resume as alterações, por exemplo, 2 adicionados, 1 alterado. Clique em Salvar alterações (ou pressione ⌘S / Ctrl+S no editor) para salvar, ou em Descartar para voltar. Enquanto alguma linha tiver um erro, a barra mostra Corrija 1 linha para salvar.

Se os segredos forem alterados em outro lugar depois que você os revelou, por exemplo, em outra aba, a barra mostra Isto foi alterado em outro lugar desde que você abriu. Clique em Carregar mais recentes para carregar os valores atuais e faça sua alteração novamente.

Dos conectores

Os segredos definidos por um conector ou por uma conexão com banco de dados são listados por serviço, por exemplo, Stripe, com a quantidade de segredos que ele define. Cada serviço mantém seus segredos atualizados.

Para alterá-los, use o botão na linha. Trocar chave (para serviços que você conecta com uma chave) e Abrir Conectores (para os demais) abrem esse serviço em Configurações > Conectores, onde Substituir chave troca a chave. Trocar conexão abre a conexão com o banco de dados no painel de dados. Para remover os segredos de um serviço, remova-o do projeto em Remover deste projeto.

Valores públicos

Nomes que começam com NEXT_PUBLIC_ também chegam ao navegador, então qualquer pessoa que abrir seu site poderá lê-los. Use esses nomes para valores que podem ser compartilhados com segurança, como a URL de um site ou uma chave publicável. Mantenha chaves de API e outros valores privados em nomes sem o prefixo.

Pré-visualização e site no ar

As alterações chegam à pré-visualização imediatamente. O site no ar mantém os valores da última publicação. Quando eles são diferentes, o topo da página mostra "Sua pré-visualização já usa os novos valores. Seu site no ar ainda usa os valores da última publicação." Clique em Publicar ali para atualizar o site no ar.

Leitura de segredos no código

Leia um segredo com process.env.NAME:

// Server code: API routes, server components and server actions can read every secret
const apiKey = process.env.OPENROUTER_API_KEY;

// Browser code can only read NEXT_PUBLIC_ names
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;