必须调用字体加载器并将其分配给 Nextjs13 模块范围内的 const

Question

我正在尝试将 google 字体加载到 Nextjs 项目，但出现以下错误。在 nextjs12 中它工作正常，但我必须使用头部字体的链接。使用@next/font/local 也会发生此错误。

我一直在努力解决这个问题，非常感谢任何帮助。

我正在使用官方文档流程来添加全局字体。我正在使用 Nextjs13。

我的 _app.tsx 代码是：

import { useApollo } from "@api/apollo/apolloclient";
import { ApolloProvider } from "@apollo/client";
import { CacheProvider, EmotionCache } from "@emotion/react";
import { Ubuntu } from "@next/font/google";

import "focus-visible/dist/focus-visible";

import { DefaultSeo } from "next-seo";
import { AppProps } from "next/app";

import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";

import theme from "@definitions/chakra/theme";
import { ThemeColorProvider } from "@definitions/context/theme";
import createEmotionCache from "@definitions/utils/createEmotionCache";

import Layout from "@layouts/default";

import "@styles/app.css";
import "@styles/global.scss";

import SEO from "../../next-seo.config";
import { useEffect, useState } from "react";

type ComponentWithPageLayout = AppProps & {
  Component: AppProps["Component"] & {
    PageLayout?: React.ComponentType;
  };
  emotionCache: EmotionCache;
};

const clientSideEmotionCache = createEmotionCache();

function sApp({
  Component,
  emotionCache = clientSideEmotionCache,
  pageProps,
}: ComponentWithPageLayout): JSX.Element {
  const apolloClient = useApollo(pageProps);
  const AnyComponent = Component as any;
  const Layoutio = Component.PageLayout as any;

  const ubt = Ubuntu({
    weight: ["300", "400", "500", "700"],
    style: ["normal", "italic"],
  });

  const [showChild, setShowChild] = useState(false);
  useEffect(() => {
    setShowChild(true);
  }, []);

  if (!showChild) {
    return null;
  }

  if (typeof window === "undefined") {
    return <></>;
  } else {
    return (
      <>

      <style jsx global>{`
          html {
            font-family: ${ubt.style.fontFamily};
          }
        `}</style>

        <CacheProvider value={emotionCache}>
          <ApolloProvider client={apolloClient}>
            <ThemeColorProvider>
              <ChakraProvider theme={theme}>
                <ColorModeScript
                  initialColorMode={theme.config.initialColorMode}
                />
                <DefaultSeo {...SEO} /> 
                {Component.PageLayout ? (
                  <Layoutio>
                    <AnyComponent {...pageProps} />
                  </Layoutio>
                ) : (
                  <Layout>
                    <AnyComponent {...pageProps} />
                  </Layout>
                )}
              </ChakraProvider>
            </ThemeColorProvider>
          </ApolloProvider>
        </CacheProvider>
      </>
    );
  }
}

export default App;

Answer 1

只需将 ubt 常量移至 sApp 函数上方即可:)

Answer 2

在 _app.tsx 下，有效的最少代码如下所示。我正在使用查克拉。缺点是这是实验性的，在某些设备上有效，但在 Safari 等设备上失败。

import { useApollo } from "@api/apollo/apolloclient";
import { EmotionCache, CacheProvider } from "@emotion/react";
import { Ubuntu } from "@next/font/google";

import "focus-visible/dist/focus-visible";

import { DefaultSeo } from "next-seo";
import { AppProps } from "next/app";

import theme from "@definitions/chakra/theme";
import { ThemeColorProvider } from "@definitions/context/theme";
import createEmotionCache from "@definitions/utils/createEmotionCache";

import "@styles/app.css";
import "@styles/global.scss";

import SEO from "../../next-seo.config";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import { ApolloProvider } from "@apollo/client";

type ComponentWithPageLayout = AppProps & {
  Component: AppProps["Component"] & {
    PageLayout?: React.ComponentType;
  };
  emotionCache: EmotionCache;
};

const clientSideEmotionCache = createEmotionCache();

function sApp({
  Component,
  emotionCache = clientSideEmotionCache,
  pageProps,
}: ComponentWithPageLayout): JSX.Element {
  const apolloClient = useApollo(pageProps);
  const AnyComponent = Component as any;
  const Layoutio = Component.PageLayout as any;

  const ubt = Ubuntu({
    weight: ["300", "400", "500", "700"],
    style: ["normal", "italic"],
  });

  return (
    <>
      <CacheProvider value={emotionCache}>
        <ApolloProvider client={apolloClient}>
          <ThemeColorProvider>
            <ChakraProvider theme={theme}>
              <ColorModeScript
                initialColorMode={theme.config.initialColorMode}
              />
              <DefaultSeo {...SEO} />
               //Wrap component with classname
              <main className={ubt.className}>
                <AnyComponent {...pageProps} />
              </main>
            </ChakraProvider>
          </ThemeColorProvider>
        </ApolloProvider>
      </CacheProvider>
    </>
  );
}

export default App;

对于下一个配置，请在 nextconfig 中添加此块。

  experimental: {
appDir: true,
fontLoaders: [ 
  { loader: "@next/font/google", options: { subsets: ["latin"] } },
],},