Create a project

Start by creating the project with NPX create-next-app

Second, go to github official website demo

Github.com/vercel/next…

There is an example of with-ant-design-less in the demo. Copy the contents of this example into the project you are creating.

Some people may ask this is not redundant, I directly copy the content of the demo sample NPM install is not on the line. Why do you have to create it yourself?

The reason is that there may be an error when running NPM run dev because of the version. Running NPX create-next-app will install the latest create-next-app globally, and then install the corresponding dependencies in the project so that the versions match. I was tested to run. An error was reported running directly in demo. I followed the above method to create, copy, and then NPM install ran.

3. If you need to reference the CSS file again

Install @zeit/ next-CSS

Changes to the 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')

// Configure environment variables
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, cannot be set, antD style does not work, do not write CSS module, import styles from '.. /styles/Home.module.less'; ClassName ={styles.container}, only global reference 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
}))

Copy the code

Note: cssModules: true cannot be set to antD style. Import styles from ‘.. /styles/Home.module.less’; ClassName ={styles.container}, only global reference import ‘.. /styles/Home.module.less’

4. Environmental variables

Need to be modified in 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"
  },
Copy the code

For the example of environment-variables provided by the official, I want to package and send the test environment, adding.env.test. Cross -env NODE_ENV=test next build (NPM run start