Next JS 和 Vercel - 開發與生產

Question

我在 Next JS 中構建了一個基本的電影數據庫應用程序，以了解該框架是如何工作的。 這是一個允許您使用 NextJS API 端點對 firebase 執行 CRUD 操作的應用程序。

我的應用程序在開發中運行良好，但它對 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 function……

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)

提前致謝！

Answer 1

你應該使用你的服務器鏈接，而不是本地主機。

Answer 2

您不應該在請求的 URL 中硬編碼http://localhost:3000 。 您應該完全省略它，因為您使用的是 Next.js API 路由（同源）。

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

編輯：如果請求僅在客戶端發生，則上述解決方案將與 API 路由一起使用。

由於請求是在getInitialProps中發出的，因此您只需將 API 路由中的邏輯移動到單獨的 function （在這種情況下很可能是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;
}