第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何在服務(wù)器端渲染中正確使用帶有 ant 設(shè)計(jì)庫(kù)的 next js？

如何在服務(wù)器端渲染中正確使用帶有 ant 設(shè)計(jì)庫(kù)的 next js？

胡說(shuō)叔叔 2023-03-24 16:48:55
我用 ant design 鏈接克隆了官方的 next js 示例：https://github.com/vercel/next.js/tree/canary/examples/with-ant-design然后我做了 npm install 來(lái)安裝所有依賴(lài)項(xiàng)。然后我執(zhí)行了 npm run dev 以查看一切正常。然后我執(zhí)行 npm run build 來(lái)構(gòu)建下一個(gè) js 應(yīng)用程序，然后我運(yùn)行 npm run start 以在 localhost 中運(yùn)行構(gòu)建的應(yīng)用程序。問(wèn)題是當(dāng)我轉(zhuǎn)到網(wǎng)絡(luò)選項(xiàng)卡并選擇本地主機(jī)頁(yè)面，然后從預(yù)覽選項(xiàng)卡預(yù)覽它時(shí)，ant 設(shè)計(jì)實(shí)際上并未應(yīng)用服務(wù)器端呈現(xiàn)，我根本看不到任何樣式。應(yīng)用 ant design css 需要半秒，這不是我想要的。如何正確使用 ant design 和下一個(gè) js 服務(wù)器端渲染？
查看完整描述

1 回答

?
皈依舞

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個(gè)贊

您可能正在尋找的是內(nèi)聯(lián) CSS，以便瀏覽器更快地應(yīng)用它們，而無(wú)需首先將 CSS 資源作為單獨(dú)的請(qǐng)求獲取。

有一個(gè)關(guān)于官方支持的問(wèn)題，但還沒(méi)有答案：https://github.com/vercel/next-plugins/issues/364

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

要實(shí)現(xiàn)內(nèi)聯(lián)CSS，_document.js在pages文件夾中添加一個(gè)名為的文件，內(nèi)容如下：

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>

        <CustomNextHead />

        <body>

          <Main />

          <NextScript />

        </body>

      </html>

    );

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-03-24
  • 1 回答
  • 0 關(guān)注
  • 120 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)