title: Next.js Page using Antd Components Doesn't Load
body: <p>I am setting up nextjs with antd using less based on the official example at next/examples github page. My nextjs page using antd component doesn't load when click on the link to the page. Those other pages without antd component loads up successfully.</p>
  
  <p>Below are the codes which I used to setup with-ant-design-less. I doubt there is any syntax error in the codes cause I just copied from next's official examples site</p>
  
  <p>my full code <a href="https://github.com/myhendry/lab-mongo/tree/master/next" rel="nofollow noreferrer">link</a> in case you like to take a look</p>
  
  <p>Anyone encountered such behavior and has managed to resolve it? Thanks</p>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
    "presets": ["next/babel"],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true
        }
      ]
    ]
  }
  </code></pre>
  
  <p><strong>next.config.js</strong></p>
  
  <pre><code>/* 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/antd-custom.less"), "utf8")
  );
  
  // fix: prevents error when .less files are required by node
  if (typeof require !== "undefined") {
    require.extensions[".less"] = file =&gt; {};
  }
  
  module.exports = withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables // make your antd custom effective
    }
  });
  </code></pre>
  
  <p><strong>antd-custom.less</strong></p>
  
  <pre><code>@primary-color: #52c41a;
  
  @layout-header-height: 40px;
  @border-radius-base: 2px;
  </code></pre>
  
  <p><strong>signin.jsx</strong></p>
  
  <pre><code>import {
    Form,
    Select,
    InputNumber,
    DatePicker,
    Switch,
    Slider,
    Button
  } from "antd";
  
  const FormItem = Form.Item;
  const Option = Select.Option;
  
  export default () =&gt; (
    &lt;div style={{ marginTop: 100 }}&gt;
      &lt;Form layout="horizontal"&gt;
        &lt;FormItem
          label="Input Number"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 8 }}
        &gt;
          &lt;InputNumber
            size="large"
            min={1}
            max={10}
            style={{ width: 100 }}
            defaultValue={3}
            name="inputNumber"
          /&gt;
          &lt;a href="#"&gt;Link&lt;/a&gt;
        &lt;/FormItem&gt;
  
        &lt;FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}&gt;
          &lt;Switch defaultChecked name="switch" /&gt;
        &lt;/FormItem&gt;
  
        &lt;FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}&gt;
          &lt;Slider defaultValue={70} /&gt;
        &lt;/FormItem&gt;
  
        &lt;FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}&gt;
          &lt;Select
            size="large"
            defaultValue="lucy"
            style={{ width: 192 }}
            name="select"
          &gt;
            &lt;Option value="jack"&gt;jack&lt;/Option&gt;
            &lt;Option value="lucy"&gt;lucy&lt;/Option&gt;
            &lt;Option value="disabled" disabled&gt;
              disabled
            &lt;/Option&gt;
            &lt;Option value="yiminghe"&gt;yiminghe&lt;/Option&gt;
          &lt;/Select&gt;
        &lt;/FormItem&gt;
  
        &lt;FormItem
          label="DatePicker"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 8 }}
        &gt;
          &lt;DatePicker name="startDate" /&gt;
        &lt;/FormItem&gt;
        &lt;FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}&gt;
          &lt;Button size="large" type="primary" htmlType="submit"&gt;
            OK
          &lt;/Button&gt;
          &lt;Button size="large" style={{ marginLeft: 8 }}&gt;
            Cancel
          &lt;/Button&gt;
        &lt;/FormItem&gt;
      &lt;/Form&gt;
    &lt;/div&gt;
  );
  </code></pre>