我试图加载谷歌字体到Nextjs项目,但我得到下面的错误。在nextjs 12它的工作正常,但我必须使用字体的头部链接。这个错误也发生在使用@next/font/local。
我一直在挣扎,任何帮助都是感激的。
我正在使用官方文档过程添加全局字体。我在Nextjs 13上。
My _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;
1条答案
按热度按时间6l7fqoea1#
只需将ubt常量移到sApp函数上方:)