已解決430363個問題，去搜搜看，總會有你想問的

如何在服務器端渲染中正確使用帶有 ant 設計庫的 next js？

首頁猿問如何在服務器端渲染中正確使用帶有...

如何在服務器端渲染中正確使用帶有 ant 設計庫的 next js？

JavaScript

胡說叔叔 2023-03-24 16:48:55

我用 ant design 鏈接克隆了官方的 next js 示例：https://github.com/vercel/next.js/tree/canary/examples/with-ant-design然后我做了 npm install 來安裝所有依賴項。然后我執行了 npm run dev 以查看一切正常。然后我執行 npm run build 來構建下一個 js 應用程序，然后我運行 npm run start 以在 localhost 中運行構建的應用程序。問題是當我轉到網絡選項卡并選擇本地主機頁面，然后從預覽選項卡預覽它時，ant 設計實際上并未應用服務器端呈現，我根本看不到任何樣式。應用 ant design css 需要半秒，這不是我想要的。如何正確使用 ant design 和下一個 js 服務器端渲染？

查看完整描述

1 回答

皈依舞

TA貢獻1851條經驗獲得超3個贊

您可能正在尋找的是內聯 CSS，以便瀏覽器更快地應用它們，而無需首先將 CSS 資源作為單獨的請求獲取。

有一個關于官方支持的問題，但還沒有答案：https://github.com/vercel/next-plugins/issues/364

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

要實現內聯CSS，_document.js在pages文件夾中添加一個名為的文件，內容如下：

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>

<body>

</body>

</html>

);

}

反對回復 2023-03-24

1 回答
0 關注
114 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在服務器端渲染中正確使用帶有 ant 設計庫的 next js？

如何在服務器端渲染中正確使用帶有 ant 設計庫的 next js？

1 回答

添加回答

如何在服務器端渲染中正確使用帶有 ant 設計庫的 next js？

如何在服務器端渲染中正確使用帶有 ant 設計庫的 next js？