Nuxtのpublicディレクトリとは？〜静的アセット管理の基本とメリット〜

Nuxtのpublicディレクトリは、ウェブサイトで使用する静的ファイルを配置するための特別なフォルダです。ここに置いたファイルはビルド時に加工されず、そのままの名前とパスで公開されます。これにより、SEOに重要なファイルや、頻繁に変更しない画像・アイコンなどを安定して提供できるのが大きなメリットです。

例えば、robots.txtやfavicon.ico、SNSシェア用のOGP画像などは、URLが変わるとSEOやユーザー体験に悪影響を及ぼすため、publicディレクトリに置くのが推奨されます。

まず結論：publicディレクトリのポイント

• publicディレクトリ内のファイルはビルド時に変更されず、そのままルートパスで提供される
• SEO対策に重要なファイル（例：robots.txt、favicon.ico）や、頻繁に変更しない画像に最適
• 動的に生成されるアセットやモジュールで処理が必要なファイルはpublicではなくassetsやstatic（Nuxt 2）を使う
• URLが固定であることが保証されるため、外部サービスやSNS連携時に安心して利用可能
• ファイル名やパスを変更するとリンク切れになるため、管理には注意が必要

いつ使うべきか？使わない方がよいケースは？

使うべきケース

• SEOに影響するファイルを安定的に配信したいとき
• 画像やアイコンなど、ビルドプロセスで加工不要な静的ファイルを置きたいとき
• 外部サービスやSNSでURLを指定する必要があるファイルを管理するとき
• CDNやキャッシュ戦略でURLの変更を避けたい場合

使わない方がよいケース

• ファイルの内容をビルド時に最適化・圧縮したい場合（例：画像のリサイズや圧縮）
• Vueコンポーネントやスタイルシート、JavaScriptなど動的に処理されるアセット
• ファイル名をハッシュ化してキャッシュバスターを付けたい場合（assetsやstaticの利用が適切）

実務でよくあるユースケースとサンプルコード

1. SEO用のrobots.txtを配置する

SEO対策で必須のrobots.txtは、publicに置くことでURLが変わらず検索エンジンに正しく認識されます。

public/
└── robots.txt

robots.txtの例：

User-agent: *
Disallow: /admin/

2. favicon.icoやサイトアイコンの管理

ブラウザのタブに表示されるfaviconもpublicに置くことで、ビルド後もURLが変わらず安定して配信されます。

public/
└── favicon.ico

HTMLやVueコンポーネントでの指定例：

useSeoMeta({
  favicon: '/favicon.ico'
})

3. SNSシェア用のOGP画像を配置する

SNSでのシェア時に使うOGP画像もpublicに置くことで、URLを固定して外部サービスに登録可能です。

public/
└── og-image.png

メタ情報設定例：

useSeoMeta({
  ogImage: '/og-image.png'
})

よくある落とし穴・注意点

1. ファイル名やパスの変更に注意

public内のファイルはURLが固定されるため、ファイル名やパスを変更するとリンク切れやSEO評価の低下を招きます。リネームや移動は慎重に行いましょう。

2. SSRとHydrationの影響

publicのファイルはサーバーサイドレンダリング（SSR）時にもそのまま配信されますが、Vueコンポーネントの中で動的に読み込む場合はパスの指定ミスに注意が必要です。絶対パス（/ファイル名）で指定することが基本です。

3. パフォーマンス面の考慮

publicに大量の大きなファイルを置くと、初回ロード時のパフォーマンスに影響が出る可能性があります。必要に応じてCDNを利用したり、画像は圧縮してサイズを抑える工夫をしましょう。

4. ビルドプロセスでの最適化がされない

public内のファイルはビルド時に圧縮や最適化が行われません。画像の最適化やコードの圧縮が必要な場合は、assetsディレクトリや外部ツールを利用してください。

まとめ

Nuxtのpublicディレクトリは、SEOに重要なファイルや変更頻度の低い静的アセットを安定して配信するための強力な仕組みです。URLが固定されるため、外部サービスとの連携やSEO対策に最適ですが、ファイル名の管理やパフォーマンス面には注意が必要です。動的処理や最適化が必要なファイルはassetsなど他のディレクトリを使い分けることで、効率的かつ安全なウェブサイト運用が可能になります。

適切に使い分けて、Nuxtプロジェクトの静的ファイル管理をよりスマートにしましょう。