🐡

Next.js入門 - Noto Sans JP設定方法の紹介

に公開
Next.js
入門
Google Fonts
tech

1. はじめに

この記事は、Next.jsでNoto Sans JPフォントを設定したい開発者を対象としています。

Next.jsの組み込み機能を活用し、パフォーマンスを最適化しながらNoto Sans JPフォントを効率的に設定する方法を学ぶことができます。

📚 参考資料

以下の公式ドキュメントもあわせてご参照ください。

2. Next.jsの組み込みフォント最適化機能

Next.jsは、next/fontという組み込みのフォント最適化機能を提供しています。

なぜnext/fontを使うのか

この機能を使用することで、以下のメリットが得られます：

  • Googleフォント（next/font/google）を簡単に使用可能
  • 自動的なパフォーマンス最適化
  • フォントの効率的な実装

3. 主要な機能と構文

実装は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を適用する具体的なコード例を示します。公式サイトを元に、より実践的なコードに修正しています。

4.1 ディレクトリ構造

これから説明するコード例のフォルダとファイルの構造は以下の通りです。

app/
├── ui/
│   └── fonts.ts
├── layout.tsx
└── globals.css

各ディレクトリ・ファイルの役割：

  • app/
    • Next.jsのアプリケーションのルートディレクトリ
  • ui/
    • ユーザーインターフェース関連のコンポーネントやユーティリティを格納するディレクトリ
  • fonts.ts
    • フォント設定を管理するファイル
  • layout.tsx
    • アプリケーション全体のレイアウトを定義するファイル
  • globals.css
    • グローバルに適用されるCSSスタイルを定義するファイル

4.2 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: フォールバックフォントを指定し、フォントロード前やロード失敗時の表示を設定

4.3 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が適用される

4.4 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