Si tus editores ya trabajan en Airtable, una aplicación de Webflow Cloud puede leer esa base directamente, así nadie tiene que copiar filas al CMS para publicarlas.
Los equipos de marketing pueden seguir gestionando un directorio de socios o un glosario desde una base de Airtable porque las personas responsables de esos datos viven en Airtable todo el día. Sin embargo, cuando alguien tiene que copiar filas a elementos del CMS, el sitio web puede desincronizarse de la base.
Conectar Airtable directamente a Webflow Cloud resuelve este problema de sincronización. La aplicación de Next.js 15 se ejecuta en Webflow Cloud y utiliza un asistente tipado del lado del servidor para leer los registros publicados de Airtable. Su página renderiza esos registros en la ruta de montaje, mientras que un Route Handler hace que los mismos datos estén disponibles como JSON.
Airtable sigue siendo el lugar donde trabajan los editores, y el sitio refleja la base en la siguiente solicitud.
En esta guía, veremos cómo configurar el esquema de Airtable, configurar tokens de acceso personal y desplegar una aplicación de Next.js en Webflow Cloud para servir contenido de Airtable en vivo sin complicaciones.
¿Qué necesitas para añadir Airtable como base de datos de contenido en Webflow?
Necesitas una base de Airtable editable, permisos de token, un entorno local de Node.js, un proyecto de Next.js compatible y un sitio de Webflow en el plan Starter o superior (se requiere Premium para un montaje con dominio personalizado).
Reúne estos elementos antes de configurar la aplicación:
- Base de Airtable: Utiliza una tabla de contenido que puedas editar para añadir un estado (Status) y leer el ID de la base.
- Permisos de token: Utiliza una cuenta de Airtable que pueda crear un token de acceso personal con alcance para la base de destino.
- Sitio de Webflow: Empieza con cualquier plan desde Starter en adelante; el staging es gratuito, mientras que un montaje con dominio personalizado requiere Premium o superior.
- Entorno local: Instala Node.js localmente con npm para que puedas ejecutar y probar el proyecto de Next.js antes del despliegue.
- Proyecto de Next.js: Utiliza la versión 15 o superior, que es el requisito mínimo que Webflow Cloud establece para las aplicaciones de Next.js
Con estos cinco requisitos previos listos, puedes estructurar la fuente de Airtable y construir la aplicación en el orden de despliegue.
6 pasos para añadir Airtable como base de datos de contenido en Webflow Cloud
Estos seis pasos generan una aplicación de Next.js que lee los registros publicados de Airtable en cada solicitud, los renderiza en el lado del servidor, expone el JSON correspondiente y se ejecuta bajo una ruta de montaje de Webflow Cloud.
La construcción avanza desde el esquema y las credenciales de Airtable a través del asistente del lado del servidor, el Route Handler, la página y el despliegue en Webflow Cloud.
1. Estructura la tabla de Airtable para la publicación
El estado permite a los editores controlar qué filas aparecen en el sitio. Añade un campo de selección única llamado Estado a la tabla que contiene tu contenido, con dos opciones: Borrador y Publicado, y marca como Publicado cada fila que quieras que esté activa.
El filtro en el asistente de obtención utiliza ese campo, por lo que cambiar el valor de selección publica o despublica una fila sin necesidad de eliminarla de la tabla.
He configurado Borrador como valor predeterminado para las nuevas filas, así una entrada a medio escribir nunca llega al sitio por accidente. Mantén el resto del esquema sencillo y estable, porque cada campo que renombres más tarde implica un cambio en el código.
Estos son los campos que espera el código:
| Campo de Airtable | Tipo de campo | Uso en la aplicación |
|---|---|---|
| Título | Texto de una sola línea | Encabezado de cada elemento |
| Slug | Texto de una sola línea | Identificador estable para URLs; utiliza el ID del registro como alternativa |
| Cuerpo (Body) | Texto largo | Descripción que aparece bajo el encabezado |
| Estado | Selección única (Borrador, Publicado) | Filtro; solo se obtienen las filas Publicadas |
| Fecha de publicación | Fecha | Orden de clasificación, de más reciente a más antiguo |
| Campo de Airtable → Tipo de campo → Uso en la aplicación |
|---|
| Título |
| Texto de una sola línea |
| Encabezado de cada elemento |
| Slug |
| Texto de una sola línea |
| Identificador estable para URLs; utiliza el ID del registro como alternativa |
| Cuerpo (Body) |
| Texto largo |
| Descripción que aparece bajo el encabezado |
| Estado |
| Selección única (Borrador, Publicado) |
| Filtro; solo se obtienen las filas Publicadas |
| Fecha de publicación |
| Fecha |
| Orden de clasificación, de más reciente a más antiguo |
Abre la documentación de la API de la base para consultar el ID de la base; comienza por app. Puedes hacer referencia a la tabla por su nombre, y la variable AIRTABLE_TABLE contiene ese nombre, así que si cambias el nombre de la tabla en Airtable, también tendrás que actualizar la variable.
Ya tienes una tabla donde cambiar el Estado a Publicado equivale a publicar, y un ID de base listo para configurar.
2. Crea un token de acceso personal de Airtable con alcance limitado
El token necesita exactamente un alcance, , y acceso únicamente a la base de datos de contenido objetivo. Créalo en el centro de desarrolladores de Airtable. Un token de solo lectura para una única base limita el radio de acción en caso de filtración: permite realizar lecturas desde esa base y bloquea tanto las escrituras como el acceso al resto de tus bases.data.records:read
Airtable muestra el valor del token solo una vez al crearlo, así que cópialo en un gestor de contraseñas antes de cerrar el cuadro de diálogo.
El token está vinculado a la cuenta de Airtable que lo creó. En un proyecto para un cliente, la propiedad del token es más importante que el alcance. Si el token pertenece a la cuenta de un contratista y esa cuenta se elimina del espacio de trabajo, el sitio dejará de leer el contenido sin que haya cambios en el código que expliquen el motivo. Créalo desde una cuenta que controle el cliente.
Ahora tienes una cadena de token que comienza con y que puede listar registros de una base.pat
3. Prepara la aplicación Next.js y añade las variables de Airtable a Webflow Cloud
Abre el proyecto de Next.js 15 con el App Router y TypeScript preparados para esta compilación, luego añade cuatro variables a tu entorno de Webflow Cloud.
La documentación de variables de entorno de Webflow Cloud indica que "tanto las variables de entorno secretas como las no secretas están disponibles para el proceso de compilación de tu aplicación y para la aplicación desplegada en tiempo de ejecución", y los valores secretos se ocultan en los registros de compilación, por lo que el token puede almacenarse como un secreto y seguir estando disponible para la compilación.
Usa npm para este proyecto, tal como requiere Webflow Cloud. El proyecto debería tener un listo para el asistente.package.json
En la configuración de Webflow Cloud para tu sitio, abre el entorno en el que vas a realizar el despliegue y añade como secreto, luego , , y como variables normales. Establece en la ruta de montaje que pretendas usar, como .AIRTABLE_TOKENAIRTABLE_BASE_IDAIRTABLE_TABLENEXT_PUBLIC_BASE_PATHNEXT_PUBLIC_BASE_PATH/resources
El entorno desplegado ahora contiene la configuración de Airtable mientras mantiene el token oculto.
Refleja los nombres localmente para que tenga la misma estructura:next dev
# .env.local
AIRTABLE_TOKEN=your-personal-access-token
AIRTABLE_BASE_ID=your-base-id-starting-with-app
AIRTABLE_TABLE=Resources
# Leave empty locally: next dev serves at the root, Webflow Cloud serves at the mount path
NEXT_PUBLIC_BASE_PATH=Con ambos conjuntos en su lugar, el mismo código lee el token desde en tu máquina y en Webflow Cloud, y el token se mantiene fuera del repositorio.process.env
4. Escribe el asistente de obtención de Airtable
La API web de Airtable devuelve los registros como una matriz de objetos . Incluye una cadena cuando quedan más páginas y acepta un parámetro de consulta escrito en la sintaxis de fórmulas de Airtable.records{ id, createdTime, fields }offsetfilterByFormula
El asistente exclusivo para el servidor sigue esa paginación, obtiene cada registro publicado y normaliza cada uno en un objeto tipado que el resto de la aplicación puede renderizar.
Crea como el módulo exclusivo del servidor para ese asistente.lib/airtable.ts
Dos decisiones en ese archivo son deliberadas. El asistente lanza un error cuando falta una variable, lo que produce un error de configuración con nombre en los registros. Esto evita que aparezca una lista vacía que parezca un "aún no hay contenido".
El bucle sigue a hasta que Airtable deja de devolver uno, por lo que una tabla que supera el tamaño de una sola página se sigue renderizando por completo. Todas las solicitudes se ejecutan en el servidor; el token solo aparece en una cabecera de solicitud del lado del servidor.offset
Ahora tienes una función que devuelve una matriz tipada de elementos publicados, ordenados del más reciente al más antiguo, o un error que indica exactamente qué salió mal.
5. Expón los registros mediante un manejador de rutas
El endpoint JSON se encuentra en y permite que los clientes del navegador accedan al contenido.app/api/content/route.ts
Este endpoint GET no requiere autenticación a propósito, ya que sirve contenido público. Cada llamada anónima puede activar una solicitud a Airtable y consumir tanto la cuota de solicitudes como los recursos de la aplicación. Antes de pasar a producción, implementa un límite de tasa o una caché frente a la ruta para controlar el abuso y el volumen de solicitudes ascendentes.
Crea el manejador para que llame a , devuelva los elementos como JSON y gestione los fallos ascendentes con una respuesta genérica. El manejador devuelve un error 502 con un mensaje genérico cuando Airtable o la configuración fallan. Registra el error real en el servidor, de modo que el token y el cuerpo de la respuesta de Airtable permanezcan ocultos para los visitantes.listContent
Localmente, seguido de una visita a devuelve que contiene tus filas publicadas.npm run devhttp://localhost:3000/api/content{ "items": [...] }
6. Renderiza el contenido en el servidor, luego monta y despliega
El renderizado dinámico garantiza que cada solicitud lea Airtable en lugar de servir una instantánea tomada durante la compilación. La página llama al asistente directamente porque el componente del servidor y el asistente comparten el mismo tiempo de ejecución. Esto evita una solicitud HTTP adicional.
Crea como la página renderizada en el servidor que llama a y asigna los elementos devueltos a la lista. Esa página renderiza lo que devuelva el asistente, con cada elemento anclado por su slug.app/page.tsxlistContent
Configura y despliega la aplicación en Webflow Cloud. Establece como la ruta de montaje. Usa el mismo valor almacenado en ./resourcesNEXT_PUBLIC_BASE_PATH
Abre el dominio de pruebas de tu sitio seguido de . Deberías ver las filas publicadas de Airtable como una lista, y debería devolver los mismos registros en formato JSON. Cambia el estado de una fila en Airtable y recarga; la lista se actualizará sin necesidad de un nuevo despliegue./resources/resources/api/content
¿Qué causa que el contenido de Airtable falle en Webflow Cloud?
Los fallos durante la compilación y los fallos durante la solicitud producen síntomas diferentes. Una compilación puede rechazar una directiva de Next.js o congelar una página como HTML estático, mientras que las solicitudes individuales pueden fallar debido a las credenciales de Airtable o a una ruta de navegador incorrecta.
Cada síntoma a continuación muestra lo que ves y por qué sucede específicamente en Webflow Cloud.
La compilación falla después de añadir a una rutaexport const runtime = 'edge'
Causa: El adaptador OpenNext Cloudflare con el que se construye Webflow Cloud rechaza el tiempo de ejecución edge de Next.js. Dos cosas diferentes comparten el término. Cloudflare Workers es una plataforma edge, mientras que la exportación de Next.js es un objetivo de compilación independiente que el adaptador no admite.runtime = 'edge'
Confundir la plataforma edge con el objetivo de tiempo de ejecución edge de Next.js produce una compilación defectuosa.
Solución: Elimina la línea de cada manejador de rutas y página, confirma los cambios y vuelve a desplegar. Tus manejadores ya se ejecutan en Workers. Si no estás seguro de qué archivos la contienen, los enumera de una sola vez. La compilación se completará y responderá en la ruta de montaje.export const runtimegrep -r "runtime = 'edge'" app//api/content
Airtable devuelve un error 401 o 403 en Webflow Cloud, pero el mismo código funciona localmente
Causa: Uno de dos problemas de credenciales causa este síntoma, y la línea de registro te indica cuál. Si los registros del despliegue muestran , la variable solo existe en , que nunca sale de tu máquina, o se añadió a un entorno de Webflow Cloud diferente al que apunta este despliegue.Missing environment variable: AIRTABLE_TOKEN.env.local
Si los registros muestran o , la variable está presente. Confirma que el entorno de destino contenga el token de solo lectura creado para la base de contenido y que el valor pegado no tenga espacios en blanco al final.Airtable responded with 401403
Solución: Para la variable faltante, abre el entorno que utiliza tu despliegue, añade AIRTABLE_TOKEN como secreto y vuelve a desplegar para que tanto la compilación como el tiempo de ejecución la detecten. Para un error 401 o 403, crea un nuevo token de solo lectura con alcance a la base de datos de destino, reemplaza el valor del secreto y vuelve a desplegar.
Ejecuta npm run dev contra el nuevo token primero; si lista los registros localmente, la diferencia restante es el entorno. Tras el nuevo despliegue, la ruta devolverá tus elementos y la línea de error dejará de aparecer.
La página sigue mostrando contenido del último despliegue
Causa: La página se renderizó una vez durante la compilación y desde entonces se ha servido como HTML estático. Webflow Cloud pone tus variables de entorno a disposición durante la compilación y en tiempo de ejecución, por lo que la compilación puede acceder a Airtable, obtener cada fila publicada con éxito e integrar el resultado en la página.
La compilación tiene éxito, pero el contenido sigue siendo el del último despliegue. Cualquier página bajo app/ que solo espera una función del lado del servidor, no tiene entrada dinámica y carece de force-dynamic export es candidata, y Next.js la renderiza automáticamente de forma estática.
He diagnosticado una fila publicada que parecía bloqueada cuando una página estática servía exactamente lo que había compilado.
Solución: Restaura export const dynamic = "force-dynamic" en la página, o mueve la lectura detrás del manejador de rutas (Route Handler) y obtén los datos desde el cliente. La primera opción cuesta una solicitud a Airtable por cada vista de página; una lista con mucho tráfico merece una caché delante del asistente que invalides cuando los editores publiquen.
De cualquier modo, cambiar el estado de una fila a "Publicado" en Airtable debería reflejarse en la siguiente carga de página sin necesidad de un nuevo despliegue.
Una petición fetch del navegador a /api/content devuelve la página 404 del sitio de Webflow
Causa: Tu aplicación está montada en /resources, por lo que la ruta reside realmente en /resources/api/content, pero el navegador solicitó /api/content en la raíz del sitio, a lo que el sitio de Webflow responde con su propio 404. Las peticiones del navegador conservan la URL proporcionada por el código del cliente.
La página de "bring-your-own-app" lo dice claramente: "Las llamadas fetch del lado del cliente deben incluir manualmente la ruta base". El problema aparece cuando el código que se ejecuta en el navegador llama a la ruta.
Solución: Antepón a cada URL del lado del cliente process.env.NEXT_PUBLIC_BASE_PATH, configurada con la ruta de montaje en el entorno de Webflow Cloud y dejada vacía en .env.local. No añadas basePath a next.config ni la importes desde allí para construir URLs.
La documentación actual de personalización de Next.js de Webflow Cloud dice: "No necesitas añadir un adaptador, una ruta base o un modo de salida", y un valor codificado en la configuración entra en conflicto con el que inyecta la plataforma. Con el prefijo colocado, la petición del navegador llega a /resources/api/content y el JSON regresa correctamente.
Qué puedes construir a continuación con Airtable y Webflow
Cuando el equipo propietario de un conjunto de datos trabaja en Airtable, el sitio debería leer ese conjunto de datos en vivo directamente, y una aplicación de Webflow Cloud te permite hacer eso mientras los editores y el sitio de marketing permanecen donde están.
El mismo patrón de asistente se extiende a una ruta de escritura: un formulario en el sitio que envía datos a un manejador de rutas que crea registros con un token data.records:write.
Debido a que el CMS de Webflow ahora cuenta con APIs REST ampliadas, un manejador de rutas llamado por una automatización de Airtable puede insertar filas en una colección del CMS cuando el contenido deba residir allí. Prefiero la aplicación montada cuando Airtable debe seguir siendo la fuente en vivo y uso la ruta del CMS cuando el control visual del CMS es más importante.
Para una personalización más profunda más allá de lo que un manejador de rutas gestiona de forma nativa, la documentación para desarrolladores de Webflow cubre las APIs del CMS, las variables de entorno y el resto del tiempo de ejecución de Webflow Cloud.
Preguntas frecuentes
¿Puede la aplicación de Webflow Cloud escribir registros de vuelta en Airtable?
Sí. Puedes crear un segundo token de acceso personal con el alcance data.records:write en la misma base, almacenarlo como un secreto independiente y añadir un manejador de rutas POST autenticado que reenvíe una carga útil de registros validada. Protege la autenticación basada en cookies con controles CSRF, aplica autorización y establece límites de tasa y abuso antes de aceptar tráfico público.
¿Pueden las páginas que creé en el Designer mostrar este contenido de Airtable?
Sí. Puedes hacer que una página del Designer obtenga el endpoint JSON del Route Handler, siempre que la URL del navegador incluya la ruta de montaje de la aplicación. Si prefieres una gestión de contenidos visual y estructurada, una automatización de Airtable puede llamar a un Route Handler que envíe filas a una colección del CMS de Webflow mediante la API REST del CMS.
¿Qué sucede cuando Airtable devuelve más de una página de registros?
Se devuelven todos los registros publicados. Airtable incluye un offsetoffset cuando queda otra página, y el asistente exclusivo del servidor sigue solicitando páginas hasta que ese valor desaparece. Luego, el asistente normaliza todos los registros devueltos en una matriz tipada y los ordena del más reciente al más antiguo, por lo que la lista renderizada no se limita a la primera página de respuesta de Airtable.
¿Quién debería ser el propietario del token de acceso personal de Airtable?
Utiliza una cuenta de Airtable controlada por el cliente para crear el token. Los tokens de acceso personal están vinculados a la cuenta que los crea, por lo que eliminar la cuenta de un contratista del espacio de trabajo puede impedir que el sitio lea el contenido sin necesidad de cambiar el código. Una cuenta propiedad del cliente mantiene la administración del token en la organización que opera el sitio.
Estoy en Next.js 16. ¿Sigue funcionando el middleware en Webflow Cloud?
Mantén el archivo con el nombre middleware.tsmiddleware.js. En Next.js 16, el archivo renombrado proxy.tsse ejecuta en el entorno de ejecución de Node.js y no puede optar por Edge. Webflow Cloud admite middleware de entorno de ejecución Edge en su entorno de ejecución Workers, no middleware de Node.js, por lo que conservar el nombre de archivo middleware evita generar un archivo proxy que la plataforma no puede ejecutar tras el despliegue.
