<p dir="auto">I have a bunch of pages with antd components and others without. In production, when I initially load (by clicking on a Link) a page with antd components it takes forever to load. If I type the URL directly in the address bar, then the page with antd components loads fine. Every second or third time I click on the Link the navigation works correctly. The only issue I am having is when I click on a Link the first time. FWIW, the size of the pages that contain antd components is 647 kB. I do not knows if this is because of server resources or because of a bug in Next.js. I also know that this happens in production as well as development. I also had to do a workaround to get antd styles working, as shown in the following code snippets.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="next.config.js

/* eslint-disable */
const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './assets/style.less'), 'utf8')
)

module.exports = withLess({
  compress: false,
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
  webpack: (config, { isServer }) =&gt; {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) =&gt; {
          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
  },
})"><pre class="notranslate"><code class="notranslate">next.config.js

/* eslint-disable */
const withLess = require('@zeit/next-less')
const lessToJS = require('less-vars-to-js')
const fs = require('fs')
const path = require('path')

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './assets/style.less'), 'utf8')
)

module.exports = withLess({
  compress: false,
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables, // make your antd custom effective
  },
  webpack: (config, { isServer }) =&gt; {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) =&gt; {
          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
  },
})
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".babelrc

{
  &quot;presets&quot;: [&quot;next/babel&quot;],
  &quot;plugins&quot;: [
    [
      &quot;import&quot;, {
        &quot;libraryName&quot;: &quot;antd&quot;,
        &quot;style&quot;: true
      }
    ]
  ]
}"><pre class="notranslate"><code class="notranslate">.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import", {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Next.js version: 9.0.8
antd version: 3.24.3
@zeit/next-less version: 1.0.1"><pre class="notranslate"><code class="notranslate">Next.js version: 9.0.8
antd version: 3.24.3
@zeit/next-less version: 1.0.1
</code></pre></div>
<p dir="auto">This is bug report</p>
<p dir="auto">Link does not work with css-module imported. That happens when page with Link has no css, and linked page has. No errors in console, so im not sure about reasons, but there is minimal repo to reproduce:<br>
<a href="https://github.com/standy/next-css-error">https://github.com/standy/next-css-error</a></p>
<p dir="auto">Bug appears in <code class="notranslate">next@7.0.0</code> + <code class="notranslate">next-css@1.0.1</code>,<br>
Older <code class="notranslate">next@6.1.2</code> + <code class="notranslate">next-css@0.2.0</code> works fine</p>