为什么我在运行npm run build的NextJS项目后，无法找到构建文件夹？

Question

我使用Nextjs框架创建了一个项目。

当我使用npm run dev命令运行项目时，我的项目可以正常运行，一切都很好。

但是，当我运行npm run build命令来构建项目时，之后我找不到构建文件夹。

下面是完整的报告，这是构建器向我展示的：

λ npm run build

dastshafa-final@0.1.0 build next build

info - 检查类型的有效性

./pages/cartProcess/index.js 13:6 警告：React Hook useEffect缺少依赖项：“displayNavbar”。要么包含它，要么删除依赖项数组。如果“displayNavbar”变化太频繁，请找到定义它的父组件，并在useCallback中包装该定义。react-hooks/exhaustive-deps 31:11 警告：不要使用。改用来自“next/image”的Image。请参见：https://nextjs.org/docs/messages/no-img-elem ent @next/next/no-img-element

./pages/index.js 14:6 警告：React Hook useEffect缺少依赖项：“setDisplayNavbar”。要么包含它，要么删除依赖项数组。如果“setDisplayNavbar”变化太频繁，请找到定义它的父组件，并在useCallback中包装该定义。react-hooks/exhaustive-deps

./components/navbar.js 58:21 警告：不要使用。改用来自“next/image”的Image。请参见：https://nextjs.org/docs/messages/no-img-elem ent @next/next/no-img-element 101:17 警告：缺少passHref。请参见：https://nextjs.org/docs/messages/link-passhref @next/next/link-passhref 117:9 警告：缺少passHref。请参见：https://nextjs.org/docs/messages/link-passhref @next/next/link-passhref 118:11 警告：不要使用。改用来自“next/image”的Image。请参见：https://nextjs.org/docs/messages/no-img-ele ment @next/next/no-img-element 118:11 警告：img元素必须具有alt属性，其中包含有意义的文本或用于装饰图像的空字符串。jsx-a11y/alt-text

./components/productDetail.js 72:6 警告：React Hook useMemo缺少依赖项：“productDetail”。要么包含它，要么删除依赖项数组。react-hooks/exhaustive-deps 106:15 警告：不要使用。改用来自“next/image”的Image。请参见：https://nextjs.org/docs/messages/no-img-ele ment @next/next/no-img-element 106:15 警告：img元素必须具有alt属性，其中包含有意义的文本或用于装饰图像的空字符串。jsx-a11y/alt-text

./components/productItem.js 18:7 警告：不要使用。改用来自“next/image”的Image。请参见：https://nextjs.org/docs/messages/no-img-eleme nt @next/next/no-img-element

./components/products.js 21:6 警告：React Hook useEffect缺少依赖项：“dispatch”。要么包含它，要么删除依赖项数组。react-hooks/exhaustive-deps

./components/sort.js 37:6 警告：React Hook useEffect缺少依赖项：“dispatch”。要么包含它，要么删除依赖项数组。react-hooks/exhaustive-deps 41:6 警告：React Hook useEffect缺少依赖项：“filterProducts”。要么包含它，要么删除依赖项数组。如果“filterProducts”变化太频繁，请找到定义它的父组件，并在useCallback中包装该定义。react-hooks/exhaustive-deps

info - 需要禁用某些ESLint规则吗？在这里了解更多信息：https://nextjs.org/docs/basic-features/eslint#disabling-rule s info - 创建优化的生产构建信息 - 成功编译信息 - 收集页面数据信息 - 生成静态页面（4/4）信息 - 完成页面优化

页面 大小 第一次加载JS

问题出在哪里？我该如何修复它？

- albert

Answer 1

请寻找名为.next的目录，这是build命令默认的输出目录。

您可以通过在next.config.js中添加到distDir键来设置一个自定义目录（例如build）： 参考此链接。

const nextConfig = {
  distDir: "build",
};

module.exports = nextConfig;

如果你正在将你的应用程序导出为静态HTML，则export命令会输出到一个名为out的目录中。

- Mark G

---

在构建文件夹中，有一些 .json 文件和服务器以及静态文件夹。这些是我应该上传到 Plesk 的最终输出吗？ - albert

@albert 我不熟悉如何将Node.js应用程序部署到Plesk，但在运行“build”后，至少需要package.json文件来运行“start”，需要node_modules目录以进行运行时依赖项（不建议上传本地版本；应该有一种方法在上传package.json后在远程Plesk服务器上运行“npm install”），以及整个.next目录。我会查看Plesk文档，看看他们是否有关于如何部署Node.js应用程序的特定说明。 - Mark G

Answer 2

我遇到了同样的问题，将这段代码添加到我的 "next.config.js" 中解决了它

const nextConfig = {
  distDir: "build", //this line will tell the build to create a file with this name
};

module.exports = nextConfig;

- Ran Tab