How can I use Ant Design with Next.js server-side rendering?

Question

I've been trying to figure out how I can use Ant Design (antd) in my next.js application. And it seems like I just can't do that. More precisely, I can, but then I just have to render everything on the client side, because almost every Ant Design component uses things that are not allowed for server-side components. Even the most simple things like and .

Answer 1

For anybody else stumbling upon this issue, based on the official documentation of Ant Design, you need to follow a few steps, based on the version of Next.js you are using.

---

Next.js 12

Using antd-mobile in Next.js requires some additional configuration. First, you need to install the next-transpile-modules package, then modify your next.config.js.

const withTM = require('next-transpile-modules')([
  'antd-mobile',
]);

module.exports = withTM({
  // other Next.js configuration in your project
});

Next.js 13

Next.js 13 can automatically transpile and bundle dependencies from external dependencies (node_modules). This replaces the next-transpile-modules package. Simply add this code to your next.config.js.

module.exports = {
  transpilePackages: ['antd-mobile'],
  // other Next.js configuration in your project
};

---

When using Next.js 13 you are required to add the 'use client' directive at the top of the file when using ant-d components inside it. Since client components can still receive server components as children, you're not completely dependent on client side rendering.