Next.js 中如何引入第三方 CSS 库-JavaScript中文网-JavaScript教程资源分享门户

在 Next.js 中，我们经常需要使用第三方 CSS 库来美化页面。但是，由于 Next.js 本身的架构特点，我们需要一些特殊的方式来引入第三方 CSS 库。在本文中，我们将介绍如何在 Next.js 中引入第三方 CSS 库。

为什么需要特别的方式来引入第三方 CSS 库

在传统的前端开发中，我们可以直接在 HTML 中引入第三方 CSS 库，如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">

但是，如果我们在 Next.js 中这样引入 CSS 库，会遇到一些问题：

在客户端渲染（CSR）中，由于 Next.js 使用了服务端渲染（SSR），我们需要等待页面的 React 组件在服务端渲染完成后再进行客户端渲染。在这个过程中，可能会导致样式闪烁问题。
在服务端渲染（SSR）中，如果我们直接在 HTML 中引入第三方 CSS 库，会导致服务端渲染失败，因为 CSS 库需要在客户端才能起作用。

因此，我们需要一些特殊的方式来引入第三方 CSS 库，以兼容 Next.js 的架构特点。

如何引入第三方 CSS 库

在 Next.js 中，我们可以使用 next/head 组件来引入第三方 CSS 库。next/head 组件可以在服务端渲染时添加 <head> 元素，而不会在客户端重复添加。

我们可以先在 /pages/_document.js 中定义一个文档组件：

// javascriptcn.com 代码示例
import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

该组件会在服务端渲染时添加 bootstrap.min.css 样式表到 <head> 元素中。然后在我们的页面中使用 next/head 组件来添加其他样式：

// javascriptcn.com 代码示例
import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Home Page</title>
        <link rel="stylesheet" href="/styles.css" />
      </Head>
      <h1>Welcome to my Next.js app!</h1>
      <p>Here's some stylized text.</p>
    </div>
  );
}

如上所示，我们在页面中使用 next/head 组件来添加 <title> 和自定义样式 /styles.css。在服务端渲染时，bootstrap.min.css 和 /styles.css 样式表都会被添加到 <head> 元素中。

总结

在 Next.js 中引入第三方 CSS 库需要遵循一些特殊的方式，以兼容 Next.js 的架构特点。我们可以在 /pages/_document.js 中定义文档组件，然后在页面中使用 next/head 组件来添加其他样式。这样可以避免客户端渲染过程中的样式闪烁问题，以及服务端渲染时 CSS 库导致渲染失败的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f938d7d4982a6eb9238a8