NextJs app API behaves inconsistent on Vercel

Question

I deployed my NextJs app to Vercel. Static pages works great. But the api part (pull data from an azure sql database, async mssql) behaves inconsistent, sometimes it returns the expected response, sometimes it doesn't. When I tested it on my local machine, everything worked great, so I don't think it's code related. Is this a known issue with NextJs api on Vercel?

I have tried to deploy my NextJs app to Azure, it had all kinds of weird errors. I have also tried to deploy the app as a docker image, and created an azure web app using the docker image, it works, but loadtime is horrible. I am curious if you have experienced similar performance issues when creating an web app on azure using a docker image.

Any input is appreciated. Thanks

score 1 · Answer 1 · answered Mar 31 '22 at 04:36

To resolve NextJs inconsistency on Vercel issue, you can try following docker-compose.dev.yml as suggested by maxproske:

version: '3'

services:
  next-app:
    container_name: next-app
    build:
      context: ./next-app
      dockerfile: dev.Dockerfile
    environment:
      ENV_VARIABLE: ${ENV_VARIABLE}
      NEXT_PUBLIC_ENV_VARIABLE: ${NEXT_PUBLIC_ENV_VARIABLE}
    volumes:
      - ./next-app/src:/app/src
      - ./next-app/public:/app/public
    restart: always
    ports:
      - 3000:3000
    networks:
      - my_network

  # Add more containers below (nginx, postgres, etc.)

# Define a bridge network, which allows containers to communicate with each other,
# by using their container name as a hostname
networks:
  my_network:
    external: true

Also check for CPU/Memory Power or CDN related issue as mentioned on Why is my NextJS performace score so inconsistent in web.dev?

References: vercel/next.js - Add with-docker-compose example , and Inconsistent behaviour of request.nextUrl.href

NextJs app API behaves inconsistent on Vercel

1 Answers1