Не удается импортировать шрифты Google со стилизованными компонентами и Next.js

ProgramBox

Не удается импортировать шрифты Google со стилизованными компонентами и Next.js

Post author:admin
Запись опубликована:16 апреля, 2023
Post category:Вопросы по программированию

#css #reactjs #next.js #server-side-rendering #styled-components

#css #reactjs #next.js #рендеринг на стороне сервера #styled-components

Вопрос:

При попытке загрузить шрифты Google у меня возникает следующая проблема. Я читал, что я должен написать что-то подобное в _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;

но это код, который мне пришлось использовать, чтобы заставить стилизованные компоненты работать с 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?

Кроме того, если это поможет, это GlobalStyle, который я использую, и который не импортирует шрифты

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

const GlobalStyle = createGlobalStyle`

@import url('https://fonts.googleapis.com/css2?family=Latoamp;family=Rubikamp;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;

Ответ №1:

Перейдите на эту страницу.

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

Пожалуйста, прочитайте о пользовательских _app.js , а затем выполните следующие действия:

Во-первых, вам нужно создать пользовательский _app.js для вашего приложения. (Это должно быть в корне вашего каталога pages)

Затем вам нужно создать _app.css в том же каталоге

Затем импортируйте файл css в свой _app.js

 import "./_app.css";

Затем в ваш _app.css файл импортируйте шрифт Google следующим образом:

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

в файле css и в теге body добавьте следующую строку:

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

Ответ №2:

Я столкнулся с той же проблемой, но ответ Хумана мне не понравился, поскольку для этого требуется .css файл, содержащий только импорт шрифтов Google.

Вместо этого, вот правильный способ загрузки ваших шрифтов при использовании styled-components:

 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;500amp;display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Убедитесь, что ваш render метод не определен как static .