next.js 如何在next js中生成生成文件

wfsdck30  于 2022-11-05  发布在  其他
关注(0)|答案(7)|浏览(321)

我正在学习基本的next js。如果我们运行npm,运行build create-react-app将生成build文件夹index.html和bundle文件。在next js中,它不会创建任何build文件。我将如何在服务器中部署next js项目
.next folder

pvcm50d1

pvcm50d11#

确保您的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上。您可以将端口更改为"start": "next start -p 80",,以直接服务到端口80和443的流量,或者使用高级反向代理(如nginx)将您的应用服务到世界。我会推荐nginx,因为它具有多线程和很酷的安全功能,您可以实现。

进一步阅读:

dauxcl2d

dauxcl2d2#

要构建下一个项目,请使用npm run build&要使其正常工作,您需要将其添加到package.json文件中的脚本中-

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start -p $PORT"
  }

next build是生成项目的命令,它为您提供了包含所有生成内容的.next文件夹,实际上需要在服务器上部署这些内容,但您将部署整个项目文件夹,因为您还需要安装节点模块。

只需将整个项目发送到node js ready主机并运行

npm start
ivqmmu1c

ivqmmu1c3#

您可以使用next export

npm run build
npx next export //if next not installed globally

但它禁用了API路由,您应该使用http://example.com/about.html而不是http://example.com/about
使用next start

npm run build
npm run start -p 8080
o2gm4chl

o2gm4chl4#

我通常使用Next CLI来生成Next应用程序。它与create-react-app非常相似,但也会生成Next的结构,遵循所有最佳实践。这包括Next构建脚本:
now
顺便说一句,我个人发现Zeit托管是Next应用程序的理想平台(他们是开发Next的人)。你可以用now命令部署你的应用程序,他们处理构建等。
下面是我最近开发的一个Next应用程序的示例,我现在正在托管它:https://stage.comerbeber.mx

nbysray5

nbysray55#

有两种方法可以产生组建:1至npm

  • npm构建2到yarn(YARN是一个程序包管理器)
  • yarn build(为此,您必须将yarn添加到项目中,您可以通过编写npm i yarn来完成此操作)
  • 要启动服务器,请写yarn dev。有很多原因为您的Yarn,因为它有许多故障排除功能,它是更快的,然后npm包管理器。
ntjbwcob

ntjbwcob6#

您可以在两个不同的文件中设置构建1-如果您使用npm run build direct,它将在名为.next的文件夹中生成构建文件2-如果您希望创建一个自定义文件夹来放置构建,那么首先转到您的next.config.js并添加distDir:'build'

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

gc0ot86w7#

首先,在创建应用程序后,自定义****包.json文件作为您自己的文件,例如-

"scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next server.js"   
}

然后,使用yarn dev在服务器默认设置中运行项目,
http://localhost:3000/上的所有文件

相关问题