使用 Antd 组件的 Next.js 页面不加载答案

【问题标题】：Next.js Page using Antd Components Doesn't Load使用 Antd 组件的 Next.js 页面不加载
【发布时间】：2019-10-05 23:40:48
【问题描述】：

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

以下是我用-ant-design-less 设置的代码。我怀疑代码中是否存在任何语法错误，因为我只是从 next 的官方示例站点复制的

我的完整代码link，如果你想看看

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

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

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

antd-custom.less

@primary-color: #52c41a;

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

signin.jsx

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

【问题讨论】：

链接无效，因为您使用的是私有仓库，请将其更改为公开
对不起。我已将回购更改为公开。谢谢:)
嗨。请注意我当前 repo 中的下一个文件夹正在运行。我克隆了别人的例子，它使用了 antd 并且工作正常。我之前的代码 next-x190519 跟随 nextjs github 示例仍然无法工作
我发现这个问题在他们的Github Page 上公开。当前的解决方法是将空样式表导入您的 _app.js
这个问题在这里解决了：stackoverflow.com/questions/57542802/…

标签： reactjs next.js antd

【解决方案1】：

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

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

无需额外调整。

【讨论】：