NextJS：如何通过CDN添加引导程序

问题描述 投票：0回答：4

我是 nextJS 的新手，我在通过 CDN 在应用程序中使用 bootstrap 时遇到了麻烦。在应用程序中的何处添加链接是最佳实践？

next.js cdn
4个回答
11
投票

要覆盖默认文档，请创建文件 

./pages/_document.js
并扩展 Document 类，如下所示，并将 CDN 路径放在 
HEAD
标记之间。

请参阅文档了解更多信息

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

您只需将其设为闭合标签即可

6
投票

包含来自 

./next
的头并使用声明要包含在那里的任何链接。

     <Head>
         <script src="https://...."/>      
     </Head>
0
投票

最好在 Script 标签中添加第三方脚本以获得更好的性能，如docs中所述。

Next.js 脚本组件 next/script 是 HTML 的扩展

元素。它使开发人员可以设置加载优先级 第三方脚本在其应用程序中的任何位置，而无需 直接追加到 next/head，节省开发人员时间，同时改进 加载性能。
0
投票

如果你使用的是next js 13

然后转到你的layout.js，你可以像这样在RootLayout函数中添加外部cdn文件

<html lang="en">
  <head>
  <link rel="stylesheet" href="your CDN link path"></link>
  </head>
  <body >
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.