Home Articles Books Search About
日本語
Nuxt Content + trailingSlash: Links to Static Files Return 404 - Problem and Solution

Nuxt Content + trailingSlash: Links to Static Files Return 404 - Problem and Solution

Overview In a Nuxt 3/4 + Nuxt Content environment with trailingSlash: "append" configured, links to static files such as PDFs and images within content may result in 404 errors. Conditions for Occurrence This occurs when all of the following conditions are met: Using Nuxt 3/4 + Nuxt Content trailingSlash: "append" is set in nuxt.config.ts There are links to static files (PDFs, images, etc.) in Markdown or content Problem Details Symptoms When writing a link like the following in content: ...

How to Correctly Load Local JSON Files in Nuxt 4 SSG

How to Correctly Load Local JSON Files in Nuxt 4 SSG

Introduction When performing Static Site Generation (SSG) with Nuxt 4, there are cases where you want to load data from local JSON files to generate static pages. However, unlike Next.js’s getStaticProps, it is not straightforward, and there are several pitfalls to watch out for. This article introduces the correct approach discovered through trial and error. The Problem: Why Simple fs Reading Does Not Work The First Approach We Tried (Failed) // This does not work const fetchLocalData = async (filePath: string) => { if (import.meta.server) { const fs = await import('fs'); const path = await import('path'); const fullPath = path.resolve(process.cwd(), 'public/data', filePath); const data = fs.readFileSync(fullPath, 'utf-8'); return JSON.parse(data); } // Client-side const response = await fetch(`/data/${filePath}`); return await response.json(); }; This approach has the following problems: ...