如何在服务器端渲染中正确使用带有 ant 设计库的 next js？

Question

我用 ant design link 克隆了官方的 next js 示例：https://github.com/vercel/next.js/tree/canary/examples/with-ant-design

然后我执行了 npm install 来安装所有依赖项。然后我做了 npm 运行 dev 以查看一切正常。然后我做了 npm 运行 build 来构建下一个 js 应用程序，然后我运行 npm 运行 start 到运行在 localhost 中构建的应用程序。

问题是当我转到网络选项卡和 select 本地主机页面，然后从预览选项卡预览它时，ant 设计实际上并未应用服务器端呈现，我根本看不到任何样式。 ant design css 应用需要半秒，这不是我想要的。

如何正确使用 ant design 和下一个 js 服务器端渲染？

Answer 1

您可能正在寻找内联 CSS，以便浏览器更快地应用它们，而无需先将 CSS 资源作为单独的请求获取。

有关于官方支持的问题，但还没有答案：https://github.com/vercel/next-plugins/issues/364

但是，有一个解决方法，可以在 https://github.com/vercel/next-plugins/issues/238 中找到，我试过了并且有效。

要实现内联 CSS，请在 pages 文件夹中添加一个名为 _document.js 的文件，内容如下：

import Document, { Head, Main, NextScript } from 'next/document';
import fs from 'fs';
import path from 'path';

class CustomNextHead extends Head {
  // TODO: This might not be needed if Next.js implements built-in support
  // https://github.com/zeit/next-plugins/issues/364
  getCssLinks({ allFiles }) {
    return allFiles
      .filter((file) => file.endsWith('.css'))
      .map((file) => (
        <style
          key={file}
          nonce={this.props.nonce}
          dangerouslySetInnerHTML={{
            __html: fs.readFileSync(path.join('.next', file), 'utf-8'),
          }}
        />
      ));
  }
}

export default class MyDocument extends Document {
  render() {
    return (
      <html lang="en">
        <CustomNextHead />
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

如何在服务器端渲染中正确使用带有 ant 设计库的 next js？

How can I use next js with ant design library properly with server side rendering?

javascript

next.js

ant-design-pro