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

Question

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

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

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

Bellow 是完整的报告，它是向我展示的构建器：

λ npm run build

dastshafa-final@0.1.0 build next build

信息 - 检查类型的有效性

./pages/cartProcess/index.js 13:6 警告：React Hook useEffect 有一个缺少依赖项：'displayNavbar'。包括它或删除依赖 y 数组。如果 'displayNavbar' 变化太频繁，找到定义它并在使用中包装该定义的父组件打回来。 react-hooks/exhaustive-deps 31:11 警告：请勿使用 .请改用 'next/image' 中的图片。看： https://nextjs.org/docs/messages/no-img-elem 进入 @next/next/no-img-element

./pages/index.js 14:6 警告：React Hook useEffect 缺少一个依赖性：'setDisplayNavbar'。包括它或删除依赖 ency 数组。如果'setDisplayNavbar'变化太频繁，找父定义它的组件并将该定义包装在 useCallback 中。 react-hooks/exhaustive-deps

./components/navbar.js 58:21 警告：请勿使用 .使用图像来自 'next/image' 而不是。看： https://nextjs.org/docs/messages/no-img-elem 进入 @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' 而不是。看： https://nextjs.org/docs/messages/no-img-ele换货 @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' 中的图片。看： https://nextjs.org/docs/messages/no-img-ele换货 @next/next/no-img-element 106:15 警告：img 元素必须有一个 alt 属性，可以是有意义的文本，也可以是空字符串装饰图像。 jsx-a11y/alt-text

./components/productItem.js 18:7 警告：请勿使用 .使用图像来自 'next/image' 而不是。看： https://nextjs.org/docs/messages/no-img-eleme 新月 @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'。包含它或删除依赖项 arr 哎。 react-hooks/exhaustive-deps 41:6 警告：React Hook useEffect 缺少依赖项：'filterProducts'。包括它或删除依赖数组。如果 'filterProducts' 变化太频繁，找到定义它的父组件并将该定义包装在使用回调。 react-hooks/exhaustive-deps

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

页面大小首次加载 JS ┌ ○ / 6.37 KB 144 KB ├ └ css/b7d3c6e158495aa9.css 962 B ├ /_app
0 B 129 kB ├ ○ /404 194 B 129 kB ├ ○ /cartProcess 1.45 kB 130 kB ├ └ css/da339555cb6d6d6b.css 233 B └ λ /产品/[...参数] 10.4 KB 148 KB └ css/f78802d3b8b60c2b.css 2.98 kB

首先加载所有共享的 JS 129 kB ├ chunks/framework-5f4595e5518b5600.js 42 kB ├ chunks/main-a054bbf31fb90f6a.js 27.6 kB ├ chunks/pages/_app-26dcf6f0f3b3e602.js 57.2 kB ├ chunks/webpack-62757ff16512d194.js 1.81 kB └ css/70cd855905d78aa0.css 24.4 kB

λ（服务器）服务器端在运行时间呈现（使用 getInitialProps 或 getServerSideProps) ○ (Static) 自动呈现为静态 HTML （不使用初始道具）

问题是什么？我该如何解决？

Answer 1

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

您可以 set a custom directory（例如 build），方法是将其添加到 next.config.js 中的 distDir 键：

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

module.exports = nextConfig;

如果您是 exporting your app to static HTML，export 命令输出到名为 out.

的目录

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

Why I can't find out build folder after runing npm run build on a nextjs project?

reactjs

next.js

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

Why I can't find out build folder after runing npm run build on a nextjs project?

reactjs

next.js

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