Next.js 部署

到目前为止,我们已经在开发模式下开发并运行了示例 NEXT.JS 应用程序,现在我们将使用以下步骤在本地进行生产部署。

  • npm run build − 构建生产就绪、高度优化的部署架构。
  • npm run start − 启动服务器。

与开发模式相比,生产就绪构建缺少源映射和热代码重新加载,因为这些功能主要用于调试。

构建前准备

运行以下命令来准备生产就绪构建。

$ npm run build

> nextjs@1.0.0 build /workspace/node/nextjs
> next build

info  - Loaded env from /workspace/node/nextjs/.env.local
info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (6/6)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ λ /                                      502 B          71.4 kB
├   /_app                                  0 B            70.9 kB
├ ○ /404                                   194 B          71.1 kB
├ λ /api/hello                             0 B            70.9 kB
├ λ /api/user                              0 B            70.9 kB
├ ● /posts/[id]                            2.36 kB        73.3 kB
├   ├ /posts/one
├   └ /posts/two
├ ● /posts/env                             517 B          71.4 kB
└ ● /posts/first (773 ms)                  2.44 kB        73.4 kB
+ First Load JS shared by all              70.9 kB
  ├ chunks/framework-5f4595e5518b5600.js   42 kB
  ├ chunks/main-01df828e572375b9.js        27.6 kB
  ├ chunks/pages/_app-8d652f93f4849094.js  507 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/5d2c4ba91281dd0f.css               175 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

启动 Next.js 服务器

运行以下命令启动服务器

$ npm run start

> nextjs@1.0.0 start /workspace/node/nextjs
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /workspace/node/nextjs/.env.local

在浏览器中打开 localhost:3000/api/user ,我们将看到以下输出。

Next.js 部署

查看笔记

扫码一下
查看教程更方便