Summary  
This chapter explains how to import and configure a custom Google Font using a font-module API—specifying weights and subsets—and have it automatically optimized and bundled at build time. It then shows applying the generated font class to the root layout so the font is used across the entire application.

General domain of usage  
Web development (frontend styling)

アプリで使用するフォントに注目。

Next.js の `next/font` モジュールを利用すると、アプリケーションのフォントは自動的に最適化されます。フォントファイルはビルド時にダウンロードされ、他の静的アセットと一緒にホストされます。そのため、ユーザーがアプリケーションにアクセスした際に追加のネットワークリクエストが発生せず、パフォーマンス向上につながります。

## プロジェクトに戻る
アプリ用にカスタムの Poppins Google フォントを追加。

1. `fonts.ts` フォルダ内に `app/ui` という新しいファイルを作成；
2. `Poppins` モジュールから `next/font/google` フォントをインポート；
3. フォントの `weight` と `subsets` も指定。

アプリで `Poppins` フォントを使用する準備ができました。`body` の `app/layout.tsx` 要素に適用します。

その結果、アプリ全体で `Poppins` フォントが使用されます。

次の章では、追加のフォントを導入します。

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

カスタムGoogleフォントの追加

プロジェクトに戻る

実践例