En Mercado Pago no todos los medios de pago son "síncronos", por ende, es necesario configurar una URL de nuestra aplicación a la cual Mercado Pago nos notifique cuando un pago haya sido aprobado / rechazado / anulado / etc.
Como Mercado Pago no sabe que es localhost:3000 (ni tampoco lo que es nuestro equipo local), vamos a tener que exponer el puerto donde corre nuestra aplicación en nuestro equipo local, a internet.
Una vez que tengamos la URL, independientemente de la herramienta que usemos para exponer nuestro puerto, vamos a agregarla a nuestro .env.local como APP_URL.
Cualquier herramienta que nos permita exponer un puerto de nuestra aplicación a internet va a ser suficiente. Te dejo acá dos alternativas que probé y funcionan bien.
Podemos instalar Cloudflared Tunnel y usarlo para exponer nuestro puerto. Simplemente descargá el binario correspondiente a tu sistema operativo y corré el siguiente comando:
cloudflared tunnel --url http://localhost:3000Note
Asegurate de cerrar y abrir la terminal en caso de que no te reconozca el comando.
Yo estoy usando VSCode, por ende voy a usar Dev Tunnels para exponer el puerto. Si nos dirigimos a la sección de Ports y hacemos click en Forward a Port, podemos elegir un puerto (nuestra aplicación corre en el 3000) y nos dará una URL. Asegurate de cambiar la visibilidad de la URL a Public para que Mercado Pago pueda acceder a ella.
Note
Si no ves la sección de Ports en VSCode, presiona ctrl + shift + p (o cmd + shift + p en Mac) y busca Forward a Port (o en español asumo debe ser Exponer un puerto) y te mostrará la sección.
Si corremos nuestra aplicación con npm run dev (habiendo hecho npm install previamente) y luego entramos a la URL que obtuvimos, deberíamos ver nuestra aplicación corriendo. Para asegurarte de que es pública, intentá de acceder con tu celular sin conectarte a la misma red wifi.