Publica el sitio en internet

Los dos ajustes

Los dos son opcionales. Sin Docker van en .env.local o en las variables de entorno de tu hosting.

Los dos son valores NEXT_PUBLIC_: la compilación los escribe en el JavaScript que carga el navegador. Defínelos antes de compilar y vuelve a compilar después de cambiar alguno. Nunca pongas un secreto en ellos: cualquier visitante puede leerlos.

• Conecta el formulario de contacto

Vercel

1. 01

   Pon el código en un repositorio Git

   La descarga no tiene historial de Git. Inicia uno en la carpeta, crea un repositorio vacío en GitHub, GitLab o Bitbucket y sube el código como indica su página.

   Terminalen landing-page-template-1Copiar

   git init
   git add .
   git commit -m "First version"
2. 02

   Impórtalo en Vercel

   En Vercel, elige Add New, luego Project, e importa el repositorio. Vercel detecta Next.js; mantén sus ajustes de compilación.
3. 03

   Añade los ajustes

   En Environment Variables, añade NEXT_PUBLIC_SITE_URL con tu dirección, y NEXT_PUBLIC_API_BASE_URL si tienes una API para el formulario de contacto. Añade también ENABLE_EXPERIMENTAL_COREPACK con el valor 1, para que Vercel instale con la versión de Yarn 4 que fija el proyecto.
4. 04

   Despliega

   Pulsa Deploy. Si más adelante cambias una variable, vuelve a desplegar para que el nuevo valor entre en la compilación.

   Resultado esperado: Vercel abre tu sitio en su dirección vercel.app. Añade tu propio dominio en Settings, luego Domains, y pon ese dominio en NEXT_PUBLIC_SITE_URL.

   ¿Tienes problemas?

Cualquier hosting con Node.js

En un servidor o un hosting con Node.js 22 o posterior: define los dos valores en .env.local o en el entorno del hosting, y después instala, compila e inicia.

corepack enable
yarn install
yarn build
yarn start

• yarn start escucha en el puerto 3030, diga lo que diga PORT. En un hosting que asigna el puerto a tu app en PORT, como Railway o Render, pon como comando de inicio yarn start -p $PORT.
• Mantén el proceso en marcha con el gestor de procesos de tu hosting y pon delante un servidor web como Nginx o Caddy para tener HTTPS en tu dominio.

La imagen de Docker

La imagen que ejecutaste en local también sirve el sitio en producción. Pasa tus ajustes a la construcción, y omite la API si no tienes ninguna:

docker build -t agency-portfolio --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com .

Después ejecútala en el servidor. -d la mantiene en segundo plano y --restart unless-stopped la vuelve a iniciar tras un reinicio:

docker run -d --restart unless-stopped -p 3030:3030 agency-portfolio

• docker run -e NEXT_PUBLIC_SITE_URL=… no cambia nada: el valor se escribió durante la construcción. Vuelve a construir la imagen con el nuevo --build-arg.
• Dentro del contenedor el sitio escucha en 3030. Apunta tu servidor web al puerto a la izquierda de -p.

Antes de publicar

• Pon tu dirección en NEXT_PUBLIC_SITE_URL.
• Sustituye el contenido de muestra: los proyectos, testimonios, precios, correo, teléfono y dirección son ejemplos.
• Da a los botones y a los enlaces sociales y legales destinos reales: vienen sin destino o como #.
• Conecta el formulario de contacto a tu API o quítalo: sin una API, los mensajes no llegan a ningún sitio.
• Cambia el autor en generator de src/app/[locale]/layout.tsx, los nombres de public/site.webmanifest y la imagen de vista previa public/image.png.

• Hazla tuya