Next JS with Ant Design

Creating another boilerplate for the UI library

i Hate Reading

Under the Hood

So far, I’ve covered multiple stories for all UI libraries available with React. We have covered in-depth stories for integrating the stories with Next JS and so on. In today’s story, we will cover another UI library with Next JS or let say React called Ant Design.
Ant Design is still the most popular UI library with React. Many developers prefer them over Material UI or React Bootstrap or Chakra UI. I’ve already covered getting started with Material UI and Chakra UI and Bootstrap whose link you can find at the end of articles.

Getting Started

As usual, I will define the steps we will be doing to get started with Ant Design in Next JS.

• Add ant design package yarn add antd
• Add other ant design dependencies for next js like zeit/css, ziet/less and so on.
• Add and design global less style files
• Import and pass global styles to the root of the application to render CSS on the server-side.

That’s it, really in 4 steps, we are ready to use ant design in our next js project.

Adding antd and dependencies