🐡
Next.js入門 - Noto Sans JP設定方法の紹介
1. はじめに
- この記事は、Next.jsでNoto Sans JPフォントを設定したい発者を対象としています。
- Noto Sans JPフォントを効率的に設定する方法を学べます。
公式サイトの解説はこちら
2. Next.jsの組み込みのフォント最適化
- Next.jsは、
next/fontという組み込みのフォントを最適化する機能を提供しており、Googleフォントnext/font/googleを簡単に使用できます。 - この機能を使用することで、パフォーマンスを最適化しつつ、カスタムフォントを簡単に実装できます。
next/font/googleについては以下公式を参照
3. 主要な機能と構文
3.1 next/font/google のインポート
Next.jsの組み込みフォント機能を使用するためのモジュールをインポートします。
import { Noto_Sans_JP } from 'next/font/google'
3.2 フォントオブジェクトの作成
インポートしたフォントを使用して、設定を含むフォントオブジェクトを作成します。
const notoSansJp = Noto_Sans_JP({
subsets: ['latin'],
weight: ['400', '700'],
preload: false,
variable: '--font-noto-sans-jp',
display: 'swap',
fallback: ['Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'sans-serif'],
})
3.3 フォントの適用
作成したフォントオブジェクトをレイアウトに適用します。
<html lang="ja" className={notoSansJp.variable}>
<body>{children}</body>
</html>
4. サイト全体にフォントを適用するコード例
以下、Next.jsサイトの全体にNoto Sans JPを適用するコード例です。
公式サイトを元に、より良いコードに修正しています。
app/ui/fonts.ts
- Noto Sans JPフォントの設定を一元管理します。
-
subsets、weight、preloadなどのオプションを指定し、フォントの最適化を行います。-
preload: falseを設定することで、初期ページロード時のパフォーマンスが向上します
-
-
display: 'swap'でフォントロード中のテキスト表示を改善します。 -
fallbackでフォールバックフォントを指定し、フォントロード前やロード失敗時の表示を設定します。
app/ui/fonts.ts
import { Noto_Sans_JP } from 'next/font/google'
export const notoSansJp = Noto_Sans_JP({
subsets: ['latin'],
weight: ['400', '700'],
preload: false,
variable: '--font-noto-sans-jp',
display: 'swap',
fallback: ['Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'sans-serif'],
})
app/layout.tsx
-
fonts.tsから設定したフォントをインポートします。 -
htmlタグにclassName属性を追加し、フォントのvariableプロパティを適用します。 - これにより、サイト全体でフォントが使用可能になります。
app/layout.tsx
import './globals.css'
import { notoSansJp } from './ui/fonts'
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ja">
<body className={notoSansJp.variable}>{children}</body>
</html>
);
}
app/globals.css
-
:rootセレクタで、フォントのCSSカスタムプロパティを定義します。 -
bodyセレクタで、定義したカスタムプロパティを使用してフォントを適用します。 - これにより、サイト全体で一貫したフォントスタイルが適用されます。
app/globals.css
:root {
--font-noto-sans-jp: var(--font-noto-sans-jp);
}
body {
font-family: var(--font-noto-sans-jp);
}
5. まとめ
Next.jsプロジェクトでNoto Sans JPフォントを設定する方法を紹介しました。
next/font/googleモジュールを使用してフォントをインポートし、設定を行い、レイアウトに適用することで、効率的かつパフォーマンスを考慮したフォント設定が可能です。
この方法には以下の利点があります。
- 自動的なフォントの最適化によるパフォーマンスの向上
- カスタムフォントによるレイアウトシフトの防止
- フォント設定の一元管理による保守性の向上
6. 用語解説
- Noto Sans JP: Googleが開発した日本語フォントです。
- next/font/google: Next.jsが提供する組み込みのGoogleフォント最適化機能で、パフォーマンス良くGoogleフォントを読み込むことができます
- subsets: フォントファイルの一部で、特定の文字セットのみを含む小さなバージョンのフォントです。必要な文字だけを含めることでファイルサイズを削減できます。
-
preload: ブラウザがページの主要なコンテンツを読み込む前にリソースを読み込む技術です。
preload: falseに設定することで、大きなフォントファイルの初期ロードを遅延させることができます。 - display: 'swap': フォントの読み込み方法を指定するオプションで、フォントがロードされるまでfallbackフォントを表示し、ロード完了後に切り替えます。
- fallbackフォント: 指定したフォントが利用できない場合に代替として使用されるフォントです。
Discussion