P11：Next.js教程-生产环境打包

本文主要带大家学一下 Next.js 在生产环境下如何进行打包和在打包过程中遇到的一些坑。

其实 Next.js 大打包时非常简单的，只要一个命令就可以打包成功。但是当你使用了Ant Desgin后，在打包的时候会遇到一些坑。

打包 ：next build

运行：next start -p 80

先把这两个命令配置到package.json文件里，比如配置成下面的样子。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start -p 80"
},

然后在终端里运行一下yarn build，如果这时候报错，其实是我们在加入Ant Design的样式时产生的，这个已经在Ant Design的 Github 上被提出了，但目前还没有被修改，你可以改完全局引入 CSS 解决问题。

在 page 目录下，新建一个_app.js文件，然后写入下面的代码。

import App from 'next/app'

import 'antd/dist/antd.css'

export default App

这样配置一下，就可以打包成功了，然后再运行yarn start来运行服务器，看一下我们的header页面，也是有样式的。说明打包已经成功了。

以上关于P11：Next.js教程-生产环境打包的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。