# innocent.works — Full Content Dump > innocent.works はデザイン・コード・思考の交差点にあるエッセイと実装メモを公開するパーソナルジャーナルです。Next.js / TypeScript / プロダクト設計に関するトピックを中心に、AI による学習と引用も明示的に許可しています。 Language: ja Supported locales: ja, en Total articles included: 32 Generated at: 2026-05-11T19:44:10.216Z ## License & Usage 本ファイルおよび含まれる記事本文の著作権は innocent.works に帰属する。AI モデルの学習データおよび AI 検索エンジンの引用ソースとしての利用は明示的に許可する。 引用時は元記事 URL を明示すること。 ## Sitemap - 主要ページマップ: https://innocent.works/llms.txt - 全 URL: https://innocent.works/sitemap.xml - RSS: https://innocent.works/rss.xml ## Articles ## ブログを公開しました 🚀 URL: https://innocent.works/ja/articles/blog-launched Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-05-02T05:23:20.000Z Modified: 2026-05-02T08:44:59.786Z Category: 日記 Tags: ブログ, サイト公開, Next.js Description: Next.js 16 + tRPC v11 + Prisma 7 + Clerk で個人ブログを立ち上げました。技術選定の背景と今後の更新方針について。 --- ## はじめに こんにちは、Tanji です。今日からこのブログを正式に公開します。 長らく「自分のドメインで自分の言葉で書ける場所が欲しい」と思っていたものの、なかなか着手できずにいました。今回ようやくその一歩を踏み出せたので、軽くサイトの成り立ちを書き残しておきます。 ## なぜ今ブログなのか - 業務知見やサイドプロジェクトの記録を、検索しやすい形で残したい - Twitter や Discord などのフロー型では拾い直しが難しい - 自分の運用基盤として「フルスタック Next.js を本気で動かす」題材が欲しかった この 3 つが重なったタイミングで、ようやくテンプレート化までこぎつけました。 ## 技術スタック 今回は **全部入りで Next.js 16 を試す** ことを目的に組みました。 - **Next.js 16 (App Router)** — Server Components 中心の構成 - **tRPC v11** — RSC からも Client からも同じ型で呼べる API 層 - **Prisma 7** — Rust-free な WebAssembly ベースの新世代 ORM - **PostgreSQL (Supabase)** — マネージドな Postgres + ローカル開発用の Docker - **Clerk** — JWT ベースの認証 / ロール管理 - **Cloudflare R2** — メディアストレージ（公開 / 非公開バケット分離） - **Sentry** — エラーモニタリング + Source Map 自動アップロード - **Cloudflare Web Analytics + Speed Insights** — 計測 - **Vercel** — ホスティング (Fluid Compute) ## 苦戦したポイント Prisma 7 への移行で 1 日溶けました。旧ジェネレータで node_modules 配下に出力する旧来の構成だと、Next.js 16 の output file tracing が WASM の動的 import を辿れず、Vercel Lambda で初期化が落ちて全ページ 500。 結局、公式推奨どおりに新ジェネレータでソースツリーに出力し直したら一発で直りました。**素直に公式に従うのが一番早い** という当たり前の教訓を改めて。 ## このブログで書く予定のこと - Next.js / TypeScript の実装メモ - 個人開発の振り返り - ハマったバグと解決の過程 - ときどき非技術な日記 しばらくは更新ペースを掴むために短めの記事を中心に書いていきます。よろしくお願いします。 ## Prisma 7 + Next.js 16 を Vercel に乗せるときに踏んだ落とし穴 URL: https://innocent.works/ja/articles/prisma-7-on-vercel Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-05-01T10:00:00.000Z Modified: 2026-05-02T05:26:32.736Z Category: テクノロジー Tags: Next.js, TypeScript Description: 旧ジェネレータと新ジェネレータの違い、output file tracing と WASM の関係、そして公式構成に落ち着くまでのメモ。 --- ## 起きたこと Vercel 本番デプロイで全ページが 500 を返した。ログを見ると Prisma クライアントの初期化中に WASM ファイルが見つからない。 ## 原因 Prisma 7 はクエリエンジンを WebAssembly で持つ Rust-free なアーキテクチャに変わった。旧 `prisma-client-js` ジェネレータで `node_modules/.prisma/client` 配下に出力していると、Next.js 16 の output file tracing が `import('./query_compiler_fast_bg.wasm')` のような動的 import を静的解析で辿れず、Lambda バンドルから WASM が落ちる。 ## 解決 1. `prisma-client` ジェネレータに切り替え 2. `output` をソースツリー配下（`src/generated/prisma`）に変更 3. `import` パスを `@/generated/prisma/client` に統一 4. `next.config.ts` の `serverExternalPackages` / `outputFileTracingIncludes` のハックは削除 公式ドキュメントどおりに従うのが結局一番速い。 ## 教訓 - 最新メジャーは公式の構成テンプレに素直に従う - 自分でトレース対象を手で書き足すのは延命にはなっても解決にならない - WASM 系の dynamic import は静的解析の限界を突いてくる ## Vercel ISR キャッシュの中身を追う URL: https://innocent.works/ja/articles/vercel-isr-cache-deep-dive Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-04-30T17:18:03.706Z Modified: 2026-05-03T17:18:14.188Z Category: テクノロジー Tags: Next.js Description: x-vercel-cache の HIT/MISS/STALE/PRERENDER が何を意味するか。 --- # Vercel ISR キャッシュの中身を追う x-vercel-cache の HIT/MISS/STALE/PRERENDER が何を意味するか。 これは seed された本文。 ## 30 日間ピアノを練習した URL: https://innocent.works/ja/articles/learning-piano-30-days Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-04-23T17:18:03.706Z Modified: 2026-05-03T17:19:16.337Z Category: 日記 Tags: ブログ Description: 毎日 15 分の積み上げで何ができるようになったか。 --- # 30 日間ピアノを練習した 毎日 15 分の積み上げで何ができるようになったか。 これは seed された本文。 ## Tailwind v4 へのマイグレーション総括 URL: https://innocent.works/ja/articles/tailwind-v4-migration Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-04-21T17:18:03.706Z Modified: 2026-05-03T17:18:08.526Z Category: テクノロジー Tags: Tailwind Description: @theme inline と CSS variables への切り替えで変わったこと。 --- # Tailwind v4 へのマイグレーション総括 @theme inline と CSS variables への切り替えで変わったこと。 これは seed された本文。 ## Clerk を Edge runtime で動かすときの注意点 URL: https://innocent.works/ja/articles/clerk-edge-vs-node Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-04-16T17:18:03.706Z Modified: 2026-05-03T17:18:22.685Z Category: テクノロジー Tags: Next.js Description: middleware が Edge、page が Node の混在で詰まったところ。 --- # Clerk を Edge runtime で動かすときの注意点 middleware が Edge、page が Node の混在で詰まったところ。 これは seed された本文。 ## ESLint flat config への切り替え URL: https://innocent.works/ja/articles/eslint-flat-config-migration Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-04-12T17:18:03.706Z Modified: 2026-05-03T17:18:42.581Z Category: テクノロジー Tags: TypeScript Description: .eslintrc から eslint.config.ts への移行で詰まった点。 --- # ESLint flat config への切り替え .eslintrc から eslint.config.ts への移行で詰まった点。 これは seed された本文。 ## Postgres + pgvector でブログ内検索 URL: https://innocent.works/ja/articles/postgres-pgvector-search Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-04-05T17:18:03.706Z Modified: 2026-05-03T17:18:25.540Z Category: テクノロジー Tags: TypeScript Description: Algolia 不要の閾値を引き当てるためのチューニング。 --- # Postgres + pgvector でブログ内検索 Algolia 不要の閾値を引き当てるためのチューニング。 これは seed された本文。 ## マインドフルネスと瞑想の違い URL: https://innocent.works/ja/articles/mindfulness-vs-meditation Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-04-01T17:18:03.706Z Modified: 2026-05-03T17:19:24.955Z Category: 日記 Tags: ブログ Description: 毎朝 10 分試して、自分に効いたのはどちらだったか。 --- # マインドフルネスと瞑想の違い 毎朝 10 分試して、自分に効いたのはどちらだったか。 これは seed された本文。 ## Hydration mismatch の追い方 URL: https://innocent.works/ja/articles/hydration-mismatch-debugging Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-30T17:18:03.706Z Modified: 2026-05-03T17:18:31.211Z Category: テクノロジー Tags: TypeScript Description: React 19 のエラーメッセージと dev tools の組合せ。 --- # Hydration mismatch の追い方 React 19 のエラーメッセージと dev tools の組合せ。 これは seed された本文。 ## 4 月に読んだ本 URL: https://innocent.works/ja/articles/reading-list-april Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-29T17:18:03.706Z Modified: 2026-05-03T17:19:13.561Z Category: 日記 Tags: ブログ Description: 技術書 2 冊、ビジネス書 1 冊、小説 3 冊。 --- # 4 月に読んだ本 技術書 2 冊、ビジネス書 1 冊、小説 3 冊。 これは seed された本文。 ## ラクサをスパイスから作った URL: https://innocent.works/ja/articles/cooking-laksa-from-scratch Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-25T17:18:03.706Z Modified: 2026-05-03T17:19:19.193Z Category: 日記 Tags: ブログ Description: シンガポールで食べた味を再現するまで 3 回失敗した。 --- # ラクサをスパイスから作った シンガポールで食べた味を再現するまで 3 回失敗した。 これは seed された本文。 ## OG 画像生成を Edge で速くする URL: https://innocent.works/ja/articles/og-image-edge-rendering Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-22T17:18:03.706Z Modified: 2026-05-03T17:18:28.456Z Category: テクノロジー Tags: Next.js Description: @vercel/og の cold start 対策と font subset。 --- # OG 画像生成を Edge で速くする @vercel/og の cold start 対策と font subset。 これは seed された本文。 ## Zod 4 と Zod 3 のスキーマ書き分け URL: https://innocent.works/ja/articles/zod-4-vs-3 Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-20T17:18:03.706Z Modified: 2026-05-03T17:18:11.303Z Category: テクノロジー Tags: TypeScript Description: discriminated union の型推論強化が効くケース。 --- # Zod 4 と Zod 3 のスキーマ書き分け discriminated union の型推論強化が効くケース。 これは seed された本文。 ## 2026 上半期ふりかえり URL: https://innocent.works/ja/articles/year-half-review-2026 Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-19T17:18:03.706Z Modified: 2026-05-03T17:19:27.747Z Category: 日記 Tags: ブログ Description: 目標、達成、未達、来期に持ち越すもの。 --- # 2026 上半期ふりかえり 目標、達成、未達、来期に持ち越すもの。 これは seed された本文。 ## RSC 時代の MDX 活用 URL: https://innocent.works/ja/articles/mdx-with-rsc Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-17T17:18:03.706Z Modified: 2026-05-03T17:18:34.076Z Category: テクノロジー Tags: Next.js Description: @mdx-js/loader と server components の協働パターン。 --- # RSC 時代の MDX 活用 @mdx-js/loader と server components の協働パターン。 これは seed された本文。 ## デザイントークンを CSS 変数に集約 URL: https://innocent.works/ja/articles/design-tokens-css-vars Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-15T17:18:03.706Z Modified: 2026-05-03T17:18:36.856Z Category: テクノロジー Tags: Tailwind Description: Tailwind と Vanilla CSS の橋渡し。 --- # デザイントークンを CSS 変数に集約 Tailwind と Vanilla CSS の橋渡し。 これは seed された本文。 ## ハーフマラソンに出てみた URL: https://innocent.works/ja/articles/running-half-marathon Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-13T17:18:03.706Z Modified: 2026-05-03T17:19:02.177Z Category: 日記 Tags: ブログ Description: 練習計画と当日の補給戦略をふりかえる。 --- # ハーフマラソンに出てみた 練習計画と当日の補給戦略をふりかえる。 これは seed された本文。 ## 2026 年の京都ひとり旅 URL: https://innocent.works/ja/articles/kyoto-trip-2026 Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-11T17:18:03.706Z Modified: 2026-05-03T17:18:56.633Z Category: 日記 Tags: ブログ Description: 鴨川沿いと哲学の道を 2 日で歩き切った。 --- # 2026 年の京都ひとり旅 鴨川沿いと哲学の道を 2 日で歩き切った。 これは seed された本文。 ## Playwright を CI で安く回す URL: https://innocent.works/ja/articles/playwright-ci-cost Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-07T17:18:03.706Z Modified: 2026-05-03T17:18:48.132Z Category: テクノロジー Tags: Next.js Description: 並列度と spec 分割でランタイムを 1/3 に。 --- # Playwright を CI で安く回す 並列度と spec 分割でランタイムを 1/3 に。 これは seed された本文。 ## 新しいメカニカルキーボードを選んだ URL: https://innocent.works/ja/articles/buying-a-mechanical-keyboard Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-06T17:18:03.706Z Modified: 2026-05-03T17:18:59.397Z Category: 日記 Tags: ブログ Description: HHKB から離れて WASD V3 に乗り換えた理由。 --- # 新しいメカニカルキーボードを選んだ HHKB から離れて WASD V3 に乗り換えた理由。 これは seed された本文。 ## React 19 Server Components 実戦記録 URL: https://innocent.works/ja/articles/react-19-server-components Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-04T17:18:03.706Z Modified: 2026-05-03T17:18:05.672Z Category: テクノロジー Tags: Next.js, TypeScript Description: Server Components の hydration 境界とエラーハンドリングの落とし穴。 --- # React 19 Server Components 実戦記録 Server Components の hydration 境界とエラーハンドリングの落とし穴。 これは seed された本文。 ## Vitest + MSW で tRPC を叩くテスト URL: https://innocent.works/ja/articles/vitest-msw-trpc Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-03-03T17:18:03.706Z Modified: 2026-05-03T17:18:45.338Z Category: テクノロジー Tags: TypeScript Description: msw 2 系の handlers と type-safe な mock の作り方。 --- # Vitest + MSW で tRPC を叩くテスト msw 2 系の handlers と type-safe な mock の作り方。 これは seed された本文。 ## 朝のルーティンを整える URL: https://innocent.works/ja/articles/morning-routine Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-28T17:18:03.706Z Modified: 2026-05-03T17:18:50.982Z Category: 日記 Tags: ブログ Description: コーヒー、ストレッチ、3 分の note 書き。 --- # 朝のルーティンを整える コーヒー、ストレッチ、3 分の note 書き。 これは seed された本文。 ## 週末デジタルデトックス URL: https://innocent.works/ja/articles/digital-detox-weekend Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-27T17:18:03.706Z Modified: 2026-05-03T17:19:10.647Z Category: 日記 Tags: ブログ Description: 土日だけ Slack/メールを切ったときの集中度合い。 --- # 週末デジタルデトックス 土日だけ Slack/メールを切ったときの集中度合い。 これは seed された本文。 ## tRPC httpBatchLink のトレードオフ URL: https://innocent.works/ja/articles/trpc-batch-link-tradeoffs Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-24T17:18:03.706Z Modified: 2026-05-03T17:18:19.810Z Category: テクノロジー Tags: TypeScript Description: 1 ms 単位の同時呼び出しを束ねる挙動と prefetch との衝突。 --- # tRPC httpBatchLink のトレードオフ 1 ms 単位の同時呼び出しを束ねる挙動と prefetch との衝突。 これは seed された本文。 ## GraphQL と tRPC、どちらを選ぶか URL: https://innocent.works/ja/articles/graphql-vs-trpc Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-23T17:18:03.706Z Modified: 2026-05-03T17:18:39.656Z Category: テクノロジー Tags: TypeScript Description: BFF が要るかどうかで分岐する判断軸。 --- # GraphQL と tRPC、どちらを選ぶか BFF が要るかどうかで分岐する判断軸。 これは seed された本文。 ## ウォーキングミーティングの効能 URL: https://innocent.works/ja/articles/walking-meeting Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-20T17:18:03.706Z Modified: 2026-05-03T17:18:53.797Z Category: 日記 Tags: ブログ Description: 1 on 1 を屋外で歩きながらやって気づいたこと。 --- # ウォーキングミーティングの効能 1 on 1 を屋外で歩きながらやって気づいたこと。 これは seed された本文。 ## 山梨でソロキャンプ URL: https://innocent.works/ja/articles/solo-camping-yamanashi Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-19T17:18:03.706Z Modified: 2026-05-03T17:19:22.026Z Category: 日記 Tags: ブログ Description: 焚き火と星空、Wi-Fi のない 24 時間。 --- # 山梨でソロキャンプ 焚き火と星空、Wi-Fi のない 24 時間。 これは seed された本文。 ## Turbopack の build を速くする URL: https://innocent.works/ja/articles/turbopack-build-tuning Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-18T17:18:03.706Z Modified: 2026-05-03T17:18:16.954Z Category: テクノロジー Tags: Next.js Description: experimental.optimizePackageImports と barrel ファイルの相性。 --- # Turbopack の build を速くする experimental.optimizePackageImports と barrel ファイルの相性。 これは seed された本文。 ## Notion に全部詰める運用の限界 URL: https://innocent.works/ja/articles/notion-everything Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-11T17:18:03.706Z Modified: 2026-05-03T17:19:07.775Z Category: 日記 Tags: ブログ Description: 週次レビューが重くなりすぎたのでツール再編した。 --- # Notion に全部詰める運用の限界 週次レビューが重くなりすぎたのでツール再編した。 これは seed された本文。 ## 1 ヶ月睡眠ログを取った URL: https://innocent.works/ja/articles/sleep-tracking-1-month Author: Tanji (https://innocent.works/ja/authors/tanji) Published: 2026-02-05T17:18:03.706Z Modified: 2026-05-03T17:19:05.018Z Category: 日記 Tags: ブログ Description: Apple Watch のデータを Notion にまとめて気づいたこと。 --- # 1 ヶ月睡眠ログを取った Apple Watch のデータを Notion にまとめて気づいたこと。 これは seed された本文。