Nuxt Content + trailingSlash設定で静的ファイルへのリンクが404になる問題と解決策

概要 Nuxt 3/4 + Nuxt Content の環境で trailingSlash: "append" を設定している場合、コンテンツ内のPDFや画像などの静的ファイルへのリンクが404エラーになることがあります。 発生条件 以下の条件がすべて揃った場合に発生します: Nuxt 3/4 + Nuxt Content を使用 nuxt.config.ts で trailingSlash: "append" を設定 Markdownやコンテンツ内に静的ファイル(PDF、画像など)へのリンクがある 問題の詳細 症状 コンテンツ内で以下のようなリンクを記述した場合: < a h r e f = " / u p l o a d s / d o c u m e n t . p d f " > 資 料 を ダ ウ ン ロ ー ド < / a > 生成されるHTMLでは、リンクが以下のように変換されてしまいます: ...

2026年2月4日 · 7 分 · Nakamura

Nuxt 4 SSGでローカルJSONファイルを正しく読み込む方法

はじめに Nuxt 4でStatic Site Generation (SSG) を行う際、ローカルのJSONファイルからデータを読み込んで静的ページを生成したいケースがあります。しかし、Next.jsのgetStaticPropsのようにシンプルにはいかず、いくつかのハマりポイントがあります。 本記事では、試行錯誤の末に見つけた正しいアプローチを紹介します。 問題:なぜ単純なfsの読み込みでは動かないのか 最初に試したアプローチ(失敗) c } o ; n i } c r ❌ s f o e t c c c c r n t こ ( o o o o e ク s u れ f i n n n n t ラ t r は e m s s s s u イ n 動 t p t t t t r ア r か c o n ン e a な h r f p f d ト s w い L t s a u a J サ p a o . t l t S イ o i c m = h l a O ド n t a e P N s l t a = a = . e r D a w t p e a . a a h f a = s t s i w s r p a e t a = . s a o r i r e w n = v i t p e ( a s e m a a d i e a r p i t d a t . s ) o m h F t j y r p . i a f s n { t o r l ) e o c ( r e e ; t n ' t s S c ( ( f ( o y h ) f s ' l n ( ; i ' p v c ` l ) a e ( / e ; t ( f d P h p u a a ' r l t t ) o l a h ; c P / : e a $ s t { s s h f t . , i r c l i w ' e n d u P g ( t a ) ) f t , - h = 8 } > ' ' ` p ) ) { u ; ; b l i c / d a t a ' , f i l e P a t h ) ; このアプローチには以下の問題があります: ...

2025年12月11日 · 19 分 · Nakamura