[{"data":1,"prerenderedAt":681},["ShallowReactive",2],{"content-/nuxt-data-directory-guide":3,"all-pages-for-dir":659,"related-/nuxt-data-directory-guide":660,"og-image-/nuxt-data-directory-guide":680},{"id":4,"title":5,"body":6,"category":644,"concepts":644,"description":645,"extension":646,"meta":647,"navigation":648,"ogImage":644,"path":649,"project_name":644,"published":650,"publishedAt":651,"seo":652,"source":644,"stem":653,"tags":654,"todo":644,"unpublished":650,"updatedAt":651,"__hash__":658},"pages/2025-12/2025-12-24/nuxt-data-directory-guide.md","Nuxt 3のapp/dataとpublicディレクトリの使い分け",{"type":7,"value":8,"toc":623},"minimark",[9,23,27,32,86,99,102,109,119,124,149,154,168,173,298,303,309,313,340,344,361,366,413,417,420,426,429,492,495,501,504,510,534,539,591,594,610,619],[10,11,13,14,18,19,22],"h1",{"id":12},"nuxt-3のappdataとpublicディレクトリの使い分け","Nuxt 3の",[15,16,17],"code",{},"app/data","と",[15,20,21],{},"public","ディレクトリの使い分け",[24,25,26],"p",{},"特にCloudflare Pagesにデプロイする場合のNuxt 3プロジェクトで、データファイルをどこに配置すべきかについて整理する。",[28,29,31],"h2",{"id":30},"結論tldr","結論（TL;DR）",[33,34,35,51],"table",{},[36,37,38],"thead",{},[39,40,41,45,48],"tr",{},[42,43,44],"th",{},"配置場所",[42,46,47],{},"用途",[42,49,50],{},"ビルド時の扱い",[52,53,54,71],"tbody",{},[39,55,56,62,65],{},[57,58,59],"td",{},[15,60,61],{},"app/data/",[57,63,64],{},"TypeScript/JavaScriptでインポートするデータ",[57,66,67],{},[68,69,70],"strong",{},"バンドルに含まれる",[39,72,73,78,81],{},[57,74,75],{},[15,76,77],{},"public/",[57,79,80],{},"fetch/APIで取得する静的ファイル",[57,82,83],{},[68,84,85],{},"そのまま配信される",[24,87,88,95,96,98],{},[68,89,90,91,94],{},"現在の",[15,92,93],{},"app/data/japanese-quiz/","は正しい配置。"," TypeScriptファイルとしてインポートしているため、",[15,97,61],{},"に置くのが適切。",[28,100,101],{"id":101},"詳細な比較",[103,104,106,108],"h3",{"id":105},"appdataディレクトリ",[15,107,61],{},"ディレクトリ",[110,111,116],"pre",{"className":112,"code":114,"language":115},[113],"language-text","apps/web/app/data/\n└── japanese-quiz/\n    ├── index.ts\n    ├── modification-order.ts\n    ├── punctuation.ts\n    └── particles.ts\n","text",[15,117,114],{"__ignoreMap":118},"",[24,120,121],{},[68,122,123],{},"特徴：",[125,126,127,134,137,143,146],"ul",{},[128,129,130,133],"li",{},[68,131,132],{},"ビルド時にバンドル","される（JavaScriptにコンパイルされる）",[128,135,136],{},"TypeScriptの型チェックが効く",[128,138,139,142],{},[15,140,141],{},"import { data } from '~/data/...'"," でインポート",[128,144,145],{},"Tree-shakingにより未使用コードは除外される",[128,147,148],{},"SSR/SSGでそのまま使える",[24,150,151],{},[68,152,153],{},"適しているケース：",[125,155,156,159,162,165],{},[128,157,158],{},"TypeScriptの型定義を活用したい",[128,160,161],{},"コード内で直接インポートして使う",[128,163,164],{},"データ量が比較的小さい（数KB〜数十KB）",[128,166,167],{},"ビルド時に確定するデータ",[24,169,170],{},[68,171,172],{},"例：クイズの問題データ",[110,174,178],{"className":175,"code":176,"language":177,"meta":118,"style":118},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// app/data/japanese-quiz/modification-order.ts\nexport const modificationOrderQuestions: QuizQuestion[] = [\n  {\n    id: 'mod-001',\n    category: 'modification-order',\n    question: '次の文で修飾語の順序が適切なものを選べ',\n    // ...\n  }\n]\n","typescript",[15,179,180,189,218,224,246,263,280,286,292],{"__ignoreMap":118},[181,182,185],"span",{"class":183,"line":184},"line",1,[181,186,188],{"class":187},"sxvE3","// app/data/japanese-quiz/modification-order.ts\n",[181,190,192,196,200,204,208,212,215],{"class":183,"line":191},2,[181,193,195],{"class":194},"sHkkW","export",[181,197,199],{"class":198},"stQ0i"," const ",[181,201,203],{"class":202},"s4oTP","modificationOrderQuestions",[181,205,207],{"class":206},"shFtX",": ",[181,209,211],{"class":210},"sSkh3","QuizQuestion",[181,213,214],{"class":206},"[] =",[181,216,217],{"class":206}," [\n",[181,219,221],{"class":183,"line":220},3,[181,222,223],{"class":206},"  {\n",[181,225,227,231,233,237,241,243],{"class":183,"line":226},4,[181,228,230],{"class":229},"sz8Xr","    id",[181,232,207],{"class":206},[181,234,236],{"class":235},"sMJiu","'",[181,238,240],{"class":239},"sdGka","mod-001",[181,242,236],{"class":235},[181,244,245],{"class":206},",\n",[181,247,249,252,254,256,259,261],{"class":183,"line":248},5,[181,250,251],{"class":229},"    category",[181,253,207],{"class":206},[181,255,236],{"class":235},[181,257,258],{"class":239},"modification-order",[181,260,236],{"class":235},[181,262,245],{"class":206},[181,264,266,269,271,273,276,278],{"class":183,"line":265},6,[181,267,268],{"class":229},"    question",[181,270,207],{"class":206},[181,272,236],{"class":235},[181,274,275],{"class":239},"次の文で修飾語の順序が適切なものを選べ",[181,277,236],{"class":235},[181,279,245],{"class":206},[181,281,283],{"class":183,"line":282},7,[181,284,285],{"class":187},"    // ...\n",[181,287,289],{"class":183,"line":288},8,[181,290,291],{"class":206},"  }\n",[181,293,295],{"class":183,"line":294},9,[181,296,297],{"class":206},"]\n",[103,299,301,108],{"id":300},"publicディレクトリ",[15,302,77],{},[110,304,307],{"className":305,"code":306,"language":115},[113],"apps/web/public/\n├── data/\n│   ├── financial-data-20251202.json\n│   └── raw/\n│       ├── AAPL.json\n│       └── ...\n├── images/\n└── audio/\n",[15,308,306],{"__ignoreMap":118},[24,310,311],{},[68,312,123],{},[125,314,315,321,328,331,337],{},[128,316,317,320],{},[68,318,319],{},"そのまま静的ファイルとして配信","される",[128,322,323,324,327],{},"URLで直接アクセス可能（",[15,325,326],{},"/data/file.json","）",[128,329,330],{},"ビルドプロセスを経由しない",[128,332,333,336],{},[15,334,335],{},"fetch('/data/file.json')"," で取得",[128,338,339],{},"Cloudflare Pagesのエッジキャッシュが効く",[24,341,342],{},[68,343,153],{},[125,345,346,349,352,355,358],{},[128,347,348],{},"ランタイムで動的にfetchしたい",[128,350,351],{},"データ量が大きい（数百KB〜数MB）",[128,353,354],{},"画像、音声、PDFなどのバイナリファイル",[128,356,357],{},"外部ツールから生成・更新されるファイル",[128,359,360],{},"クライアントサイドでのみ使用するデータ",[24,362,363],{},[68,364,365],{},"例：財務データJSON",[110,367,369],{"className":175,"code":368,"language":177,"meta":118,"style":118},"// コンポーネント内\nconst { data } = await useFetch('/data/financial-data-20251202.json')\n",[15,370,371,376],{"__ignoreMap":118},[181,372,373],{"class":183,"line":184},[181,374,375],{"class":187},"// コンポーネント内\n",[181,377,378,381,384,387,390,393,396,400,403,405,408,410],{"class":183,"line":191},[181,379,380],{"class":198},"const ",[181,382,383],{"class":206},"{",[181,385,386],{"class":202}," data",[181,388,389],{"class":206}," }",[181,391,392],{"class":206}," =",[181,394,395],{"class":194}," await",[181,397,399],{"class":398},"senZ8"," useFetch",[181,401,402],{"class":206},"(",[181,404,236],{"class":235},[181,406,407],{"class":239},"/data/financial-data-20251202.json",[181,409,236],{"class":235},[181,411,412],{"class":206},")\n",[28,414,416],{"id":415},"cloudflare-pagesでの動作","Cloudflare Pagesでの動作",[103,418,419],{"id":419},"ビルド出力の構造",[110,421,424],{"className":422,"code":423,"language":115},[113],".output/\n├── public/           # 静的ファイル（CDNから配信）\n│   ├── data/         # public/からコピー\n│   ├── images/\n│   └── _nuxt/        # バンドルされたJS/CSS\n└── server/           # サーバーサイドコード\n    └── chunks/       # app/data/はここに含まれる\n",[15,425,423],{"__ignoreMap":118},[103,427,428],{"id":428},"パフォーマンスの違い",[33,430,431,446],{},[36,432,433],{},[39,434,435,438,442],{},[42,436,437],{},"項目",[42,439,440],{},[15,441,61],{},[42,443,444],{},[15,445,77],{},[52,447,448,459,470,481],{},[39,449,450,453,456],{},[57,451,452],{},"初回ロード",[57,454,455],{},"JSバンドルに含まれる",[57,457,458],{},"別リクエスト",[39,460,461,464,467],{},[57,462,463],{},"キャッシュ",[57,465,466],{},"JSと一緒にキャッシュ",[57,468,469],{},"個別にCDNキャッシュ",[39,471,472,475,478],{},[57,473,474],{},"更新時",[57,476,477],{},"再ビルド必要",[57,479,480],{},"ファイル置換のみ可",[39,482,483,486,489],{},[57,484,485],{},"SSR",[57,487,488],{},"サーバーで直接利用",[57,490,491],{},"fetchが必要",[28,493,494],{"id":494},"判断フローチャート",[110,496,499],{"className":497,"code":498,"language":115},[113],"データを配置したい\n    │\n    ├─ TypeScriptで型チェックしたい？\n    │   └─ Yes → app/data/\n    │\n    ├─ import文で直接インポートする？\n    │   └─ Yes → app/data/\n    │\n    ├─ ファイルサイズが大きい（100KB以上）？\n    │   └─ Yes → public/\n    │\n    ├─ ランタイムで動的に取得する？\n    │   └─ Yes → public/\n    │\n    ├─ 外部ツールで生成・更新される？\n    │   └─ Yes → public/\n    │\n    └─ バイナリファイル（画像/音声/PDF）？\n        └─ Yes → public/\n",[15,500,498],{"__ignoreMap":118},[28,502,503],{"id":503},"このプロジェクトでの実例",[103,505,507,509],{"id":506},"appdataに置いているもの",[15,508,61],{},"に置いているもの",[33,511,512,522],{},[36,513,514],{},[39,515,516,519],{},[42,517,518],{},"パス",[42,520,521],{},"理由",[52,523,524],{},[39,525,526,531],{},[57,527,528],{},[15,529,530],{},"app/data/japanese-quiz/*.ts",[57,532,533],{},"TypeScriptでインポート、型チェック活用",[103,535,537,509],{"id":536},"publicに置いているもの",[15,538,77],{},[33,540,541,549],{},[36,542,543],{},[39,544,545,547],{},[42,546,518],{},[42,548,521],{},[52,550,551,561,571,581],{},[39,552,553,558],{},[57,554,555],{},[15,556,557],{},"public/data/raw/*.json",[57,559,560],{},"財務データ（大量、fetchで取得）",[39,562,563,568],{},[57,564,565],{},[15,566,567],{},"public/images/",[57,569,570],{},"画像ファイル",[39,572,573,578],{},[57,574,575],{},[15,576,577],{},"public/audio/",[57,579,580],{},"音声ファイル",[39,582,583,588],{},[57,584,585],{},[15,586,587],{},"public/excel/",[57,589,590],{},"Excelファイル",[28,592,593],{"id":593},"まとめ",[125,595,596,603],{},[128,597,598,602],{},[68,599,600],{},[15,601,61],{},": コードの一部として扱いたいデータ（TypeScript推奨）",[128,604,605,609],{},[68,606,607],{},[15,608,77],{},": 静的ファイルとして配信したいデータ（JSON、画像、音声など）",[24,611,612,613,615,616,618],{},"TypeScriptファイルとしてインポートしており型安全性も確保されている現在の",[15,614,93],{},"は、この配置で正しい。",[15,617,77],{},"に移動する必要はない。",[620,621,622],"style",{},"html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}",{"title":118,"searchDepth":191,"depth":191,"links":624},[625,626,632,636,637,643],{"id":30,"depth":191,"text":31},{"id":101,"depth":191,"text":101,"children":627},[628,630],{"id":105,"depth":220,"text":629},"app/data/ディレクトリ",{"id":300,"depth":220,"text":631},"public/ディレクトリ",{"id":415,"depth":191,"text":416,"children":633},[634,635],{"id":419,"depth":220,"text":419},{"id":428,"depth":220,"text":428},{"id":494,"depth":191,"text":494},{"id":503,"depth":191,"text":503,"children":638},[639,641],{"id":506,"depth":220,"text":640},"app/data/に置いているもの",{"id":536,"depth":220,"text":642},"public/に置いているもの",{"id":593,"depth":191,"text":593},null,"Nuxt 3プロジェクトにおけるデータファイルの配置場所について、app/dataとpublicディレクトリの違いと使い分け基準を解説","md",{},true,"/nuxt-data-directory-guide",false,"2025-12-24T00:00:00.000Z",{"title":5,"description":645},"2025-12/2025-12-24/nuxt-data-directory-guide",[655,656,657],"nuxt","cloudflare","architecture","0rIB1UuWHmWNdaDnqWY_wLabTbEdC98bc03q5zZcFcU",[],[661,665,669,672,676],{"title":662,"path":663,"publishedAt":664},"Nuxt Content v3：D1データベースは本当に必要なのか？","/nuxt-content-d1-not-used","2025-12-05T00:00:00.000Z",{"title":666,"path":667,"publishedAt":668},"Cloudflare PagesとWorkers Static Assetsの違い、エッジキャッシュが効く仕組み","/cloudflare-pages-workers-static-assets","2026-07-22T00:00:00.000Z",{"title":670,"path":671,"publishedAt":668},"Webサービスの技術構成 2026年版 — Vue.js/Nuxt/Astroの使い分けとその理由","/web-tech-stack-2026",{"title":673,"path":674,"publishedAt":675},"Cloudflare Pages はもう Workers の中に住んでいる ― Static Assets 統合後の地図","/cloudflare-pages-to-workers-static-assets","2026-06-29T00:00:00.000Z",{"title":677,"path":678,"publishedAt":679},"Nuxt の pnpm generate を measure-deploy.ps1 でフェーズ別に計測した","/nuxt-build-deploy-time-measurement","2026-06-04T00:00:00.000Z","https://log.eurekapu.com/og/blog/nuxt-data-directory-guide.png?v=2025-12-24T00%3A00%3A00.000Z&title=Nuxt%203%E3%81%AEapp%2Fdata%E3%81%A8public%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AE%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91&author=Kei%20Komatsu&sig=0401b2a1835123f7",1785654972266]