Next.js: How to Next.js and Antd integration ？

[chen9001]

I'm trying to configure

https://github.com/VanquisherMe/with-nextjs-antd-app/blob/master/next.config.js#L28

I need to load it on demand ，‘less’ mode

https://github.com/VanquisherMe/with-nextjs-antd-app/blob/master/.babelrc#L9

I tried many times but I didn't get it right

I have ever seen

https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less

But this is not for the project
I need an example

[afc163]

https://github.com/zeit/next.js/issues/484

[chen9001]

@afc163
https://github.com/VanquisherMe/with-nextjs-antd-app/blob/master/next.config.js#L18
nextjs + antd ，open cssModules ，The class of antd is converted

Problems in this
You can give it a try
https://github.com/VanquisherMe/with-nextjs-antd-app

[chen9001]

@afc163
I'm looking forward to the

1 can use less and customize topics

2 Antd loads less on demand

3 enable CSS module, antd class is not converted

I tried it many times, no results, and I needed an example
You can try this example and open CSS module
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less
this is not for the project

[sdli]

@VanquisherMe May be you need this：https://www.yuque.com/steven-kkr5g/aza/ig3x9w

[jaggerwang]

@sdli It changes config too much!

I already successfully customized theme as the following simple way:

next.config.js

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const withLess = require('@zeit/next-less')

const isProd = process.env.NODE_ENV === 'production'

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => { }
}

module.exports = withLess(withSass(withCSS({
  lessLoaderOptions: {
    javascriptEnabled: true
  }
})))

css/antd.less

@import "~antd/dist/antd.less";

@primary-color: #C02428;

pages/_app.js

import React from 'react'
import App from 'next/app'
import { Provider } from 'react-redux'

import withReduxStore from '../lib/with-redux-store'

import '../css/antd.less'

class WgApp extends App {
  render() {
    const { Component, pageProps, store } = this.props

    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    )
  }
}

export default withReduxStore(WgApp)

But I found the code size of page is very big (6.1 MB).

So it's very needed to load antd component on demand. I tried to transplant the official way in nextjs, but not succeed.

[sdli]

@jaggerwang See update for less-loader tools, and I have made a npm package to reduce the redundancy。https://www.yuque.com/steven-kkr5g/aza/ig3x9w

[koolamusic]

Anybody know how to fix this error ?

I have followed the guides to integrate less

[stephankaag]

@koolamusic See https://github.com/zeit/next.js/issues/6181

[koolamusic]

@stephankaag I have fixed my issues, come of my bottleneck came from fact that I was implementing a custom server together with next-routes, this affected the manner in which the less modules were loaded

[transitive-bullshit]

@koolamusic is your solution open source? I'm running into this as well.

[koolamusic]

Lemme send a repo

[transitive-bullshit]

Thanks @koolamusic! Really stuck on what seems like it should be a pretty simple issue. But then again, they always seem simple... 😄

[koolamusic]

@timneutkens I could add an example with antd using a custom express server and next routes, right ?

[MerabikoG]

@jaggerwang thx

[lyzhovnik]

Hi, my config for css-modules, typescript and antd design, tried to make the best..

const withTypescript = require("@zeit/next-typescript");
const withCss = require("@zeit/next-css");
const withSass = require('@zeit/next-sass')
const withLess = require('@zeit/next-less')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports =
  withTypescript(
    withCss(
      withSass({
        cssModules: true,
        ...withLess({
          dir: "src",
          distDir: "../build",
          cssLoaderOptions: {
            importLoaders: 1,
            localIdentName: "[folder]_[local]___[hash:base64:5]",
          },
          lessLoaderOptions: {
            javascriptEnabled: true
          },
          webpack(config, options) {
            if (options.isServer) {
              config.plugins.push(new ForkTsCheckerWebpackPlugin({
                tsconfig: '../tsconfig.json',
              }))

              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;
          }
        })
      })
    )
  );

[Godsenal]

@lyzhovnik
Hi! this config works like a charm!
If you don't mind, Could you explain what this config does..?

              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),
              ]

[Timer]

Duplicate of #9830

[goalbased]

Hi, my config for css-modules, typescript and antd design, tried to make the best..

const withTypescript = require("@zeit/next-typescript");
const withCss = require("@zeit/next-css");
const withSass = require('@zeit/next-sass')
const withLess = require('@zeit/next-less')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports =
  withTypescript(
    withCss(
      withSass({
        cssModules: true,
        ...withLess({
          dir: "src",
          distDir: "../build",
          cssLoaderOptions: {
            importLoaders: 1,
            localIdentName: "[folder]_[local]___[hash:base64:5]",
          },
          lessLoaderOptions: {
            javascriptEnabled: true
          },
          webpack(config, options) {
            if (options.isServer) {
              config.plugins.push(new ForkTsCheckerWebpackPlugin({
                tsconfig: '../tsconfig.json',
              }))

              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;
          }
        })
      })
    )
  );

want to know what does this part means

config.module.rules.unshift({
                test: antStyles,
                use: 'null-loader',
              })

[koolamusic]

PS: You may get an error when building with mini-css-extract-plugin about conflicting errors between styles.

I am able to bypass this error by lazy loading antd components within my application, An example in NextJS would be to load in this manner

const Menu = dynamic(() => import('antd/lib/menu'))
const MenuItem = dynamic(() => import('antd/lib/menu/MenuItem'))

Here I can use the Menu and Menu Item from antd in place or the import {Menu} from 'antd' syntax where MenuItem is Menu.Item

So far no issues with Conflicting order between styles"
This applies if you are using less and the babel-import-plugin