Despliegue de Next.js en AWS Amplify con conexión a MongoDB Atlas

En este artículo te mostraré cómo desplegar una aplicación de Next.js en AWS Amplify, usando MongoDB Atlas como base de datos, y cómo manejar correctamente las variables de entorno.
Además, te compartiré un repositorio de ejemplo para que puedas probar el despliegue por tu cuenta.

Requerimientos

• Conocimientos básicos de Next.js
• Cuenta de AWS con Amplify configurado
• Cuenta de MongoDB Atlas (gratuita o de pago)
• Repositorio de ejemplo: https://github.com/FaztWeb/nextjs-mongodb-crud

Consideración: Variables de entorno en Next.js + Amplify

Cuando subes tu proyecto de Next.js a AWS Amplify, es posible que las variables de entorno no sean accesibles automáticamente en el servidor (especialmente si usas Next.js con App Router o React Server Components).

En este ejemplo usaremos una variable de entorno llamada MONGODB_URI para conectarnos a MongoDB Atlas. Para que esta variable esté disponible tanto en build como en runtime, debes definirla correctamente en el archivo amplify.yml y en la consola de AWS Amplify.

Ejemplo de configuración en amplify.yml

Aquí te dejo un ejemplo de cómo estructurar tu archivo amplify.yml para que funcione correctamente:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - env | grep -e API_BASE_URL >> .env.production
        - env | grep -e NEXT_PUBLIC_ >> .env.production
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/* 
      - .next/cache/**/* 
  environment:
    variables:
      MONGODB_URI: $MONGODB_URI

¿Qué hace este comando?

env | grep -e API_BASE_URL >> .env.production
env | grep -e NEXT_PUBLIC_ >> .env.production

Esto copia las variables de entorno que comienzan con API_BASE_URL o NEXT_PUBLIC_ al archivo .env.production durante el proceso de build.
De esta forma, esas variables quedan accesibles en el bundle generado por Next.js.

Variables de entorno para MongoDB Atlas

En este ejemplo, usaremos la variable MONGODB_URI para conectarnos a nuestra base de datos en MongoDB Atlas.
Esta variable NO se expone al cliente (no lleva el prefijo NEXT_PUBLIC_), ya que se usará exclusivamente en el servidor (Server Components o API Routes).

Para que esté disponible en runtime, es necesario:

1. Definirla en la sección environment.variables del amplify.yml.
2. Definirla también en el entorno de Backend de Amplify:
   Amplify Console → App → Backend environments → (tu environment, ej. main) → Environment variables.

Recomendaciones finales

• Si usas variables de entorno del lado cliente → usa el prefijo NEXT_PUBLIC_.
• Si usas variables de entorno del lado servidor (por ejemplo, para conectar a MongoDB Atlas), defínelas en environment.variables y en el entorno Backend de Amplify.
• Después de modificar variables, siempre realiza un "Redeploy & clear cache" en Amplify.

Repositorio de ejemplo

Puedes usar el siguiente repositorio de ejemplo para probar el despliegue:
https://github.com/FaztWeb/nextjs-mongodb-crud

Recursos adicionales

• Cómo añadir variables de entorno en AWS Amplify
• Nextjs AWS Amplify SSR
• Nextjs AWS Amplify Environment variables docs

Con estos pasos tendrás tu app de Next.js funcionando en AWS Amplify, conectada a MongoDB Atlas, y con las variables de entorno correctamente configuradas para build y runtime.