📘
Next.js (App Router) と Chakra UI を用いたマルチ Google フォント統合
概要
本記事ではNext.js(App Router)chkura uiでGoogleフォントを利用するための方法をまとめていく
導入
Next.js (App Router): React ベースのフレームワークであり、サーバーサイドレンダリング (SSR) や静的サイト生成 (SSG) を簡単に実装できる。
Chakra UI: シンプルで再利用可能なコンポーネントを提供する、アクセシビリティに焦点を当てた React UI フレームワーク。
Google Fonts: ウェブ用に最適化された無料フォントのライブラリ。カスタマイズ性とアクセシビリティを向上させる
実装
今回は複数のフォントが使用できるように実装した
fonts.ts
import { Zen_Kaku_Gothic_New, Zen_Maru_Gothic } from 'next/font/google'
export const ZenKakuGothicNew = Zen_Kaku_Gothic_New({
weight: '400',
subsets: ['latin'],
display: 'swap',
})
export const ZenMaruGothic = Zen_Maru_Gothic({
weight: '400',
subsets: ['latin'],
display: 'swap',
})
layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang='jp'>
<body>
<ChakraProvider>
<Box bg='#fffcdd' minH='100vh' w='full' className={ZenMaruGothic.className}>
<Header />
<RecoilContextProvider>
<AuthSwitchPage>{children}</AuthSwitchPage>
</RecoilContextProvider>
<Footer />
</Box>
</ChakraProvider>
</body>
</html >
);
}
上記の実装ではZenMaruGothicを全体適応させているが部分的に変えたければ下記のようなclassNameを変えたい部分に当てると変えることができる
className={ZenKakuGothicNew.className}
参考資料
Discussion