一、创建项目
先用npx create-next-app创建项目
二、去github官网下demo
demo里有一个examples里有一个with-ant-design-less的例子，把它里面的东西拷贝到创建的项目里。
有人可能问这不是多此一举吗，我直接把demo的例子里的内容拷贝出来npm install不就行了。为什么自己还要去创建一下。
原因是有可能因为版本的原因导致运行npm run dev 的时候报错。运行npx create-next-app 会先全局装最新的create-next-app,再在项目里装对应的依赖，这样版本就能对上。本人是经过测试才跑起来的。直接在demo里运行报错了。我按照上面的方法先创建，再拷贝，再npm install就跑起来了。
三、如果需要再引用css文件
需要安装 @zeit/next-css
更改next.config.js
/* eslint-disable */
const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const withCss = require("@zeit/next-css")
const fs = require('fs')
const path = require('path')
//配置环境变量
const NODE_ENV = process.env.NODE_ENV;
let domain = '';
if (NODE_ENV == 'production') {
domain = "prd.com.cn";
} else if (NODE_ENV == 'test') {
domain = ".test.com.cn";
} else {
domain = ".dev.com.cn";
}
const env = {
domain: domain,
mshop: '//crp' + domain + '/mshop',
}
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, './styles/antd-custom.less'), 'utf8')
)
module.exports = withCss(withLess({
// cssModules: true,不能设置，设置了antd样式不起作用，不写css module 失效，也就是这样的写法用不了 import styles from '../styles/Home.module.less';className={styles.container}，只能全局引用import '../styles/Home.module.less'
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
},
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/
const origExternals = [...config.externals]
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback()
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback)
} else {
callback()
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
]
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
})
}
return config
},
env
}))
注： cssModules: true,不能设置，设置了antd样式不起作用，不写css module 失效，也就是这样的写法用不了 import styles from '../styles/Home.module.less';className={styles.container}，只能全局引用import '../styles/Home.module.less'
四、环境变量
需要再package.json的scripts里修改
"scripts": {
"dev": "cross-env NODE_ENV=development next dev --port 80",
"build": "cross-env NODE_ENV=production next build",
"start": "next start --port 80",
"uat": "cross-env NODE_ENV=test next build"
},
官方提供的例子environment-variables，我想打包发测试环境，增加一个.env.test。运行的命令改成 cross-env NODE_ENV=test next build打包后可以成功，但是运行npm run start时死循环
