Я создал базовое приложение для базы данных фильмов на Next JS, чтобы посмотреть, как работает фреймворк. Это приложение, которое позволяет выполнять операции CRUD с firebase, используя конечные точки API NextJS.

У меня приложение работает нормально в разработке, но в Vercel оно не работает сразу. Мне было интересно, может ли кто-нибудь пролить свет?

Вот первый вызов «получить все данные» при инициализации. Остальные вызовы API следуют тому же шаблону. После развертывания ничего не работает.

Моя индексная страница имеет эту функцию getInitialProps

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
    }
  }

Здесь запускается функция getMovies

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

И конечная точка API, на которую он попадает, выглядит так ...

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)

Заранее спасибо!

2
Olly B 11 Янв 2021 в 19:24

2 ответа

Лучший ответ

Не следует жестко указывать http://localhost:3000 в URL-адресе запроса. Вам следует полностью опустить его, поскольку вы используете маршруты API Next.js (то же происхождение).

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

Изменить: указанное выше решение будет работать с маршрутами API, если запрос выполняется только на стороне клиента .

Поскольку запрос выполняется в getInitialProps, вам следует просто переместить логику в своем маршруте API в отдельную функцию (в данном случае вполне может быть getMovies) и вызвать ее непосредственно в getInitialProps вместо.

export const getMovies = async () => {
    const moviesRef = firebase.collection('movies');
    const snapshot = await moviesRef.get();
    const movies = [];
    snapshot.forEach(doc => {
        movies.push({ id: doc.id, ...doc.data() })
    });
    return movies;
}
1
juliomalves 12 Янв 2021 в 15:42

Вы должны использовать ссылку на сервер, а не localhost.

2
Andres Campuzano Garzon 11 Янв 2021 в 19:22