Next.js + Ant Design with less – Advanced Nextjs and Ant design scaffolding

Foreword

After the last introduction, I feel that I still have a lot of feelings. I always feel that this scaffolding is still not perfect, and there are places that can be improved. Therefore, in order to be convenient with people, it is convenient to continue to write a few articles~?, but since the previous one is called the entry series. This is called advanced ~

Check out these tutorials about Next.js

Convert HTML template into NextJs app

Create custom self-api Next.js api server

NextJs + KoaJs Create custom NextJs server with KoaJs

[Tutorial] Create react based server side rendering app with NextJS

NextJs Data fetching – Combine Server Side and Client Side fetching

Cloudreports – Next.js tutorials

Next.js Beginner’s Guide Series Address

Next.js scaffolding advanced series

• Perfect fit ant-design
• Encapsulate fetch & add middleware
• Deployment online

Some problems with ant-design

Because the Next.js version is constantly being updated, especially after upgrading to 7, many plug-ins are upgraded, so if you are using a version below Next.js7, you should be cautious about the upgrade. Because the official said that 7 speed is much faster, with the principle of puncturing my priority, I started the road of upgrading, and even the most problems encountered are the problems with ant-design. The main problems appear in three aspects. :

Various plugins upgrades

// Next.js 6 version
"dependencies": {
  "@zeit/next-less": "^0.3.0",
  "babel-plugin-import": "^1.8.0",
  ...
},
"devDependencies": {
  "babel-plugin-transform-decorators-legacy": "^1.3.5",
  ...
}

// Next.js 7 version
"dependencies": {
  "@zeit/next-less": "^1.0.1",
  "babel-plugin-import": "^1.9.0",
  ...
},
"devDependencies": {
  "@babel/plugin-proposal-decorators": "^7.1.0",
  ...
}

The first is that the core file of next-less needs to be upgraded, and then the plugin for babel and ant is switched. Specifically can be seen in the code.

Directory structure changes lead to static CSS file import path problem

First of all, the previous use of Next.js 6, all css files will be packaged into style.css storage path is /.next/static/style.css. After Next.js 7, it should be webpack optimized CSS compilation. After compiling, the folder structure is as follows:

It can be seen that not only the structure has changed, but also the name has changed. It should be the built-in webpack for optimization of css. In short, now, with the v6 version of the code, our browser will report a mistake, as shown below:

Solution: Remove the link tag of the Head header of _app.js and change it to the import style file at the top of _app.js.

The problem of ant-design’s custom file being overwritten after packagingimport ‘../asserts/styles.less’;

Finally, the most headaches, after the above changes, you will find in the development environment, OK, the upgrade is successful, but you try to package it, after packaging, your custom-css style will be ant-design original style The coverage, that is, your custom-css file does not take effect.

【Solution】:

If you accept the ant-design style, use the properties of its own framework, it is completely OK, nothing to do.

1. Change the package of ant-design by yourself.
2. The previous article happened to be someone to leave a message for me. I used to know ignorance, maybe the second is the best solution, but until I found the most perfect solution below.
3. The third one above is also used by me now. I have not found any problems at present. You can use it with confidence~

// next.config.js
...
// Where your antd-custom.less file lives
  const themeVariables = lessToJS(
    fs.readFileSync(
      path.resolve(__dirname, './asserts/antd-custom.less'),
      'utf8',
    ),
  );
...
withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // Add modifyVars property
      localIdentName: '[local]___[hash:base64:5]',
    },
  ...
})

In addition to the official Demo I also helped with a simple update, and now the create-next-app

with-ant-design-less Demo is the version of my pr. to sum up

Another water, this series I want to step by step from the scaffolding step by step to improve so that everyone is more convenient to use, increase scalability.

Therefore, each article is only for one live two points, not a long story. Scaffolding Address: Next-Antd-Scaffold

like to give a Star, thank you very much~