英文:
Unknown error when attempting to build nextjs app
问题
我在尝试构建我的Next.js项目时遇到一个我不理解的错误。
index.js：
import FeaturedPosts from "@/components/home-page/Featured-Posts";
import axios from "axios";
import { Fragment } from "react";
import { Toaster } from "react-hot-toast";
import Hero from "../components/home-page/Hero";
export default function HomePage({postList}) {
return (
<Fragment>
<Toaster />
<Hero />
<FeaturedPosts postList={postList} />
</Fragment>
);
}
export const getStaticProps = async () => {
const res = await axios.get("http://localhost:3000/api/posts")
return {
props: {
postList: res?.data
}
}
}
错误：
error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json
info - 创建了一个优化的生产构建...
info - 成功编译
info - 收集页面数据...
info - 生成静态页面 (0/6)
info - 生成静态页面 (1/6)
info - 生成静态页面 (2/6)
我认为这可能是因为无法访问环境变量，但是将它们从.env 中移除也没有改变任何事情。
英文:
I get an error that I don't understand when I try to build my next js project.
index.js :
import FeaturedPosts from "@/components/home-page/Featured-Posts";
import axios from "axios";
import { Fragment } from "react";
import { Toaster } from "react-hot-toast";
import Hero from "../components/home-page/Hero";
export default function HomePage({postList}) {
return (
<Fragment>
<Toaster />
<Hero />
<FeaturedPosts postList={postList} />
</Fragment>
);
}
export const getStaticProps = async () => {
const res = await axios.get("http://localhost:3000/api/posts")
return{ props: {
postList: res?.data
}}
}
Error:
error - ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/.eslintrc.json
info - Creating an optimized production build...
info - Compiled successfully
info - Collecting page data...
info - Generating static pages (0/6)
info - Generating static pages (1/6)
info - Generating static pages (2/6)
I thought that it could be due to not having access to environment variables but, but taking them out of.env didn't change anything.
答案1
得分: 0
我的猜测是，你正在调用 const res = await axios.get("http://localhost:3000/api/posts")，但该地址尚未启用，而且你在未检查数据是否可用的情况下返回了数据。在从 getStaticProps 返回 props 时，可以这样做：
return {
props: {
postList: res?.data
},
notFound: !res?.data,
}
你还可以手动添加 props，以查看是否能正常运行，而后在部署时更改 URL。我建议在环境变量中添加一个 URL 变量，以便在生产/开发环境中轻松切换 URL。
英文:
My bet is that you are calling const res = await axios.get("http://localhost:3000/api/posts") which is not live yet and you are returning the data without checking if it's available or not. When returing the props from getStaticProps do it as such:
return {
props: {
postList: res?.data
},
notFound: !res?.data,
}
You can also manually adding the props to see if it works without calling the api and later when you deploy it you can change the url. I suggest adding a url variable in url env so that you can easily switch between url when in production/development.
答案2
得分: -1
问题在于我使用了getStaticProps而不是getServerSideProps。
英文:
The issue was that I was using getStaticProps instead of getServerSideProps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论