如何解决Next JS 和 Vercel - 开发与生产
我已经在 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 函数......
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)
提前致谢!
解决方法
你应该使用你的服务器链接,而不是本地主机。
,您不应在请求的 URL 中硬编码 http://localhost:3000
。您应该完全省略它,因为您使用的是 Next.js API 路由(同源)。
export const getMovies = async () => {
const res = await axios.get('/api/movies')
return res.data
}
编辑:如果请求仅发生在客户端,上述解决方案将适用于 API 路由。
由于请求是在 getInitialProps
中发出的,您应该简单地将 API 路由中的逻辑移动到一个单独的函数(在这种情况下很可能是 getMovies
)并直接在 {{ 1}} 代替。
getInitialProps
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。