APIリクエスト方法を直接$fetchを叩くように修正

nuxt/app/composables/useApiFetch.ts

@@ -0,0 +1,11 @@
+export const useApiFetch = () => {
+  const config = useRuntimeConfig()
+
+  const apiFetch = $fetch.create({
+    baseURL: config.public.siteUrl
+  })
+
+  return {
+    apiFetch
+  }
+}

nuxt/app/pages/index.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { SlideCard } from '~/types/SlideCard'
 
-const { data: slides } = await useFetch<SlideCard[]>('/api/slides')
+const { apiFetch } = useApiFetch()
+
+const slides = await apiFetch<SlideCard[]>(`/slides.json?t=${Date.now()}`)
 </script>
 
 <template>

nuxt/app/pages/slide-view/[slideId]/index.vue

@@ -8,11 +8,19 @@ const slideUrl = computed(() => {
   return `/slides/${route.params.slideId}/`
 })
 
-const { data: slide } = await useFetch<SlideCard>(`/api/slides/${route.params.slideId}`)
+const { apiFetch } = useApiFetch()
 
-if (!slide) {
-  throw createError({ statusCode: 404 })
-}
+const { data: slide } = await useAsyncData('slide-detail', async () => {
+  const slides = await apiFetch<SlideCard[]>(`/slides.json?t=${Date.now()}`)
+
+  const found: SlideCard | undefined  = slides.find((s: SlideCard) => s.id === route.params.slideId)
+
+  if (!found) {
+    throw createError({ statusCode: 404 })
+  }
+
+  return found
+})
 
 useHead({
   title: slide.value?.title || 'Slide',
@@ -31,7 +39,7 @@ useHead({
     },
     {
       name: 'og:image',
-      content: slide.value?.thumbnail ? `${config.public.siteUrl}${slide.value.thumbnail}` : '',
+      content: slide.value?.thumbnail ? `${config.public.siteUrl}${slide.value?.thumbnail}` : '',
     },
     {
       name: 'twitter:title',

nuxt/nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import tailwindcss from '@tailwindcss/vite'
 
-const siteUrl = process.env.NUXT_PUBLIC_SITE_URL || 'https://slides.shade4827.net'
+const siteUrl = process.env.NUXT_PUBLIC_SITE_URL || 'http://localhost:3000/'
 
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',