Reactjs 使用Antd组件的Next.js页面不会加载

根据next/examples/github页面上的官方示例，我正在使用更少的antd设置nextjs。单击指向页面的链接时，使用antd组件的我的nextjs页面不会加载。没有antd组件的其他页面已成功加载

下面是我使用ant design less设置的代码。我怀疑代码中是否有语法错误，因为我只是从next的官方示例网站复制的

我的完整代码，以防你想看一下

有人遇到过这种行为并设法解决了吗？谢谢

B.法律改革委员会

next.config.js

antd-custom.less

signin.jsx

---

next.js和antd协同工作的最简单解决方案是使用以下代码创建_app.js on pages文件夹：

import 'antd/dist/antd.css';
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

---

不需要额外调整

链接不起作用，因为您正在使用私人回购，请将其更改为Public抱歉。我已将回购协议改为公开。谢谢：嗨。请注意，我当前回购中的下一个文件夹正在工作。我克隆了其他人的例子，它使用antd，并且工作正常。我之前的代码next-x190519，在nextjs github示例之后仍然无法工作，我发现这个问题在他们的网站上是公开的。当前的解决方法是将空样式表导入到_app.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/antd-custom.less"), "utf8")
);

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

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables // make your antd custom effective
  }
});

@primary-color: #52c41a;

@layout-header-height: 40px;
@border-radius-base: 2px;

import {
  Form,
  Select,
  InputNumber,
  DatePicker,
  Switch,
  Slider,
  Button
} from "antd";

const FormItem = Form.Item;
const Option = Select.Option;

export default () => (
  <div style={{ marginTop: 100 }}>
    <Form layout="horizontal">
      <FormItem
        label="Input Number"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 8 }}
      >
        <InputNumber
          size="large"
          min={1}
          max={10}
          style={{ width: 100 }}
          defaultValue={3}
          name="inputNumber"
        />
        <a href="#">Link</a>
      </FormItem>

      <FormItem label="Switch" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
        <Switch defaultChecked name="switch" />
      </FormItem>

      <FormItem label="Slider" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
        <Slider defaultValue={70} />
      </FormItem>

      <FormItem label="Select" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }}>
        <Select
          size="large"
          defaultValue="lucy"
          style={{ width: 192 }}
          name="select"
        >
          <Option value="jack">jack</Option>
          <Option value="lucy">lucy</Option>
          <Option value="disabled" disabled>
            disabled
          </Option>
          <Option value="yiminghe">yiminghe</Option>
        </Select>
      </FormItem>

      <FormItem
        label="DatePicker"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 8 }}
      >
        <DatePicker name="startDate" />
      </FormItem>
      <FormItem style={{ marginTop: 48 }} wrapperCol={{ span: 8, offset: 8 }}>
        <Button size="large" type="primary" htmlType="submit">
          OK
        </Button>
        <Button size="large" style={{ marginLeft: 8 }}>
          Cancel
        </Button>
      </FormItem>
    </Form>
  </div>
);

import 'antd/dist/antd.css';
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}