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

2024-01-02

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


要覆盖默认文档,请创建文件./pages/_document.js并扩展 Document 类,如下所示,并将 CDN 路径放在HEAD tag.

Refer docs https://nextjs.org/docs/advanced-features/custom-document了解更多信息

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;

你只需要把它变成一个封闭标签

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

NextJS:如何通过 CDN 添加引导程序 的相关文章

  • 使用 ts-node 在 Next.js 项目中运行单个 .ts 文件进行测试[重复]

    这个问题在这里已经有答案了 我正在尝试使用默认配置在 Next js 项目中运行单个 ES 模块 ts 文件以进行快速调试 npx ts node lib my module ts 这给了我这个错误 Warning To load an E
  • 使用 Nextjs-13 + Supabase 时无法解决“编码”模块错误

    我正在尝试使用 Supabase 从我的表单插入 收集数据 但是当我编译时 出现编码模块未找到错误 我已经尝试过缓存清理和重新安装 npm 模块 他们也没有工作 项目结构 apply page tsx 代码 use client impor
  • 使用 NextJS API 发送文件作为响应

    正如标题所示 在 NodeJs Express 中 我可以使用以下行返回一个文件作为响应 res sendFile absolute path to the file 假设我想从 NextJs 目录中的输出文件夹返回单个图像 如何使用 Ne
  • Nextjs 从父目录导入外部组件

    我有外部目录common我想将反应组件从该目录导入到web static In web static我正在使用nextjs 目前我遇到这个错误 Module not found Can t resolve react in Users ja
  • NextJS Zustand 持久状态

    我有这个 github 仓库 https github com salmanfazal01 next firebase starter https github com salmanfazal01 next firebase starter
  • 如何在cpanel上部署nextjs应用程序?

    我按照以下步骤在 cPanel 上部署 nextjs 转到 package json 并添加以下行 homepage http afsanefadaei ir run next build具有 next文件夹作为我的构建文件夹 go to
  • 运行 Jest 时 NextJS 中未定义环境变量

    我设置了一个简单的 NextJS 项目 但在让 Jest 识别我的环境变量时遇到问题 我已按照以下说明进行操作https nextjs org docs basic features environment variables test e
  • 连接 Apollo 和 mongodb

    我想将我的 Apollo 服务器与我的 mongoDB 连接 我知道那里有很多例子 但我陷入了异步部分 没有找到解决方案或示例 这很奇怪 我完全错了吗 我从 next js 的示例开始https github com zeit next j
  • 如何修复此警告“useLayoutEffect”相关警告?

    我将 NextJS 与 Material UI 和 Apollo 结合使用 虽然一切正常 但警告没有消失 在我看来 很多 Material UI 组件都在使用使用布局效果React 会发出警告 错误如下 警告 useLayoutEffect
  • ReferenceError:使用 CKEditor 时未定义 self [重复]

    这个问题在这里已经有答案了 ReferenceError 导入 CKEditor 时未定义 self 我正在使用 next js import CKEditor from ckeditor ckeditor5 react 已经安装使用 np
  • Oauth2 Google 身份验证流程 - Next.JS / Express

    我正在使用 React Next Js 前端 并尝试通过 Google 的 Oauth2 策略实现身份验证 我对这个过程感到非常困惑 目前在客户端上 我有一个 Google 登录组件 其中包含客户端 ID 并且可以检索访问令牌
  • 重新渲染次数过多。 React 限制渲染数量以防止无限循环。下一个js错误

    有人可以解决这个问题吗 如果我删除 about 和 is 之前的 它不会抛出错误 smh import Navbar from components Navbar import Footer from components Footer i
  • Cloudfront CORS 阻止字体

    除了字体之外的所有资源都加载得很好 每当我访问我的网站时 我都会收到这样的消息 访问字体 https xxxxxxxxxx cloudfront net assets fontawesome webfont woff2 https xxxx
  • 无法从静态文件夹加载图像

    如何在 Next js 的组件中加载图像 我必须先构建项目吗 如果是 有没有办法在不先构建的情况下加载图像 无论我如何尝试 我都无法让它发挥作用 来自文档 https nextjs org docs basic features stati
  • 如何在不退出的情况下更新会话值?

    With NextAuth js https github com nextauthjs next auth 如何在不注销并再次登录的情况下更新会话对象内的值 例如 一旦用户登录 我就会使用会话中存储的 URL 来显示用户的头像 我还提供用
  • 将远程和本地图像与 next/image 一起使用

    我正在尝试使用next image加载本地图像以及远程图像 我有我的本地图像public assets images以及AWS S3中的远程图像 我想在上传图像之前使用占位符图像 来自本地 然后在上传后将其替换为远程图像 我已经添加了dom
  • 如何在 getStaticPaths 内添加 params 值数组

    我有一个页面 其结构如下 read slug number 我想要得到slug每个对应的值number in the getStaticPaths这是代码 export async function getStaticPaths const
  • Python 无服务器函数 Vercel - Next.js

    我发现我可以使用 Python 在内部创建一个无服务器函数Next js https nextjs org docs getting started项目 一旦部署到Vercel https vercel com 它将被转换为无服务器函数 我
  • 窗口未定义 - Next.js 13 - 服务器组件中的客户端组件 - [重复]

    这个问题在这里已经有答案了 Leaflet 被导入到一个导入到客户端组件的文件中 那么为什么服务器运行它并抛出此错误呢 它实际上在重试后确实有效 并最终使网站正常运行 我尝试在内部使用动态导入useEffect 没有骰子 Reference
  • 设置状态时重新渲染过多 - useSWR

    我在用useSWR https swr vercel app docs data fetching获取数据 然后使用数据 我想通过使用reduce 获得总计 如果我 console log 输出该值 它工作正常 但一旦我尝试使用该值设置状态

随机推荐