如何在next js中生成构建文件

Question

我正在学习基本的下一个js。如果我们运行 npm run build create-react-app 将生成构建文件夹 index.html 和捆绑文件。在接下来的js中。它不会创建任何构建文件。我将如何在服务器中部署下一个 js 项目

.next 文件夹

Answer 1

确保您的 package.json 文件脚本如下所示：

"scripts": { 
    "dev": "next",         // development
    "build": "next build", // build nextapp to .next folder
    "start": "next start", // start nextjs server for .next build folder
    "prod": "next export"  // export nextjs files as bundle like in react app
}

Nodejs 需要先在 .env 中设置为 production 或按如下方式使用它。

npm run build                     # to build the nextjs in .nextfolder
NODE_ENV=production npm run start # set NODE_ENV to production and start server 

但是，这将在默认端口 3000 上。您可以更改端口以将流量直接传输到端口 80 和 443，"start": "next start -p 80",或者使用像 nginx 这样的高级反向代理将您的应用程序提供给全世界。我会推荐 nginx，因为它是多线程的，并且具有您可以实现的很酷的安全功能。

进一步阅读：

• 当前部署文档
• 以前的部署文档

Answer 2

有两个不同的文件可以设置您的构建 1-如果您npm run build直接使用，它将在名为 .next 的文件夹中生成构建文件 2-如果您想创建一个自定义文件夹来放入构建，所以首先转到你的 next.config.js 并添加 distDir:'build'

module.exports = {
distDir: 'build',
}

Answer 3

我通常使用 Next CLI 来生成 Next 应用程序。它与 create-react-app 非常相似，但也遵循所有最佳实践生成 Next 的结构。这包括下一个构建脚本：

npm run build

顺便说一句，我个人发现 Zeit 托管是 Next 应用程序的理想平台（他们是开发 Next 的人）。您可以使用命令按原样部署应用程序now，它们会处理构建等。

以下是我最近构建的 Next 应用程序的示例，我现在正在托管该应用程序： https: //stage.comerbeber.mx