Next.js静态网站部署问题咨询：构建报错排查与静态导出实现方案

Hey there, let's break down your problems one by one and get your personal site deployed properly.

1. 为什么执行npm run build会出现ECONNREFUSED错误？ #

这个报错的核心原因很简单：

getStaticProps和getStaticPaths是在构建阶段运行的（不管你是本地build还是在服务器上build），这时候你的Next.js服务并没有启动在服务器的3000端口，所以你去请求http://<your-server-ip>:3000/api/articles自然会被拒绝连接。

更关键的是：在getStaticProps里，你完全没必要通过HTTP请求自己的API路由！Next.js允许你直接在构建阶段调用后端逻辑（比如读取数据库、本地文件），跳过网络请求这一步。

修复方案：重构API逻辑到本地模块 #

把你pages/api/articles和pages/api/articles/[id]里的业务逻辑抽成单独的工具函数，直接在getStaticProps/getStaticPaths里调用：

1. 新建lib/articles.js文件，把获取文章的逻辑移进去：

// lib/articles.js
import fs from 'fs';
import path from 'path';

// 示例：假设你从本地JSON文件读取文章数据，你可以替换成数据库查询逻辑
export async function getAllArticles() {
  const filePath = path.join(process.cwd(), 'data', 'articles.json');
  const jsonContent = fs.readFileSync(filePath, 'utf8');
  return JSON.parse(jsonContent);
}

export async function getArticleById(id) {
  const allArticles = await getAllArticles();
  return allArticles.find(article => article.id === parseInt(id));
}

2. 修改pages/article/[id]/index.js，直接调用这些函数，删掉fetch逻辑：

import { getAllArticles, getArticleById } from '../../../lib/articles';
// ... 其他导入代码

const article = ({article}) => {
  return <>
    <Meta title={article.title} description={article.excerpt}/>
    <h1>{article.title}</h1>
    <p>{article.body}</p>
    <br/>
    <Link href="/">Go Back</Link>
  </>
};

export const getStaticProps = async(context) => {
  // 直接调用本地函数，不需要fetch
  const article = await getArticleById(context.params.id);
  return { props: { article } }
}

export const getStaticPaths = async() => {
  // 同样直接调用本地函数
  const articles = await getAllArticles();
  const ids = articles.map(article => article.id);
  const paths = ids.map(id => ({ params: { id: id.toString() } }) );
  return { paths, fallback: false }
}

这样修改后，build阶段就不会再发起无效的网络请求，报错自然就解决了。

2. 如何正确生成out文件夹并部署静态网站？ #

你的package.json里的build脚本是完全正确的：

"build": "next build && next export"

执行npm run build后，Next.js会先完成项目构建，然后自动把静态化的页面、资源打包到out文件夹里。

部署注意事项： #

• 静态导出的out文件夹里不包含API路由（因为API是服务器端逻辑，静态网站不需要运行Node.js），这也是我们刚才把API逻辑抽出来的原因。
• 你可以用任何静态文件服务器部署out文件夹：
  • 用Nginx：配置Nginx的根目录指向out文件夹的路径即可；
  • 用云平台：比如把out文件夹上传到Netlify、Vercel、阿里云OSS等静态托管服务。

3. 关于生产环境运行方式的疑问 #

npm run dev是开发模式，带热重载、调试信息，绝对不能用于生产环境。

而如果你选择静态导出的方式（也就是生成out文件夹），生产环境根本不需要运行next start——只需要把out文件夹部署到静态服务器上就行，不需要服务器运行Node.js，这也是静态部署的优势。

最后：这种静态部署方式是否正确？ #

完全正确！这是Next.js官方推荐的**静态站点生成（SSG）**部署方式，非常适合个人博客、文档站这类内容相对固定的网站，优点是：

• 部署成本极低，不需要维护Node.js服务；
• 页面加载速度极快，因为都是预先生成的静态HTML；
• 兼容性好，几乎所有托管平台都支持静态文件部署。

内容的提问来源于stack exchange，提问作者NeoZoom.lua