如何构建 next.js 生产？
How to build next.js production?
我尝试在我的服务器上获得 next.js 到 运行 的生产版本，但是当我尝试
时我无法构建 next.js 生产版本
npm run build
有谁知道如何让 next.js 中的产品构建正常工作 我在 next.js 文档中做了所有操作，但总是在下面出现此错误。如果我进行开发构建，它工作得很好，但尝试生产构建会导致错误。
我也 next build 多次并重新安装了所有 node_modules 包仍然有这个错误。
它总是在终端显示我
Error: Could not find a valid build in the '/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/.next' directory! Try building your app with 'next build' before starting the server.
at Server.readBuildId (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:753:15)
at new Server (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:80:25)
at module.exports (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next.js:6:10)
at Object.<anonymous> (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/next.config.js:6:13)
at Module._compile (internal/modules/cjs/loader.js:707:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (internal/modules/cjs/helpers.js:22:18)
at loadConfig (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/config.js:47:28)
at _callee2$ (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/build/index.js:52:42)
at tryCatch (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:114:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-next@1.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello-next@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/kk/.npm/_logs/2018-12-10T19_58_00_588Z-debug.log
server.js
const express = require("express");
const next = require("next");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});
next.config.js
const express = require("express");
const next = require("next");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("/projects/:page", (req, res) => {
const page = req.params.page;
let file = "";
switch (page) {
case "example1":
file = "/projects/example1";
break;
case "example2":
file = "/projects/example2";
break;
}
return app.render(req, res, file, { page });
});
server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});
package.json
{
"name": "hello-next",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"export": "next export"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"express": "^4.16.4",
"next": "^7.0.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"redux": "^4.0.1",
"video-react": "^0.13.1"
}
}
如果有人有想法那就太好了！我计划使用我的 AWS 服务器上的节点 运行 这个 next.js 站点。但是要做到这一点，我需要获得 react.js 的生产版本，目前我可以 运行 只是一个开发版本。
希望有人有想法。
提前致谢！
您必须在您的根文件夹而不是 .next/
中启动 next build
您的 server.js 配置似乎不正确。请尝试将所有内容从 next.config.js 移动到 server.js，确保 next.config.js 文件为空，然后创建一个新的 npm 运行 脚本：
"prod_start": "NODE_ENV=production node server.js"
您的 package.json 应该如下所示：
{
"name": "hello-next",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"prod_start": "NODE_ENV=production node server.js",
"export": "next export"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"express": "^4.16.4",
"next": "^7.0.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"redux": "^4.0.1",
"video-react": "^0.13.1"
}
}
确保运行：npm run build && npm run prod_start
那么你应该使用 next.js
来构建 React 运行ning 的生产版本
如果您有任何问题，请告诉我。
next build 后跟 next start 应该是为生产准备构建的正确命令，运行 它。
这是 package.json 的示例。如果您想将应用程序作为静态内容导出到 运行，例如将其作为静态网站托管在 s3 中，您需要 运行 next export
...
"scripts": {
"build": "next build",
"start": "next start",
"export": "next export"
}
...
确保您的 package.json 中包含上述脚本，然后 运行 按顺序添加以下脚本
$ npm run build
$ npm run start
如果您想使用特定端口启动应用程序，您可以指定 -p 端口作为 npm run 命令的参数
npm run start -- -p 3232
如果你想将其合并到 CI/CD 管道中，你需要 Dockerfile，这是一个简单的例子
FROM node:alpine
#copy source
COPY . /app
# Install deps
RUN cd /app && npm install
# Build
RUN npm run build
ENTRYPOINT [ "npm", "run", "start" ]
仍需要更多解释或帮助，请随时发表评论，我将非常乐意提供帮助。
我使用 Passenger/nginx 作为我的 next.js 应用程序的反向代理。
我使用 yarn run build.
构建应用程序
这是 Passenger (index.js)
的入口点
/* eslint-disable */
// An optimised entry-point for Passenger/nginx Server
const path = require('path');
const nextPath = path.join(__dirname, 'node_modules', '.bin', 'next');
// strips away all arguments until it's at `node`
process.argv.length = 1;
// redefining the arguments so it's like we are running `next start`
process.argv.push(nextPath, 'start');
// start the script/bin
require(nextPath);
有3种方法可以做到：-
方式一：使用next build代替npm run build
方式 2: npm run build npm install -g serve serve -s build
更多信息：https://create-react-app.dev/docs/deployment/
方法 3：在 npm run build 之后，从 JS 中删除 /，从 /static/index.html 文件中删除 CSS 链接。例如。替换这两行
<script defer="defer" src="/static/js/main.aa87bc08.js"></script>
<link href="/static/css/main.073c9b0a.css" rel="stylesheet"/>
加上这两行
<script defer="defer" src="static/js/main.aa87bc08.js"></script>
<link href="static/css/main.073c9b0a.css" rel="stylesheet" />
现在它甚至可以用于 file:///D:/codes/ProjectName/build/index.html
在评论中告诉我如果 none 3 种方法有效，我会找到、尝试并告诉我方法 4、5 等
我尝试在我的服务器上获得 next.js 到 运行 的生产版本，但是当我尝试
时我无法构建 next.js 生产版本npm run build
有谁知道如何让 next.js 中的产品构建正常工作 我在 next.js 文档中做了所有操作，但总是在下面出现此错误。如果我进行开发构建，它工作得很好，但尝试生产构建会导致错误。
我也 next build 多次并重新安装了所有 node_modules 包仍然有这个错误。
它总是在终端显示我
Error: Could not find a valid build in the '/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/.next' directory! Try building your app with 'next build' before starting the server.
at Server.readBuildId (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:753:15)
at new Server (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next-server.js:80:25)
at module.exports (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/next.js:6:10)
at Object.<anonymous> (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/next.config.js:6:13)
at Module._compile (internal/modules/cjs/loader.js:707:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
at Module.load (internal/modules/cjs/loader.js:605:32)
at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
at Function.Module._load (internal/modules/cjs/loader.js:536:3)
at Module.require (internal/modules/cjs/loader.js:643:17)
at require (internal/modules/cjs/helpers.js:22:18)
at loadConfig (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/server/config.js:47:28)
at _callee2$ (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/next/dist/build/index.js:52:42)
at tryCatch (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (/mnt/c/Users/NZXT_YOLO/Desktop/New folder (2)/learnnextjs-demo/node_modules/regenerator-runtime/runtime.js:114:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hello-next@1.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the hello-next@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/kk/.npm/_logs/2018-12-10T19_58_00_588Z-debug.log
server.js
const express = require("express");
const next = require("next");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});
next.config.js
const express = require("express");
const next = require("next");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("/projects/:page", (req, res) => {
const page = req.params.page;
let file = "";
switch (page) {
case "example1":
file = "/projects/example1";
break;
case "example2":
file = "/projects/example2";
break;
}
return app.render(req, res, file, { page });
});
server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});
package.json
{
"name": "hello-next",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"export": "next export"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"express": "^4.16.4",
"next": "^7.0.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"redux": "^4.0.1",
"video-react": "^0.13.1"
}
}
如果有人有想法那就太好了！我计划使用我的 AWS 服务器上的节点 运行 这个 next.js 站点。但是要做到这一点，我需要获得 react.js 的生产版本，目前我可以 运行 只是一个开发版本。
希望有人有想法。
提前致谢！
您必须在您的根文件夹而不是 .next/
next build
您的 server.js 配置似乎不正确。请尝试将所有内容从 next.config.js 移动到 server.js，确保 next.config.js 文件为空，然后创建一个新的 npm 运行 脚本：
"prod_start": "NODE_ENV=production node server.js"
您的 package.json 应该如下所示：
{
"name": "hello-next",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"dev": "node server.js",
"build": "next build",
"prod_start": "NODE_ENV=production node server.js",
"export": "next export"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"express": "^4.16.4",
"next": "^7.0.2",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"redux": "^4.0.1",
"video-react": "^0.13.1"
}
}
确保运行：npm run build && npm run prod_start
那么你应该使用 next.js
来构建 React 运行ning 的生产版本如果您有任何问题，请告诉我。
next build 后跟 next start 应该是为生产准备构建的正确命令，运行 它。
这是 package.json 的示例。如果您想将应用程序作为静态内容导出到 运行，例如将其作为静态网站托管在 s3 中，您需要 运行 next export
...
"scripts": {
"build": "next build",
"start": "next start",
"export": "next export"
}
...
确保您的 package.json 中包含上述脚本，然后 运行 按顺序添加以下脚本
$ npm run build
$ npm run start
如果您想使用特定端口启动应用程序，您可以指定 -p 端口作为 npm run 命令的参数
npm run start -- -p 3232
如果你想将其合并到 CI/CD 管道中，你需要 Dockerfile，这是一个简单的例子
FROM node:alpine
#copy source
COPY . /app
# Install deps
RUN cd /app && npm install
# Build
RUN npm run build
ENTRYPOINT [ "npm", "run", "start" ]
仍需要更多解释或帮助，请随时发表评论，我将非常乐意提供帮助。
我使用 Passenger/nginx 作为我的 next.js 应用程序的反向代理。
我使用 yarn run build.
这是 Passenger (index.js)
的入口点/* eslint-disable */
// An optimised entry-point for Passenger/nginx Server
const path = require('path');
const nextPath = path.join(__dirname, 'node_modules', '.bin', 'next');
// strips away all arguments until it's at `node`
process.argv.length = 1;
// redefining the arguments so it's like we are running `next start`
process.argv.push(nextPath, 'start');
// start the script/bin
require(nextPath);
有3种方法可以做到：-
方式一：使用next build代替npm run build
方式 2: npm run build npm install -g serve serve -s build
更多信息：https://create-react-app.dev/docs/deployment/
方法 3：在 npm run build 之后，从 JS 中删除 /，从 /static/index.html 文件中删除 CSS 链接。例如。替换这两行
<script defer="defer" src="/static/js/main.aa87bc08.js"></script>
<link href="/static/css/main.073c9b0a.css" rel="stylesheet"/>
加上这两行
<script defer="defer" src="static/js/main.aa87bc08.js"></script>
<link href="static/css/main.073c9b0a.css" rel="stylesheet" />
现在它甚至可以用于 file:///D:/codes/ProjectName/build/index.html
在评论中告诉我如果 none 3 种方法有效，我会找到、尝试并告诉我方法 4、5 等