title: 404 error when calling api routes after deployment
body: <p>I am deploying a Nextjs/Express app to Vercel and am running into issues when calling /api routes. An example is <a href="https://vohnt.vercel.app/services" rel="nofollow noreferrer">this page</a> which tries to retrieve products via redux from the server when it loads. This is working fine in dev, but I am getting a 404 error on all api routes after deploying.</p>
  <p>index.js</p>
  <pre><code>const express = require('express');
  const next = require('next');
  const mongoose = require('mongoose');
  const cookieSession = require('cookie-session');
  const passport = require('passport');
  const bodyParser = require('body-parser');
  const keys = require('../config/keys');
  require('../models/User');
  require('../services/passport/passport');
  
  
  
  const PORT = process.env.PORT || 3000
  const dev = process.env.NODE_ENV !== 'production'
  const app = next({ dev })
  const handle = app.getRequestHandler()
  
  mongoose.Promise = global.Promise;
  mongoose.connect(keys.mongoURI, { useUnifiedTopology: true, useNewUrlParser: true, useCreateIndex: true });
  
  app
      .prepare()
      .then(() =&gt; {
          const server = express();
  
          server.use(bodyParser.json({limit: '50mb'}));
          server.use(
          cookieSession({
              maxAge: 30 * 24 * 60 * 60 * 1000,
              keys: [keys.cookieKey]
          })
          );
          server.use(passport.initialize());
          server.use(passport.session());
  
          const getRoutes = require('./routes/index.js');
          server.use('/api', getRoutes);
          // const routes = getRoutes();
  
          server.get(&quot;*&quot;, (req, res) =&gt; {
              return handle(req, res);
          })
  
          server.listen(PORT, err =&gt; {
              if (err) throw err;
              console.log(`&gt; Ready on ${PORT}`);
          })
      })
      .catch(ex =&gt; {
          console.error(ex.stack);
          process.exit(1);
      })
  </code></pre>
  <p>services.js</p>
  <pre><code>import React from 'react';
  import Head from 'next/head';
  import Link from 'next/link';
  import Nav from '../components/Navbar/ColorNav';
  import Selector from '../components/Custom/Presentation/MapSelector';
  import AppointmentMobile from '../components/Custom/Presentation/Mobile-AppointmentPresentation';
  import Footer from '../components/Footer/alt-footer';
  import SelService from '../components/Custom/Presentation/Presentation-service.js';
  
  const Services = () =&gt; {
      return (
          &lt;React.Fragment&gt;
              &lt;div className=&quot;services-page&quot;&gt;
              &lt;Head&gt;
                  &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot; /&gt;
                  &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; /&gt;
                  &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;&lt;/link&gt;
                  &lt;title&gt;Vohnt | Services&lt;/title&gt;
                  &lt;meta name=&quot;keywords&quot; content=&quot;Vohnt&quot;/&gt;
              &lt;/Head&gt;
              &lt;div className=&quot;service-header&quot;&gt;
              &lt;Nav popBox=&quot;services&quot;/&gt;
              &lt;div className=&quot;service-selector&quot;&gt;
              &lt;Selector /&gt;
              &lt;/div&gt;
              {/* &lt;div className=&quot;mobile-service-selector&quot;&gt;
              &lt;AppointmentMobile /&gt;
              &lt;/div&gt; */}
              &lt;/div&gt;
              &lt;div className=&quot;service-section-1&quot;&gt;
                  &lt;div className=&quot;service-sec-1-container&quot;&gt;
                      &lt;h2 &gt;Vohnt’s service offerings&lt;/h2&gt;
                      &lt;p className=&quot;serv-1-p&quot;&gt;Creating a world where you have immediate, convenient, and affordable access to car care.&lt;/p&gt;
                      &lt;div className=&quot;serv-1-button&quot;&gt;
                      &lt;Link href=&quot;/how-it-works&quot;&gt;
                      &lt;button className=&quot;learn-more-button&quot; id=&quot;no-border-radius&quot;&gt;Learn More&lt;/button&gt;
                      &lt;/Link&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;vohnt-product-offerings&quot;&gt;
                      &lt;div className=&quot;product-list-left&quot;&gt;
                          &lt;SelService simpleHeight='600px' buttons=&quot;services&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;product-list-left-small&quot;&gt;
                          &lt;SelService simpleHeight='420px' buttons=&quot;services&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;product-list-left-small2&quot;&gt;
                          &lt;SelService simpleHeight='400px' buttons=&quot;services&quot;/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;product-list-left-small3&quot;&gt;
                          &lt;SelService simpleHeight='350px' buttons=&quot;services&quot;/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className=&quot;alt-footer-2&quot;&gt;
              &lt;Footer /&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/React.Fragment&gt;
      )
  }
  
  export default Services;
  </code></pre>
  <p>presentation-service tells redux to call on page load</p>
  <pre><code>    useEffect(() =&gt; {
          dispatch(loadProducts());
      }, [])
  </code></pre>