無法導入帶有樣式組件和 Next.js 的 Google Fonts

Question

嘗試加載 Google Fonts 時遇到以下問題。 我讀到我應該在_document.js中寫這樣的東西來將它導入到 head 標簽中

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link
            rel="preload"
            href="/fonts/noto-sans-v9-latin-regular.woff2"
            as="font"
            crossOrigin=""
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

但這是我必須用來使 Styled Components 與 Next.js 一起使用的代碼

import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

所以我的問題是：如何修改我的_document.js文件以使用 Google Fonts 的 styles？

另外，如果有任何幫助，這是我正在使用的 GlobalStyle 並且不會導入 fonts

import { createGlobalStyle } from '@xstyled/styled-components';

const GlobalStyle = createGlobalStyle`

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Rubik&display=swap');

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; 
    position: relative;
    background: grey;
}

body {
  font-family: 'Lato', sans-serif;
}
`;

const BasicLayout = ({ children }: { children: any }) => {
  return (
    <>
      <GlobalStyle />
      {children}
    </>
  );
};

export default BasicLayout;

Answer 1

前往此頁面。

https://nextjs.org/docs/advanced-features/custom-app

請閱讀自定義_app.js ，然后執行以下操作：

首先，您需要為您的應用創建一個自定義的_app.js 。 （這必須在您的頁面目錄的根目錄中）

然后需要在同一目錄下創建_app.css

然后將 css 文件導入您的_app.js

import "./_app.css";

然后在您的_app.css文件中，導入您的谷歌字體，如下所示：

@import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&display=swap");

在 css 文件和正文標記中添加以下行：

body {
  font-family: "PT Sans Narrow", sans-serif;
  etc..
}

Answer 2

我遇到了同樣的問題，但對 Hooman 的回答並不感興趣，因為這需要一個.css文件才能包含谷歌字體導入。

相反，這是在使用樣式組件時加載 fonts 的正確方法：

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
} from "next/document";
import { ServerStyleSheet } from "styled-components";

class MyDocument extends Document {
  // Load styles before rendering
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          {/* Google Fonts */}
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
          <link
            href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

確保您的render方法未定義為static 。

無法導入帶有樣式組件和 Next.js 的 Google Fonts

問題描述

2 個解決方案

解決方案1
6 2020-08-14 12:24:05

解決方案2
0 2022-07-27 07:32:45

無法導入帶有樣式組件和 Next.js 的 Google Fonts

問題描述

2 個解決方案

解決方案1 6 2020-08-14 12:24:05

解決方案2 0 2022-07-27 07:32:45

解決方案1
6 2020-08-14 12:24:05

解決方案2
0 2022-07-27 07:32:45