Hola a todos. Tengo un problema con mi proyecto de Astro para crear invitaciones personalizadas. Cuando ejecuto el comando de construcción, la carpeta de salida no contiene los archivos HTML que necesito.
Estoy tratando de hacer un sistema donde cada invitado tiene su propia URL con un parámetro, algo como localhost:4321/?codigo=xyz. Mi código en el archivo .astro se ve así:
---
import { lista_invitados } from '../datos/personas';
const urlActual = new URL(Astro.request.url);
const codigo = urlActual.searchParams.get('codigo');
const persona = codigo && codigo in lista_invitados ? lista_invitados[codigo as keyof typeof lista_invitados] : null;
---
{
persona ? (
<>
<h1 class="titulo">{persona.nombre_completo}</h1>
<p class="cantidad">Cantidad de personas:<br/>{persona.cantidad}</p>
<p class="texto">{persona.texto_personalizado}</p>
</>
) : (
<p>INVITACIÓN NO ENCONTRADA</p>
)
}
Y mi archivo personas.ts contiene:
export const lista_invitados = {
xyz: {
nombre_completo: "Juan Pérez",
cantidad: 3,
texto_personalizado: "Nos alegra tenerte con nosotros"
},
wxy: {
nombre_completo: "María García",
cantidad: 2,
texto_personalizado: "Esperamos verte pronto"
}
};
El problema es que cuando subo el sitio a Netlify, me aparece error 404. La carpeta de construcción solo tiene imágenes y archivos JavaScript, pero no los HTML que necesito. Ya instalé el adaptador de Netlify pero sigue sin funcionar.
¿Alguien sabe como hacer que Astro genere páginas estáticas para cada código de invitado? Quiero que cada persona tenga su enlace único funcionando.
El problema es que Astro está intentando generar páginas estáticas pero tu código depende de parámetros de URL dinámicos que solo están disponibles en tiempo de ejecución. Necesitas usar getStaticPaths() en tu archivo .astro para pregenerar todas las páginas posibles durante el build.
Cambia tu archivo a algo así:
---
import { lista_invitados } from '../datos/personas';
export function getStaticPaths() {
return Object.keys(lista_invitados).map(codigo => ({
params: { codigo }
}));
}
const { codigo } = Astro.params;
const persona = codigo && codigo in lista_invitados ? lista_invitados[codigo as keyof typeof lista_invitados] : null;
---
También cambia el nombre de tu archivo de index.astro a [codigo].astro para usar rutas dinámicas. Así Astro generará un archivo HTML estático para cada código durante el build y funcionará en Netlify sin el adaptador.
también puedes usar el modo hybrid en astro. añade output: 'hybrid' en tu astro.config.mjs y marca las páginas dinámicas con export const prerender = false. mantienes tu código actual y netlify maneja las rutas dinámicas sin problemas.
Tu problema es que estás mezclando generación estática con funcionalidad dinámica. Astro genera sitios estáticos por defecto, pero tu código intenta leer parámetros de query string que no existen durante el build. Una alternativa más simple: crea archivos separados para cada invitado. Haz una carpeta invitados y dentro archivos como xyz.astro, wxy.astro, etc. En cada archivo importa directamente los datos del invitado específico: ```astro
import { lista_invitados } from ‘…/…/datos/personas’;
const persona = lista_invitados.xyz;
``` Esto te da URLs como tudominio.com/invitados/xyz y cada página será completamente estática. Es más trabajo manual, pero funciona perfecto en Netlify sin adaptadores. Si tienes muchos invitados, entonces sí necesitarás la solución con getStaticPaths() que mencionó el usuario anterior.