Next.js チュートリアル 第6章にてVercelでここまでのコードをデプロイ使用としたらエラーがでた

概要

Next.jsのチュートリアル第6章にて第5章までのコードをチュートリアルの案内に沿ってVercelでデプロイ使用としたらエラーがでてデプロイできなかったので解決方法と原因を簡単にまとめる。

本件の内容は2025/08/16現在の内容です。

エラーの内容

元の内容

Failed to compile.
app/ui/fonts.ts
`next/font` error:
Preload is enabled but no subsets were specified for font `Lusitana`. Please specify subsets or disable preloading if your intended subset can't be preloaded.
Available subsets: `latin`
Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets
> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

和訳

コンパイルに失敗しました。
app/ui/fonts.ts
`next/font` エラー:
プリロードが有効になっていますが、フォント `Lusitana` に対してサブセットが指定されていません。サブセットを指定するか、意図したサブセットがプリロードできない場合はプリロードを無効化してください。
利用可能なサブセット: `latin`
詳細はこちら: https://nextjs.org/docs/messages/google-fonts-missing-subsets
> ビルドが webpack エラーのため失敗しました
 ELIFECYCLE  コマンドが終了コード 1 で失敗しました。
エラー: コマンド "pnpm run build" が 1 で終了しました。

原因

プリロード対象になっているフォント（Lusitana）でどのサブセット（「英語」とか「ロシア語」とかの文字のセット）をプリロードするか指定していない。

解決方法

下記ファイルにサブセットの指定を追記

nextjs-dashboard/app/ui/fonts.ts

import { Inter } from 'next/font/google';
import { Lusitana } from 'next/font/google';

export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({
  weight: ['400', '700'],
  subsets: ['latin'], // こちらを追記
});

修正した差分はこちら↓

解説

エラー内容に出ているリンクを見てみるとしっかりと詳細が書いてあった。わかりやすい。