NextJS/Vercel/MongoDB FetchError: request to http://localhost:3000/api/gear failed, reason: connect ECONNREFUSED


I use NextJS to make API calls to MongoDB. When I go to the API link , I see the MongoDB query returned. However when I try to fetch that data to a webpage I get a 500 Internal Server Error. The function logs show the following error:

2020-05-27T17:17:02.129Z    5a0c88b0-da63-4225-acf1-ea1d589ff438    ERROR   FetchError: request to http://localhost:3000/api/gear failed, reason: connect ECONNREFUSED
    at ClientRequest.<anonymous> (/var/task/node_modules/next/dist/compiled/node-fetch/index.js:1:147710)
    at ClientRequest.emit (events.js:310:20)
    at Socket.socketErrorListener (_http_client.js:426:9)
    at Socket.emit (events.js:310:20)
    at emitErrorNT (internal/streams/destroy.js:92:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  message: 'request to http://localhost:3000/api/gear failed, reason: connect ECONNREFUSED',
  type: 'system',
  errno: 'ECONNREFUSED',

All of the code works locally when running npm run dev, it just does not work when hosted to Vercel. I just don’t quite understand why when I navigate to the API page it returns the MongoDB data, but when I try to call that API from another page it fails to connect.

For reference I used this link to construct my database calls.

Below is the getInitialProps for the failing page as well as the database middleware.


import React, { Fragment } from "react"
import fetch from 'isomorphic-unfetch'

//Returned HTML here based on query. Left this part out to keep the issue simple.

export async function getServerSideProps() {
    const res = await fetch('http://localhost:3000/api/gear')
    const json = await res.json()
    return { props: { gearArray: json } }

export default Gear;


import nextConnect from 'next-connect';
import middleware from '../../middleware/database';

const handler = nextConnect();


handler.get(async (req, res) => {
    let gear = await req.db.collection('gear').find({}).sort({gear: 1}).toArray();

export default handler;


import { MongoClient } from 'mongodb';
import nextConnect from 'next-connect';

const client = new MongoClient(process.env.MONGOURL, {
  useNewUrlParser: true,
  useUnifiedTopology: true,

async function database(req, res, next) {
  if (!client.isConnected()) await client.connect();
  req.dbClient = client;
  req.db = client.db('BassTabs');
  return next();

const middleware = nextConnect();


export default middleware;


When hosting your application on Vercel, you need to change your fetch URL to, because this is where the data is coming from now.

When running your application locally, you use localhost.

Leave a Reply

Your email address will not be published. Required fields are marked *