Secretos

Configuración > Secretos contiene las claves de API y la configuración que lee el código de tu sitio web. La IA puede añadir secretos mientras crea el sitio web, y los conectores añaden los suyos por ti. Los valores se cifran y permanecen ocultos hasta que los muestras. Llegan a tu sitio web en producción cuando publicas.

La página tiene hasta tres secciones: Faltan valores, Secretos y De los conectores.

Faltan valores

Cuando la IA escribe código que usa una clave que aún no le has dado, añade un secreto con ese nombre y un valor provisional. Esos secretos aparecen aquí con la nota "Hasta que configures estos valores, las partes de tu sitio web que los usan no funcionarán."

Hay dos tipos de filas:

• Filas de conexión: secretos que un servicio completa por ti, como las claves de Stripe, Supabase, Resend u OpenAI. La fila indica el servicio y tiene un botón Conectar, por ejemplo, Conectar Stripe. Al conectar el servicio, se completan los valores y se mantienen actualizados. Las bases de datos se conectan en el panel de Datos y todo lo demás en Conectores.
• Filas para pegar valores: cualquier otro secreto. Pega el valor en el campo y haz clic en Guardar o presiona Enter, o en Quitar si tu sitio web no lo necesita. Para los servicios más comunes, la fila incluye un enlace al lugar donde obtienes la clave, por ejemplo, Obtener de OpenAI.

También aparece una fila si ya no se puede leer un valor guardado. Vuelve a configurarlo para solucionarlo.

Cuando la IA te envía un enlace a una clave en el chat, esta página se abre en esa fila y la resalta.

Secretos

Todos tus secretos, en una de dos vistas. Usa los botones junto a Importar .env para cambiar de vista:

• Texto: un editor con un NAME=value por línea. Ideal para pegar o editar muchos a la vez.
• Lista: una fila por secreto, que muestra cuándo se añadió o actualizó, qué servicio lo configuró y Visible en el navegador para los nombres públicos. Muestra, copia, edita o elimina un valor desde su fila y haz clic en Añadir secreto para añadir uno.

Los valores están ocultos al principio. Haz clic en Mostrar secretos para verlos y editarlos, y en Ocultar secretos para volver a ocultarlos una vez que guardes o descartes los cambios. Si aún no tienes secretos, puedes añadirlos directamente.

Cuando hay un servicio conectado, el editor agrupa las líneas: los secretos que añadiste bajo # Your secrets y luego los de cada servicio bajo su nombre, como # Stripe. Los secretos que WebTwizz administra por ti, como los de WebTwizz Cloud y el CRON_SECRET que usan las tareas, no se muestran en el editor y no se pueden eliminar desde allí.

Edición

• Escribe o pega líneas como OPENROUTER_API_KEY=sk-or-.... Las líneas están numeradas.
• Los nombres usan letras, números y _, y no pueden empezar con un número.
• Se permiten las líneas que empiezan con # y las líneas en blanco, pero no se conservan al guardar.
• Un nombre sin nada después de = muestra necesita un valor y aparece en Faltan valores una vez guardado.
• Para quitar un secreto, elimina su línea. Los secretos de un servicio conectado se conservan hasta que quitas el servicio del proyecto.
• Puedes cambiar un valor configurado por un servicio, pero el servicio puede restablecerlo cuando se vuelva a conectar.

Errores de línea

Los problemas se marcan en la línea y se enumeran debajo del editor, por ejemplo:

• Añade =value después de NAME. La línea no tiene =.
• Un nombre no puede empezar con un número.
• WebTwizz configura NAME. Algunos nombres están reservados, como NODE_ENV, PORT y cualquiera que empiece con WEBTWIZZ_.
• NAME también está en la línea 4. Cada nombre solo puede aparecer una vez.

Aparece una advertencia cuando un nombre con NEXT_PUBLIC_ contiene algo que parece una clave privada, porque cualquiera que abra tu sitio web puede leerlo. Esto no impide que guardes.

Importación de un archivo .env

Haz clic en Importar .env para elegir un archivo o arrastra un archivo .env al editor. También puedes pegar un archivo completo en el editor. Los nombres que ya existen reciben el nuevo valor y los nuevos se añaden al final. Un mensaje indica cuántos eran nuevos y cuántos se reemplazaron. No se guarda nada hasta que revises y guardes.

Guardado

En cuanto cambia algo, una barra en la parte inferior resume los cambios, por ejemplo, 2 añadidos, 1 modificado. Haz clic en Guardar cambios (o presiona ⌘S / Ctrl+S en el editor) para guardar, o en Descartar para volver al estado anterior. Mientras haya alguna línea con un error, la barra muestra Corrige 1 línea para guardar.

Si tus secretos cambiaron en otro lugar después de mostrarlos, por ejemplo, en otra pestaña, la barra muestra Esto cambió en otro lugar desde que lo abriste. Haz clic en Cargar lo último para cargar los valores actuales y luego vuelve a hacer tu cambio.

De los conectores

Los secretos configurados por un conector o una conexión de base de datos se enumeran por servicio, por ejemplo, Stripe, junto con la cantidad de secretos que configura. Cada servicio mantiene sus secretos actualizados.

Para cambiarlos, usa el botón de la fila. Cambiar clave (para los servicios que conectas con una clave) y Abrir Conectores (para los demás) abren ese servicio en Configuración > Conectores, donde Reemplazar clave permite sustituir la clave. Cambiar conexión abre la conexión de base de datos en el panel de Datos. Para quitar los secretos de un servicio, quítalo del proyecto con Quitar de este proyecto.

Valores públicos

Los nombres que empiezan con NEXT_PUBLIC_ también llegan al navegador, por lo que cualquiera que abra tu sitio web puede leerlos. Úsalos para valores que se puedan compartir de forma segura, como la URL de un sitio web o una clave publicable. Guarda las claves de API y otros valores privados en nombres sin el prefijo.

Vista previa y sitio web en producción

Los cambios llegan a tu vista previa de inmediato. Tu sitio web en producción conserva los valores de la última publicación. Cuando son distintos, la parte superior de la página muestra "Tu vista previa ya usa los nuevos valores. Tu sitio web en producción aún tiene los de la última publicación." Haz clic en Publicar allí para actualizar el sitio web en producción.

Lectura de secretos en el código

Lee un secreto con 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;