Next JS and Vercel - development and production

[ollyb]

Hi guys!

I’ve been working on a basic movie DB app in Next JS. Basically it’s an app that allows you to perform CRUD operations to firebase, utilising the NextJS built in API endpoints which are ran as serverless functions when deployed to Vercel.

I have the app working fine in development, however it does not work at all once deployed. I was wondering if anyone can shed some light?

My index page has this getInitialProps function…

Home.getInitialProps = async () => {
    const categories = await getCategories()
    const movies = await getMovies()
    const images = movies.map(movie => {
      return {
        id: `image-${movie.id}`,
        url: movie.cover,
        name: movie.name
      }
    })
    
    return {
      movies,
      images,
      categories
    }
  }

This fires off the getMovies function here…

export const getMovies = async () => {
    const res = await axios.get('http://localhost:3000/api/movies')
    return res.data

And the API endpoint it hits looks like this…

import firebase from '../../lib/firebase';

export default async(req, res) => {
    const moviesRef = firebase
            .collection('movies');
            const snapshot = await moviesRef.get();
            const movies = [];
            snapshot.forEach(doc => {
                movies.push({ id: doc.id, ...doc.data() })
            })
            res.json(movies)

Is it because I’ve explicitly asked it to hit localhost:3000? If so, what’s the alternative here?!

The entire github repo is here if you’d like to see more…

obolland/MovieDB

Thank you in advance!
Olly

[Mohamed-Magdey]

I don’t know if your problem solved but you should use getStaticProps to fetch data and getStaticPaths for dynamic routes this is the best practice according to the documentation https://nextjs.org/docs/basic-features/data-fetching.