const Details = ({ userData }) => {
  return (
    <Layout>
      <h1>{userData?.header}</h1>
    </Layout>
   )
}

export default Details

 
export const getStaticPaths = async () =>{
  const res = await fetch(`http://localhost:3000/api/blogs`);
  const blogs = await res.json();
  const ids = blogs.map((blog) => blog.id);
  const paths = ids.map((id)=> ({params:{id: id.toString()}}));

  return{
    paths,
    fallback:false,
  };
};

export const getStaticProps = async (context) =>{
  const res = await fetch(`http://localhost:3000/api/blogs/${context.params.id}`);
  const userData = await res.json();

  return{
    props:{
      data,
      userData,
    }
  }
}

While npm run build my Next.js project, I am getting such an error in the console:

当NPM运行Build My Next.js项目时，我在控制台中收到以下错误：

Error: Failed to collect page data from /blog/[id]

Why does this happen?

这一切为什么要发生？

In my case it was because I had a import of a module at the top like import { pusherServer } from '@/lib/pusher';. It is asynchronous. I moved the import inside the GET request function it was supposed to be called in, and did const { pusherServer } = require('@/lib/pusher');, which is synchronous and waits for it to load. This fixed it. Locally I had no problem building but when deploying on my VPS I had the error message of "Error: Failed to collect page data for {route}" pop up.

在我的例子中，这是因为我在顶部有一个模块的导入，比如import { pusherServer } from '@/lib/pusher';。它是异步的。我将导入移到了GET请求函数中，并执行了const { pusherServer } = require（'@/lib/pusher'）;，这是同步的，并等待它加载。这解决了它。在本地我没有问题的建设，但当部署在我的VPS我有错误消息“错误：未能收集页面数据为{route}”弹出。

edit: The reason I had a problem deploying on the VPS was because I was using coolify and the option of injecting the secrets during buildtime was turned off. Therefore the asynchronous way of doing "import from @/lib/pusher" was not working. After enabling it I was able to use the import method instead of require(). What require() did was inject the secret during runtime, not buildtime

编辑：我在VPS上部署时遇到问题的原因是因为我正在使用Coolify，而在构建时注入机密的选项被关闭了。因此，“从@/lib/pusher导入”的异步方式不起作用。在启用它之后，我能够使用导入方法而不是Required()。Required()所做的是在运行时注入秘密，而不是在构建时

Because of you are not fetching anything from any Api, you don't need to fetch anything remotly. That's why you are getting an ECONNREFUSED error.

因为您没有从任何Api获取任何东西，所以您不需要远程获取任何东西。这就是您收到ECONNREFUSED错误的原因。

Update

I've found two errors in your /blog/* folder:

我在您的/Blog/*文件夹中发现了两个错误：

• Add - 1 in line 106 of /blog/[id].js (See bellow)


• Remove lines 131 and 132 of /blog/index.js

/blog/[id].js

/博客/[id].js

import { data } from "../../data.js";

const Details = ({ userData }) => {
  return <Layout>{/* ... */}</Layout>;
};

export default Details;

export const getStaticPaths = async () => {
  const ids = data.map(({ id }) => id);
  const paths = ids.map((id) => ({ params: { id: id.toString() } }));
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  // You where trying here to get posts by id:
  // 1, 2, 3, 4
  // But what you really want is to get array indexes:
  // 0, 1, 2, 3
  // that's why we are adding - 1
  const userData = data[context.params.id - 1]; // <----- add - 1

  return {
    props: {
      data,
      userData,
    },
  };
};

/blog/index.js

/博客/index.js

export const getStaticProps = async (context) => {
  // ----- remove the fetch -----

  return {
    props: {
      data,
    },
  };
};