title: Next JS and Vercel - development vs production
body: <p>I’ve built a basic movie DB app in Next JS to see how the framework works. It’s an app that allows you to perform CRUD operations to firebase, utilising the NextJS API endpoints.</p>
  <p>I have the app working fine in development, however it does not work at all once to Vercel. I was wondering if anyone can shed some light?</p>
  <p>Here is the first 'get all data' call upon initialisation. The other API calls follow the same pattern. None work once deployed.</p>
  <p>My index page has this getInitialProps function…</p>
  <pre><code>Home.getInitialProps = async () =&gt; {
      const categories = await getCategories()
      const movies = await getMovies()
      const images = movies.map(movie =&gt; {
        return {
          id: `image-${movie.id}`,
          url: movie.cover,
          name: movie.name
        }
      })
      
      return {
        movies,
        images,
        categories
      }
    }
  </code></pre>
  <p>This fires off the getMovies function here…</p>
  <pre><code>export const getMovies = async () =&gt; {
      const res = await axios.get('http://localhost:3000/api/movies')
      return res.data
  </code></pre>
  <p>And the API endpoint it hits looks like this…</p>
  <pre><code>import firebase from '../../lib/firebase';
  
  export default async(req, res) =&gt; {
      const moviesRef = firebase
              .collection('movies');
              const snapshot = await moviesRef.get();
              const movies = [];
              snapshot.forEach(doc =&gt; {
                  movies.push({ id: doc.id, ...doc.data() })
              })
              res.json(movies)
  </code></pre>
  <p>Thanks in advance!</p>