🐡
Next.js入門 - Noto Sans JP設定方法の紹介
1. はじめに
- この記事は、Next.jsでNoto Sans JPフォントを設定したい開発者を対象として、Noto Sans JPフォントを効率的に設定する方法を学ぶことができます。
- Next.jsの公式サイトでも詳しい解説が提供されています。以下公式ドキュメントをご参照ください。
公式サイトの解説はこちら
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. サイト全体にNoto Sans JPを適用するコード例
以下、Next.jsサイトの全体にNoto Sans JPを適用するコード例です。
公式サイトを元に、より良いコードに修正しています。
ディレクトリ構造
これから説明するコード例のフォルダとファイルの構造は以下の通りです。
app/
├── ui/
│ └── fonts.ts
├── layout.tsx
└── globals.css
-
app/- Next.jsのアプリケーションのルートディレクトリです。
-
ui/- ユーザーインターフェース関連のコンポーネントやユーティリティを格納するディレクトリです。
-
fonts.ts- フォント設定を管理するファイルです。
-
layout.tsx- アプリケーション全体のレイアウトを定義するファイルです。
-
globals.css- グローバルに適用されるCSSスタイルを定義するファイルです。
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'],
})
このファイルでは以下の設定を行っています。
-
subsets: 'latin'サブセットを指定し、必要なフォントセットのみを読み込みます。 -
weight: フォントの太さを400（通常）と700（太字）に設定します。 -
preload: false: 初期ページロード時のパフォーマンスを向上させます。 -
variable: CSSカスタムプロパティの名前を指定します。 -
display: 'swap': フォントロード中のテキスト表示を改善します。 -
fallback: フォールバックフォントを指定し、フォントロード前やロード失敗時の表示を設定します。
app/layout.tsx
アプリケーション全体のレイアウトを定義するファイルです。
fonts.tsから設定したフォントをインポートし、サイト全体に適用します。
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" className={notoSansJp.variable}>
<body>{children}</body>
</html>
);
}
このファイルでは以下の設定を行っています。
-
fonts.tsから設定したフォントをインポートします。 -
htmlタグにclassName属性を追加し、フォントのvariableプロパティを適用します。 - 上記2点により、サイト全体に
Noto Sans JPが適用されます。
app/globals.css
グローバルに適用されるCSSスタイルを定義するファイルです。
app/globals.css
:root {
--font-noto-sans-jp: var(--font-noto-sans-jp);
}
body {
font-family: var(--font-noto-sans-jp);
}
このファイルでは以下の設定を行っています。
-
:rootセレクタで、フォントのCSSカスタムプロパティを定義します。 -
bodyセレクタで、定義したカスタムプロパティを使用してフォントを適用します。 - これにより、サイト全体で一貫したフォントスタイルが適用されます。
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