使用 Antd 組件的 Next.js 頁面不會加載

Question

我正在根據 next/examples github 頁面上的官方示例使用 less 使用 antd 設置 nextjs。 單擊頁面鏈接時，我使用 antd 組件的 nextjs 頁面未加載。 其他沒有 antd 組件的頁面加載成功。

下面是我用來設置 with-ant-design-less 的代碼。 我懷疑代碼中有任何語法錯誤，因為我剛剛從 next 的官方示例站點復制

我的完整代碼鏈接，以防你想看一看

有沒有人遇到過這種行為並設法解決了它？ 謝謝

.babelrc

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

下一個.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;

登錄.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>
);

Answer 1

next.js 和 antd 協同工作的最簡單解決方案是使用以下代碼在pages文件夾中創建_app.js ：

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

無需額外調整。