为什么在 nextjs 项目上运行 npm run build 后找不到构建文件夹？

Question

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

\n

当我使用命令运行项目时npm run dev，我的项目运行正常，没问题。

\n

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

\n

以下是向我展示的完整报告：

\n

\n

\xce\xbb npm 运行构建

\n

\n

dastshafa-final@0.1.0 构建\n下一个构建

\n

\n

info - 检查类型的有效性

\n

./pages/cartProcess/index.js 13:6 警告：React Hook useEffect 缺少依赖项：\'displayNavbar\'。包含它或删除\n依赖数组。如果“displayNavbar”更改过于频繁，请找到定义它的父组件并将该定义包装在 useCallback 中。react-hooks/exhaustive-deps 31:11 警告：请勿使用\n。请改用“next/image”中的图像。请参阅：\n https://nextjs.org/docs/messages/no-img-elem ent\n@next/next/no-img-element

\n

./pages/index.js 14:6 警告：React Hook useEffect 缺少\n依赖项：\'setDisplayNavbar\'。包含它或删除依赖数组。如果“setDisplayNavbar”更改过于频繁，请找到定义它的父\n组件并将该定义包装在 useCallback 中。\nreact-hooks/exhaustive-deps

\n

./components/navbar.js 58:21 警告：请勿使用 . 请使用\n来自“next/image”的图像。请参阅：\n https://nextjs.org/docs/messages/no-img-elem ent\n@next/next/no-img-element 101:17 警告：passHref 丢失。请参阅：\n https://nextjs.org/docs/messages/link-passhref \n@next/next/link-passhref 117:9 警告：passHref 丢失。请参阅：\n https://nextjs.org/docs/messages/link-passhref \n@next/next/link-passhref 118:11 警告：请勿使用 . 请使用\n来自“next/image”的图像。请参阅：\n https://nextjs.org/docs/messages/no-img-ele ment\n@next/next/no-img-element 118:11 警告：img 元素必须有一个\nalt 属性，可以是有意义的文本，或装饰图像的\n空字符串。jsx-a11y/替代文本

\n

./components/productDetail.js 72:6 警告：React Hook useMemo 缺少依赖项：\'productDetail\'。包含它或删除\n依赖项数组。react-hooks/exhaustive-deps 106:15 警告：不要\n使用 。请改用“next/image”中的图像。请参阅：\n https://nextjs.org/docs/messages/no-img-ele ment\n@next/next/no-img-element 106:15 警告：img 元素必须有一个\nalt 属性，可以是有意义的文本，或装饰图像的\n空字符串。jsx-a11y/替代文本

\n

./components/productItem.js 18:7 警告：请勿使用 . 请使用\n来自“next/image”的图像。请参阅：\n https://nextjs.org/docs/messages/no-img-eleme nt\n@next/next/no-img-element

\n

./components/products.js 21:6 警告：React Hook useEffect 缺少依赖项：\'dispatch\'。包含它或删除依赖数组。\n 反应钩子/详尽的依赖

\n

./components/sort.js 37:6 警告：React Hook useEffect 缺少\n依赖项：\'dispatch\'。要么包含它，要么删除依赖项 arr\nay。react-hooks/exhaustive-deps 41:6 警告：React Hook useEffect\n缺少依赖项：\'filterProducts\'。包含它或删除依赖数组。如果“filterProducts”更改过于频繁，\n找到定义它的父组件并将该定义包装在\n seCallback 中。反应钩子/详尽的依赖

\n

info - 需要禁用一些 ESLint 规则？在此处了解更多信息：\n https://nextjs.org/docs/basic-features/eslint#disabling-rule s info -\n创建优化的生产构建信息 - 编译成功\ninfo - 收集页面数据信息 - 生成静态页面 ( 4/4)\ninfo - 完成页面优化

\n

页面大小 首次加载 JS \xe2\x94\x8c \xe2\x97\x8b\n/ 6.37 kB 144 kB \xe2\x94\x9c \xe2\x94\x94\ncss/b7d3c6e158495aa9.css 962 B \xe2\x94\x9c /_app
\n0 B 129 kB \xe2\x94\x9c \xe2\x97\x8b /404 194\nB 129 kB \xe2\x94\x9c \xe2\x97\x8b /cartProcess 1.45 kB\n130 kB \xe2\x94\ x9c \xe2\x94\x94 css/da339555cb6d6d6b.css 233 B \xe2\x94\x94 \xce\xbb\n/product/[...params] 10.4 kB 148 kB\n\xe2\x94\x94 css/f78802d3b8b60c2b .css 2.98 kB

\n

\n
• 首先加载所有 129 kB \xe2\x94\x9c chunks/framework-5f4595e5518b5600.js 共享的 JS 42 kB \xe2\x94\x9c\nchunks/main-a054bbf31fb90f6a.js 27.6 kB \xe2\x94\x9c\nchunks/pages/ _app-26dcf6f0f3b3e602.js 57.2 kB \xe2\x94\x9c\nchunks/webpack-62757ff16512d194.js 1.81 kB \xe2\x94\x94\ncss/70cd855905d78aa0.css 24.4 kB
\n

\n

\xce\xbb（服务器）服务器端在运行时呈现（使用 getInitialProps 或\ngetServerSideProps） \xe2\x97\x8b（静态）自动呈现为静态 HTML\n（不使用初始属性）

\n

\n

问题是什么？我该如何修复它？

\n

Answer 1

查找名为的目录.next，该目录是build命令输出的默认目录。

您可以通过将自定义目录添加到 中的键来设置自定义目录（例如） ：builddistDirnext.config.js

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

module.exports = nextConfig;

如果您将应用程序导出为静态 HTML，该export命令将输出到名为 的目录out。