1<!DOCTYPE html><html lang="ja-JP"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/profile.png"/>
vendor: 66 bytes, line 1
1<script async="" src="https://www.googletagmanager.com/gtag/js?id=
1G-YT1Y3HC2ES
vendor: 11 bytes, line 1
1"></script>
1<title>Posts | dashi's portfolio</title><meta name="description" content="dashi's portfolio site."/><link rel="modulepreload" href="/assets/main-BTvl8QpF.js"/><link rel="modulepreload" href="/assets/index-CQvDxl4U.js"/><link rel="modulepreload" href="/assets/CardBody-DxlayHGn.js"/><link rel="modulepreload" href="/assets/PageTitle-DlVZgDBS.js"/><link rel="modulepreload" href="/assets/Chip-B8qCU3-V.js"/><link rel="modulepreload" href="/assets/dayjs-AduHta9m.js"/><link rel="icon" type="image/x-icon" href="/favicon/favicon.ico"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"/><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"/><link rel="manifest" href="/favicon/site.webmanifest"/><link rel="stylesheet" href="/assets/styles-CY6_D8i6.css"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap"/><link rel="stylesheet" href="/assets/main-BJ75wo_X.css" type="text/css"/>
1<script>
vendor: 117 bytes, line 1
1window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','
1G-YT1Y3HC2ES
vendor: 3 bytes, line 1
1');
1</script>
1</head><body class="bg-black" style="font-family:'Source Code Pro', monospace"><div class="relative min-h-screen max-w-2xl mx-auto px-2 pt-4 pb-12 lg:py-16"><a href="/"><img class="rounded-full" src="/profile.png" height="120" width="120" alt="profile image"/></a><a href="/"><div class="Typewriter" data-testid="typewriter-wrapper"></div></a><div class="text-slate-400"><div class="Typewriter" data-testid="typewriter-wrapper"></div></div><div class="border-b border-slate-700 my-10"></div><!--$--><h1 class="text-xl font-bold text-slate-50 pb-4"><div class="flex items-center"><div class="Typewriter" data-testid="typewriter-wrapper"></div><a href="/posts/feed" target="_blank" rel="noopener noreferrer" class="text-lg ml-2"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"></path></svg></a></div></h1><section><div class="grid grid-cols-1 gap-2"><a href="/posts/migrate-to-tanstack-start" class="flex flex-col justify-between border border-slate-600 rounded-lg p-2 bg-slate-800 min-h-20"><div class="text-slate-50 tracking-wider pb-2">ãã¼ããã©ãªãªãNext.jsããTanStack Start + Cloudflareã«ç§»è¡ãã</div><div class="flex justify-between items-end gap-2 text-sm"><time class="text-slate-400 shrink-0 whitespace-nowrap">7 months ago</time><div class="flex flex-wrap justify-end gap-1"><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">TanStack Start</span><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">Cloudflare</span><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">Next.js</span></div></div></a><a href="/posts/nextjs-booking" class="flex flex-col justify-between border border-slate-600 rounded-lg p-2 bg-slate-800 min-h-20"><div class="text-slate-50 tracking-wider pb-2">ã§ããã ããéããããã«å®¿æ³æ½è¨ã®äºç´ã·ã¹ãã ãä½ã£ã¦ã¿ã</div><div class="flex justify-between items-end gap-2 text-sm"><time class="text-slate-400 shrink-0 whitespace-nowrap">4 years ago</time><div class="flex flex-wrap justify-end gap-1"><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">Next.js</span><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">React</span></div></div></a><a href="/posts/next-api-og-image" class="flex flex-col justify-between border border-slate-600 rounded-lg p-2 bg-slate-800 min-h-20"><div class="text-slate-50 tracking-wider pb-2">Next.jsããã°ã§OGPç»åãåççæãã¦è¿ãAPI Routesãå®è£
ãã¦ã¿ã</div><div class="flex justify-between items-end gap-2 text-sm"><time class="text-slate-400 shrink-0 whitespace-nowrap">4 years ago</time><div class="flex flex-wrap justify-end gap-1"><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">Next.js</span><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">React</span></div></div></a><a href="/posts/start-my-nextjs-blog" class="flex flex-col justify-between border border-slate-600 rounded-lg p-2 bg-slate-800 min-h-20"><div class="text-slate-50 tracking-wider pb-2">é¢åãããããNext.jsã§ããã°ãæ§ç¯ãã¦ã¿ã</div><div class="flex justify-between items-end gap-2 text-sm"><time class="text-slate-400 shrink-0 whitespace-nowrap">5 years ago</time><div class="flex flex-wrap justify-end gap-1"><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">Next.js</span><span class="px-3 py-1 rounded-full text-gray-500 bg-gray-200 font-semibold text-sm flex align-center w-max active:bg-gray-300 transition duration-300 ease mr-1">React</span></div></div></a></div></section>
1<script></script>
1<!--/$--><footer class="absolute bottom-0 left-0 right-0 text-center text-sm text-slate-400 pb-2">© 2022 dashi</footer></div>
1<script src="https://embed.zenn.studio/js/window-post-message-proxy-1.0.0.js" defer=""></script>
1<script class="$tsr" id="$tsr-stream-barrier">(self.$R=self.$R||{})["tsr"]=[];self.$_TSR={h(){this.hydrated=!0,this.c()},e(){this.streamEnded=!0,this.c()},c(){this.hydrated&&this.streamEnded&&(delete self.$_TSR,delete self.$R.tsr)},p(e){this.initialized?e():this.buffer.push(e)},buffer:[]}; 2;$_TSR.router=($R=>$R[0]={manifest:$R[1]={routes:$R[2]={__root__:$R[3]={preloads:$R[4]=["/assets/main-BTvl8QpF.js"],assets:$R[5]=[$R[6]={tag:"link",attrs:$R[7]={rel:"stylesheet",href:"/assets/main-BJ75wo_X.css",type:"text/css"}},$R[8]={tag:"script",attrs:$R[9]={type:"module",async:!0},children:"import(\"/assets/main-BTvl8QpF.js\")"}]},"/":$R[10]={assets:$R[11]=[$R[12]={tag:"link",attrs:$R[13]={rel:"stylesheet",href:"/assets/main-BJ75wo_X.css",type:"text/css"}}]},"/about":$R[14]={assets:$R[15]=[$R[16]={tag:"link",attrs:$R[17]={rel:"stylesheet",href:"/assets/main-BJ75wo_X.css",type:"text/css"}}]},"/experience":$R[18]={assets:$R[19]=[$R[20]={tag:"link",attrs:$R[21]={rel:"stylesheet",href:"/assets/main-BJ75wo_X.css",type:"text/css"}}]},"/zenn":$R[22]={assets:$R[23]=[$R[24]={tag:"link",attrs:$R[25]={rel:"stylesheet",href:"/assets/main-BJ75wo_X.css",type:"text/css"}}]},"/posts/$slug":$R[26]={assets:$R[27]=[$R[28]={tag:"link",attrs:$R[29]={rel:"stylesheet",href:"/assets/main-BJ75wo_X.css",type:"text/css"}}]},"/posts/":$R[30]={preloads:$R[31]=["/assets/index-CQvDxl4U.js","/assets/CardBody-DxlayHGn.js","/assets/PageTitle-DlVZgDBS.js","/assets/Chip-B8qCU3-V.js","/assets/dayjs-AduHta9m.js"],assets:$R[32]=[$R[33]={tag:"link",attrs:$R[34]={rel:"stylesheet",href:"/assets/main-BJ75wo_X.css",type:"text/css"}}]}}}
2,matches:$R[35]=[$R[36]={i:"__root__�",u:1791014956805,s:"success",ssr:!0},$R[37]={i:"�posts��posts�",u:1791014956805,s:"success",l:$R[38]=[$R[39]={title:"ãã¼ããã©ãªãªãNext.jsããTanStack Start + Cloudflareã«ç§»è¡ãã",slug:"migrate-to-tanstack-start",excerpt:"ãã®ãã¼ããã©ãªãªãµã¤ããNext.js 14 (App Router) + VercelããTanStack Start + Cloudflare Workersã«ç§»è¡ããããã®è¨é²ãã¾ã¨ãã¦ããã\n ç§»è¡ã®åæ©\nç¹ã«å¤§ããªä¸æºããã£ãããã§ã¯ãªãããTanStack Startã«èå³ããã試ãã¦ã¿ããã£ããCloudflareã¯æéé¢ã§ã®é
åããããåããã¦ç§»è¡ã決ããã\n ç§»è¡åã®æ§æ\n\nãã¬ã¼ã ã¯ã¼ã¯: Next.js 14 App Router\nãããã¤: Vercel\n主è¦ã©ã¤ãã©ãª: @vercel/ogï¼OGç»åï¼ã@t3-oss/env-nextjsï¼ç°å¢å¤æ°ï¼ãzenn-markdown-htmlï¼Markdownãã¼ã¹ï¼\n\n TanStack Startã«ã¤ãã¦\nTanStack Startã¯ãTanStack Routerããã¼ã¹ã«ãããã«ã¹ã¿ãã¯ãã¬ã¼ã ã¯ã¼ã¯ããã«ããã¼ã«ã¨ãã¦vinxiã使ã£ã¦ãããViteãã¼ã¹ãªã®ã§Viteã¨ã³ã·ã¹ãã ã®æ©æµããã®ã¾ã¾åããããã\nãã¼ã¿ãã§ããã¯RSCï¼React Server Componentsï¼ã§ã¯ãªããã«ã¼ãã®",contentHtml:"\x3Cp data-line=\"1\" class=\"code-line\">ãã®ãã¼ããã©ãªãªãµã¤ããNext.js 14 (App Router) + VercelããTanStack Start + Cloudflare Workersã«ç§»è¡ããããã®è¨é²ãã¾ã¨ãã¦ããã\x3C/p>\n\x3Ch2 id=\"%E7%A7%BB%E8%A1%8C%E3%81%AE%E5%8B%95%E6%A9%9F\" data-line=\"3\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E7%A7%BB%E8%A1%8C%E3%81%AE%E5%8B%95%E6%A9%9F\" aria-hidden=\"true\">\x3C/a> ç§»è¡ã®åæ©\x3C/h2>\n\x3Cp data-line=\"5\" class=\"code-line\">ç¹ã«å¤§ããªä¸æºããã£ãããã§ã¯ãªãããTanStack Startã«èå³ããã試ãã¦ã¿ããã£ããCloudflareã¯æéé¢ã§ã®é
åããããåããã¦ç§»è¡ã決ããã\x3C/p>\n\x3Ch2 id=\"%E7%A7%BB%E8%A1%8C%E5%89%8D%E3%81%AE%E6%A7%8B%E6%88%90\" data-line=\"7\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E7%A7%BB%E8%A1%8C%E5%89%8D%E3%81%AE%E6%A7%8B%E6%88%90\" aria-hidden=\"true\">\x3C/a> ç§»è¡åã®æ§æ\x3C/h2>\n\x3Cul data-line=\"9\" class=\"code-line\">\n\x3Cli data-line=\"9\" class=\"code-line\">\x3Cstrong>ãã¬ã¼ã ã¯ã¼ã¯\x3C/strong>: Next.js 14 App Router\x3C/li>\n\x3Cli data-line=\"10\" class=\"code-line\">\x3Cstrong>ãããã¤\x3C/strong>: Vercel\x3C/li>\n\x3Cli data-line=\"11\" class=\"code-line\">\x3Cstrong>主è¦ã©ã¤ãã©ãª\x3C/strong>: \x3Ccode>@vercel/og\x3C/code>ï¼OGç»åï¼ã\x3Ccode>@t3-oss/env-nextjs\x3C/code>ï¼ç°å¢å¤æ°ï¼ã\x3Ccode>zenn-markdown-html\x3C/code>ï¼Markdownãã¼ã¹ï¼\x3C/li>\n\x3C/ul>\n\x3Ch2 id=\"tanstack-start%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" data-line=\"13\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#tanstack-start%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" aria-hidden=\"true\">\x3C/a> TanStack Startã«ã¤ãã¦\x3C/h2>\n\x3Cp data-line=\"15\" class=\"code-line\">TanStack Startã¯ãTanStack Routerããã¼ã¹ã«ãããã«ã¹ã¿ãã¯ãã¬ã¼ã ã¯ã¼ã¯ããã«ããã¼ã«ã¨ãã¦\x3Ca href=\"https://github.com/nksaraf/vinxi\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">vinxi\x3C/a>ã使ã£ã¦ãããViteãã¼ã¹ãªã®ã§Viteã¨ã³ã·ã¹ãã ã®æ©æµããã®ã¾ã¾åããããã\x3C/p>\n\x3Cp data-line=\"17\" class=\"code-line\">ãã¼ã¿ãã§ããã¯RSCï¼React Server Componentsï¼ã§ã¯ãªããã«ã¼ãã®loaderã¨ãµã¼ãã¼é¢æ°ï¼\x3Ccode>createServerFn\x3C/code>ï¼ã§è¡ãã\x3C/p>\n\x3Ch2 id=\"%E8%A9%B0%E3%81%BE%E3%81%A3%E3%81%9F%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%A8%E8%A7%A3%E6%B1%BA%E7%AD%96\" data-line=\"19\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E8%A9%B0%E3%81%BE%E3%81%A3%E3%81%9F%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%A8%E8%A7%A3%E6%B1%BA%E7%AD%96\" aria-hidden=\"true\">\x3C/a> è©°ã¾ã£ããã¤ã³ãã¨è§£æ±ºç\x3C/h2>\n\x3Ch3 id=\"%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C\" data-line=\"21\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C\" aria-hidden=\"true\">\x3C/a> ãã¡ã¤ã«ã·ã¹ãã ã¢ã¯ã»ã¹ãã§ããªãåé¡\x3C/h3>\n\x3Cp data-line=\"23\" class=\"code-line\">æå¤§ã®èª²é¡ã¯Markdownãã¡ã¤ã«ã®èªã¿è¾¼ã¿ãå
ã®å®è£
ã¯\x3Ccode>fs.readdirSync\x3C/code>ã\x3Ccode>fs.readFileSync\x3C/code>ã§ãã¡ã¤ã«ãèªãã§ããããCloudflare Workersã§ã¯ã©ã³ã¿ã¤ã ã§ã®ãã¡ã¤ã«ã·ã¹ãã ã¢ã¯ã»ã¹ãã§ããªãã\x3C/p>\n\x3Cp data-line=\"25\" class=\"code-line\">\x3Cstrong>解決ç\x3C/strong>: Viteã®\x3Ccode>import.meta.glob\x3C/code>ã使ã£ã¦ãã«ãæã«ãã³ãã«ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cdiv class=\"code-block-filename-container\">\x3Cspan class=\"code-block-filename\">libs/posts.ts\x3C/span>\x3C/div>\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"27\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">
2const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> rawFiles\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#F97583\"> import\x3C/span>\x3Cspan style=\"color:#E1E4E8\">.\x3C/span>\x3Cspan style=\"color:#79B8FF\">meta\x3C/span>\x3Cspan style=\"color:#E1E4E8\">.\x3C/span>\x3Cspan style=\"color:#B392F0\">glob\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"../_posts/*.md\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> query: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"?raw\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> import: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"default\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> eager: \x3C/span>\x3Cspan style=\"color:#79B8FF\">true\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">}) \x3C/span>\x3Cspan style=\"color:#F97583\">as\x3C/span>\x3Cspan style=\"color:#B392F0\"> Record\x3C/span>\x3Cspan style=\"color:#E1E4E8\"><\x3C/span>\x3Cspan style=\"color:#79B8FF\">string\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, \x3C/span>\x3Cspan style=\"color:#79B8FF\">string\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Cp data-line=\"35\" class=\"code-line\">\x3Ccode>import.meta.glob\x3C/code>ã¯Viteããã«ãæã«å±éãã¦ããããããã©ã³ã¿ã¤ã ã§ã®ãã¡ã¤ã«ã·ã¹ãã ã¢ã¯ã»ã¹ãä¸è¦ã«ãªãã\x3Ccode>gray-matter\x3C/code>ã\x3Ccode>zenn-markdown-html\x3C/code>ãå«ãã¦ãã¹ã¦Workerãã³ãã«ã«å«ã¾ããã\x3C/p>\n\x3Ch3 id=\"%40vercel%2Fog-%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C\" data-line=\"37\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%40vercel%2Fog-%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C\" aria-hidden=\"true\">\x3C/a> \x3Ccode>@vercel/og\x3C/code> ã使ããªãåé¡\x3C/h3>\n\x3Cp data-line=\"39\" class=\"code-line\">OGç»åçæã«ä½¿ã£ã¦ãã\x3Ccode>@vercel/og\x3C/code>ã¯Vercelå°ç¨ãCloudflare Workersã§ã¯SVGçæã©ã¤ãã©ãªã®\x3Ccode>satori\x3C/code>ã¨WASMãã¼ã¹ã®SVGâPNG夿ã©ã¤ãã©ãª\x3Ccode>@resvg/resvg-wasm\x3C/code>ãçµã¿åããã¦ä»£æ¿ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cdiv class=\"code-block-filename-container\">\x3Cspan class=\"code-block-filename\">routes/api/-og.tsx\x3C/span>\x3C/div>\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"41\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> satori \x3C/span>\x3Cspan style=\"color:#F97583\">from\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> \"satori\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { Resvg, initWasm } \x3C/span>\x3Cspan style=\"color:#F97583\">from\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> \"@resvg/resvg-wasm\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> svg\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#F97583\"> await\x3C/span>\x3Cspan style=\"color:#B392F0\"> satori\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(<\x3C/span>\x3Cspan style=\"color:#B392F0\">div\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3Cspan style=\"color:#F97583\">...</\x3C/span>\x3Cspan style=\"color:#E1E4E8\">div\x3C/span>\x3Cspan style=\"color:#F97583\">>\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> width: \x3C/span>\x3Cspan style=\"color:#79B8FF\">1200\x3C/span>\x3Cspan style=\"color:#E1E4E8\">
2,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> height: \x3C/span>\x3Cspan style=\"color:#79B8FF\">630\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> fonts: [{ name: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"custom\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, data: fontData, style: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"normal\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> }],\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">});\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> resvg\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#F97583\"> new\x3C/span>\x3Cspan style=\"color:#B392F0\"> Resvg\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(svg, { fitTo: { mode: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"width\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, value: \x3C/span>\x3Cspan style=\"color:#79B8FF\">1200\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> } });\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> png\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> resvg.\x3C/span>\x3Cspan style=\"color:#B392F0\">render\x3C/span>\x3Cspan style=\"color:#E1E4E8\">().\x3C/span>\x3Cspan style=\"color:#B392F0\">asPng\x3C/span>\x3Cspan style=\"color:#E1E4E8\">();\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Ch3 id=\"%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E7%A7%BB%E8%A1%8C\" data-line=\"55\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E7%A7%BB%E8%A1%8C\" aria-hidden=\"true\">\x3C/a> ã«ã¼ãã£ã³ã°ã®ç§»è¡\x3C/h3>\n\x3Cp data-line=\"57\" class=\"code-line\">Next.js App Routerã¨TanStack Startã®ã«ã¼ãã£ã³ã°ã¯æ§é ãä¼¼ã¦ãããè¨æ³ãç°ãªãã\x3C/p>\n\x3Ctable data-line=\"59\" class=\"code-line\">\n\x3Cthead data-line=\"59\" class=\"code-line\">\n\x3Ctr data-line=\"59\" class=\"code-line\">\n\x3Cth>Next.js\x3C/th>\n\x3Cth>TanStack Start\x3C/th>\n\x3C/tr>\n\x3C/thead>\n\x3Ctbody data-line=\"61\" class=\"code-line\">\n\x3Ctr data-line=\"61\" class=\"code-line\">\n\x3Ctd>\x3Ccode>app/layout.tsx\x3C/code>\x3C/td>\n\x3Ctd>\x3Ccode>routes/__root.tsx\x3C/code>\x3C/td>\n\x3C/tr>\n\x3Ctr data-line=\"62\" class=\"code-line\">\n\x3Ctd>\x3Ccode>app/page.tsx\x3C/code>\x3C/td>\n\x3Ctd>\x3Ccode>routes/index.tsx\x3C/code>\x3C/td>\n\x3C/tr>\n\x3Ctr data-line=\"63\" class=\"code-line\">\n\x3Ctd>\x3Ccode>app/posts/[slug]/page.tsx\x3C/code>\x3C/td>\n\x3Ctd>\x3Ccode>routes/posts/$slug.tsx\x3C/code>\x3C/td>\n\x3C/tr>\n\x3Ctr data-line=\"64\" class=\"code-line\">\n\x3Ctd>\x3Ccode>app/api/og/route.tsx\x3C/code>\x3C/td>\n\x3Ctd>\x3Ccode>routes/api/-og.tsx\x3C/code>\x3C/td>\n\x3C/tr>\n\x3C/tbody>\n\x3C/table>\n\x3Cp data-line=\"66\" class=\"code-line\">APIã«ã¼ãï¼\x3Ccode>createAPIFileRoute\x3C/code>使ç¨ï¼ã¯TanStack Routerã®ã«ã¼ãããªã¼ã«å«ã¾ããªãããããã¡ã¤ã«åã«\x3Ccode>-\x3C/code>ãã¬ãã£ãã¯ã¹ãã¤ãããã¨ã§è¦åãæ¶ããã\x3C/p>\n\x3Ch3 id=\"%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%82%A7%E3%83%83%E3%83%81%E3%81%AE%E7%A7%BB%E8%A1%8C\" data-line=\"68\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%82%A7%E3%83%83%E3%83%81%E3%81%AE%E7%A7%BB%E8%A1%8C\" aria-hidden=\"true\">\x3C/a> ãã¼ã¿ãã§ããã®ç§»è¡\x3C/h3>\n\x3Cp data-line=\"70\" class=\"code-line\">Next.jsã®RSCã§ã®ãã¼ã¿ãã§ããã¯ãTanStack Startã§ã¯ã«ã¼ãã®\x3Ccode>loader\x3C/code>ã¨\x3Ccode>createServerFn\x3C/code>
2ã§ä»£æ¿ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"72\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#a0aab5\">// Next.js (RSC)\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">export\x3C/span>\x3Cspan style=\"color:#F97583\"> default\x3C/span>\x3Cspan style=\"color:#F97583\"> async\x3C/span>\x3Cspan style=\"color:#F97583\"> function\x3C/span>\x3Cspan style=\"color:#B392F0\"> Page\x3C/span>\x3Cspan style=\"color:#E1E4E8\">() {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> data\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#F97583\"> await\x3C/span>\x3Cspan style=\"color:#B392F0\"> fetchSomething\x3C/span>\x3Cspan style=\"color:#E1E4E8\">();\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> return\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> <\x3C/span>\x3Cspan style=\"color:#B392F0\">Component\x3C/span>\x3Cspan style=\"color:#B392F0\"> data\x3C/span>\x3Cspan style=\"color:#E1E4E8\">={\x3C/span>\x3Cspan style=\"color:#FFAB70\">data\x3C/span>\x3Cspan style=\"color:#E1E4E8\">} />;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">}\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#a0aab5\">// TanStack Start\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> fetchSomething\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> createServerFn\x3C/span>\x3Cspan style=\"color:#E1E4E8\">({ method: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"GET\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> }).\x3C/span>\x3Cspan style=\"color:#B392F0\">handler\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#F97583\">async\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> () \x3C/span>\x3Cspan style=\"color:#F97583\">=>\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> return\x3C/span>\x3Cspan style=\"color:#B392F0\"> fetchSomething\x3C/span>\x3Cspan style=\"color:#E1E4E8\">();\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">});\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">export\x3C/span>\x3Cspan style=\"color:#F97583\"> const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> Route\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> createFileRoute\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"/\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">)({\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#B392F0\"> loader\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: () \x3C/span>\x3Cspan style=\"color:#F97583\">=>\x3C/span>\x3Cspan style=\"color:#B392F0\"> fetchSomething\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(),\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#B392F0\"> component\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: () \x3C/span>\x3Cspan style=\"color:#F97583\">=>\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> data\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> Route.\x3C/span>\x3Cspan style=\"color:#B392F0\">useLoaderData\x3C/span>\x3Cspan style=\"color:#E1E4E8\">();\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> return\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> <\x3C/span>\x3Cspan style=\"color:#B392F0\">Component\x3C/span>\x3Cspan style=\"color:#B392F0\"> data\x3C/span>\x3Cspan style=\"color:#E1E4E8\">={\x3C/span>\x3Cspan style=\"color:#FFAB70\">data\x3C/span>\x3Cspan style=\"color:#E1E4E8\">} />;
2\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> },\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">});\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Cp data-line=\"93\" class=\"code-line\">\x3Ccode>createServerFn\x3C/code>ã®ããªãã¼ã·ã§ã³ç¨ã¡ã½ããã¯ããã¥ã¡ã³ãã«ãã£ã¦ã¯\x3Ccode>.validator()\x3C/code>ã¨æ¸ãã¦ããããã¤ã³ã¹ãã¼ã«ãããã¼ã¸ã§ã³ï¼1.166.2ï¼ã§ã¯\x3Ccode>.inputValidator()\x3C/code>ãæ£ããã£ãããã¼ã¸ã§ã³ã«ãã£ã¦ç°ãªããããªã®ã§æ³¨æãå¿
è¦ã\x3C/p>\n\x3Ch3 id=\"%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0\" data-line=\"95\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0\" aria-hidden=\"true\">\x3C/a> ç°å¢å¤æ°\x3C/h3>\n\x3Cp data-line=\"97\" class=\"code-line\">Next.jsã®\x3Ccode>NEXT_PUBLIC_*\x3C/code>ãã¬ãã£ãã¯ã¹ã¯Viteã®\x3Ccode>VITE_*\x3C/code>ãã¬ãã£ãã¯ã¹ã«å¤æ´ã\x3Ccode>@t3-oss/env-nextjs\x3C/code>ã¯\x3Ccode>@t3-oss/env-core\x3C/code>
2ã«ç½®ãæããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cdiv class=\"code-block-filename-container\">\x3Cspan class=\"code-block-filename\">env.ts\x3C/span>\x3C/div>\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"99\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { createEnv } \x3C/span>\x3Cspan style=\"color:#F97583\">from\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> \"@t3-oss/env-core\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { z } \x3C/span>\x3Cspan style=\"color:#F97583\">from\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> \"zod\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">export\x3C/span>\x3Cspan style=\"color:#F97583\"> const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> env\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> createEnv\x3C/span>\x3Cspan style=\"color:#E1E4E8\">({\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> clientPrefix: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"VITE_\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> client: {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> VITE_SITE_URL: z.\x3C/span>\x3Cspan style=\"color:#B392F0\">string\x3C/span>\x3Cspan style=\"color:#E1E4E8\">().\x3C/span>\x3Cspan style=\"color:#B392F0\">url\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(),\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> VITE_SITE_TITLE: z.\x3C/span>\x3Cspan style=\"color:#B392F0\">string\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(),\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> VITE_GA_ID: z.\x3C/span>\x3Cspan style=\"color:#B392F0\">string\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(),\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> VITE_TWITTER_USER_NAME: z.\x3C/span>\x3Cspan style=\"color:#B392F0\">string\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(),\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> },\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> runtimeEnv: \x3C/span>\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\">.\x3C/span>\x3Cspan style=\"color:#79B8FF\">meta\x3C/span>\x3Cspan style=\"color:#E1E4E8\">.env,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">});\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Ch3 id=\"next%2Flink%E3%83%BBnext%2Fimage%E3%81%AE%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88\" data-line=\"115\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#next%2Flink%E3%83%BBnext%2Fimage%E3%81%AE%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88\" aria-hidden=\"true\">\x3C/a> next/linkã»next/imageã®ç½®ãæã\x3C/h3>\n\x3Cp data-line=\"117\" class=\"code-line\">\x3Ccode>next/link\x3C/code>ã¯TanStack Routerã®\x3Ccode>Link\x3C/code>ã³ã³ãã¼ãã³ãã«ã\x3Ccode>next/image\x3C/code>ã¯é常ã®\x3Ccode><img>\x3C/code>
2ã¿ã°ã«ç½®ãæãããCloudflare Pagesã«ã¯Vercelã®ãããªèªåç»åæé©åæ©è½ã¯ãªããããå¿
è¦ã§ããã°å¥é対å¿ãå¿
è¦ã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"119\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#a0aab5\">// Before\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> Link \x3C/span>\x3Cspan style=\"color:#F97583\">from\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> \"next/link\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"><\x3C/span>\x3Cspan style=\"color:#E1E4E8\">Link href\x3C/span>\x3Cspan style=\"color:#F97583\">=\x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"/about\"\x3C/span>\x3Cspan style=\"color:#F97583\">>\x3C/span>\x3Cspan style=\"color:#E1E4E8\">About\x3C/span>\x3Cspan style=\"color:#F97583\"></\x3C/span>\x3Cspan style=\"color:#E1E4E8\">Link\x3C/span>\x3Cspan style=\"color:#F97583\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#a0aab5\">// After\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { Link } \x3C/span>\x3Cspan style=\"color:#F97583\">from\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> \"@tanstack/react-router\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"><\x3C/span>\x3Cspan style=\"color:#E1E4E8\">Link to\x3C/span>\x3Cspan style=\"color:#F97583\">=\x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"/about\"\x3C/span>\x3Cspan style=\"color:#F97583\">>\x3C/span>\x3Cspan style=\"color:#E1E4E8\">About\x3C/span>\x3Cspan style=\"color:#F97583\"></\x3C/span>\x3Cspan style=\"color:#E1E4E8\">Link\x3C/span>\x3Cspan style=\"color:#F97583\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Ch2 id=\"%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" data-line=\"129\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" aria-hidden=\"true\">\x3C/a> ã¹ãã£ãã©ã¼ã«ãã«ã¤ãã¦\x3C/h2>\n\x3Cp data-line=\"131\" class=\"code-line\">TanStack Startã¯\x3Ccode>@tanstack/cli\x3C/code>ã§ã¹ãã£ãã©ã¼ã«ãã§ãããCloudflareã¢ããã¿ã¼ã\x3Ccode>--deployment\x3C/code>ãªãã·ã§ã³ã§æå®ã§ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"133\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#B392F0\">pnpm\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> dlx\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> @tanstack/cli@latest\x3C/span>\x3Cspan style=\"color:#9ECBFF\">
2 create\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> my-app\x3C/span>\x3Cspan style=\"color:#79B8FF\"> \\\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#79B8FF\"> --framework\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> React\x3C/span>\x3Cspan style=\"color:#79B8FF\"> \\\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#79B8FF\"> --deployment\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> cloudflare\x3C/span>\x3Cspan style=\"color:#79B8FF\"> \\\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#79B8FF\"> --package-manager\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> pnpm\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Cp data-line=\"140\" class=\"code-line\">çæãããããã¸ã§ã¯ãã«ã¯\x3Ccode>wrangler.jsonc\x3C/code>ãå«ã¾ãã¦ããã\x3Ccode>nodejs_compat\x3C/code>ãã©ã°ãããã©ã«ãã§æå¹ã«ãªã£ã¦ããã\x3Ccode>pnpm deploy\x3C/code>ã§ãã®ã¾ã¾Cloudflare Workersã«ãããã¤ã§ããã\x3C/p>\n\x3Ch2 id=\"%E3%81%BE%E3%81%A8%E3%82%81\" data-line=\"142\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E3%81%BE%E3%81%A8%E3%82%81\" aria-hidden=\"true\">\x3C/a> ã¾ã¨ã\x3C/h2>\n\x3Cp data-line=\"144\" class=\"code-line\">TanStack Startã¯ã¾ã çºå±éä¸ã®ãã¬ã¼ã ã¯ã¼ã¯ã ããViteãã¼ã¹ã§åä½ãéããã«ã¼ã¿ã¼ã®åå®å
¨æ§ãé«ããCloudflare Workersã¸ã®ãããã¤ãã·ã³ãã«ã«è¨å®ã§ããã\x3C/p>\n\x3Cp data-line=\"146\" class=\"code-line\">ãã ãããã¡ã¤ã«ã·ã¹ãã ã¢ã¯ã»ã¹ãNode.jsåºæã®APIã«ä¾åãã¦ããç®æã¯ç§»è¡æã«æ³¨æãå¿
è¦ãä»åã¯Markdownã®èªã¿è¾¼ã¿ã\x3Ccode>import.meta.glob\x3C/code>ã§ãã«ãæãã³ãã«ã«å¤æãããã¨ã§å¯¾å¦ããã\x3C/p>\n",tags:$R[40]=["TanStack Start","Cloudflare","Next.js"],date:"2026-03-08T00:00:00.000Z"},$R[41]={title:"ã§ããã ããéããããã«å®¿æ³æ½è¨ã®äºç´ã·ã¹ãã ãä½ã£ã¦ã¿ã",slug:"nextjs-booking",excerpt:" ä½ã£ããã®\nhttps://github.com/dashi296/nextjs-bookinghttps://github.com/dashi296/nextjs-booking\nhttps://nextjs-booking-sample.netlify.app/https://nextjs-booking-sample.netlify.app/\n è¦ä»¶\nå®¿æ³æ½è¨ã®ãã¼ã ãã¼ã¸ãæ§ç¯ããä¸è¨ãæºããäºç´ã·ã¹ãã ãæ§ç¯ãã\n\nã«ã¬ã³ãã¼ã表示ããäºç´ãåã¾ã£ã¦ããæ¥ç¨ã¯è²ãå¤ãã\näºç´ã«ã¯ãã§ãã¯ã¤ã³æ¥æããã§ãã¯ã¢ã¦ãæ¥æãPOSTãããäºç´ç´å¾ã«ã«ã¬ã³ãã¼ã«äºç´ãåæ ãã\nairbnbãbooking.comãªã©ã®å¥ãµã¼ãã¹ã§äºç´ãçºçããå ´åãããç¨åº¦ãã«ã¬ã³ãã¼ä¸ã§åæãããã\n\n æ§æ\n Next.js\nããã³ãã¨ã³ãã¯ãã¡ãããAPI Routesã使ã£ã¦ããã¯ã¨ã³ããæ§ç¯ã\n\nVercelã¯åç¨å©ç¨ã®å ´åã$20/month ãããã®ã§ åç¨å©ç¨ã§ãç¡æã§éç¨ã§ããNetlifyã«ãããã¤ããã\n\nhttps://nextjs.org/https://nextjs.or",contentHtml:"\x3Ch2 id=\"%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE\" data-line=\"1\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE\" aria-hidden=\"true\">\x3C/a> ä½ã£ããã®\x3C/h2>\n\x3Cp data-line=\"2\" class=\"code-line\">\x3Ca href=\"https://github.com/dashi296/nextjs-booking\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/dashi296/nextjs-booking\x3C/a>\x3Ca href=\"https://github.com/dashi296/nextjs-booking\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://github.com/dashi296/nextjs-booking\x3C/a>\x3C/p>\n\x3Cp data-line=\"4\" class=\"code-line\">\x3Ca href=\"https://nextjs-booking-sample.netlify.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://nextjs-booking-sample.netlify.app/\x3C/a>\x3Ca href=\"https://nextjs-booking-sample.netlify.app/\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://nextjs-booking-sample.netlify.app/\x3C/a>\x3C/p>\n\x3Ch2 id=\"%E8%A6%81%E4%BB%B6\" data-line=\"7\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E8%A6%81%E4%BB%B6\" aria-hidden=\"true\">\x3C/a> è¦ä»¶\x3C/h2>\n\x3Cp data-line=\"8\" class=\"code-line\">å®¿æ³æ½è¨ã®ãã¼ã ãã¼ã¸ãæ§ç¯ããä¸è¨ãæºããäºç´ã·ã¹ãã ãæ§ç¯ãã\x3C/p>\n\x3Cul data-line=\"9\" class=\"code-line\">\n\x3Cli data-line=\"9\" class=\"code-line\">ã«ã¬ã³ãã¼ã表示ããäºç´ãåã¾ã£ã¦ããæ¥ç¨ã¯è²ãå¤ãã\x3C/li>\n\x3Cli data-line=\"10\" class=\"code-line\">äºç´ã«ã¯ãã§ãã¯ã¤ã³æ¥æããã§ãã¯ã¢ã¦ãæ¥æãPOSTãããäºç´ç´å¾ã«ã«ã¬ã³ãã¼ã«äºç´ãåæ ãã\x3C/li>\n\x3Cli data-line=\"11\" class=\"code-line\">airbnbãbooking.comãªã©ã®å¥ãµã¼ãã¹ã§äºç´ãçºçããå ´åãããç¨åº¦ãã«ã¬ã³ãã¼ä¸ã§åæãããã\x3C/li>\n\x3C/ul>\n\x3Ch2 id=\"%E6%A7%8B%E6%88%90\" data-line=\"13\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E6%A7%8B%E6%88%90\" aria-hidden=\"true\">\x3C/a> æ§æ\x3C/h2>\n\x3Ch3 id=\"next.js\" data-line=\"14\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#next.js\" aria-hidden=\"true\">\x3C/a> Next.js\x3C/h3>\n\x3Cp data-line=\"15\" class=\"code-line\">ããã³ãã¨ã³ãã¯ãã¡ãããAPI Routesã使ã£ã¦ããã¯ã¨ã³ããæ§ç¯ã\x3Cbr />\nVercelã¯åç¨å©ç¨ã®å ´åã$20/month ãããã®ã§ åç¨å©ç¨ã§ãç¡æã§éç¨ã§ããNetlifyã«ãããã¤ããã\x3Cbr style=\"display:none\" />\n\x3Ca href=\"https://nextjs.org/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://nextjs.org/\x3C/a>\x3Ca href=\"https://nextjs.org/\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://nextjs.org/\x3C/a>\x3C/p>\n\x3Ch3 id=\"google-calendar\" data-line=\"19\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#google-calendar\" aria-hidden=\"true\">\x3C/a> Google Calendar\x3C/h3>\n\x3Cp data-line=\"20\" class=\"code-line\">ãã¼ã¿ãã¼ã¹ä»£ããã«äºå®ã管çããããã«ä½¿ç¨ã\x3Cbr />\nairbnbãbooking.comã®icalã®URLãã«ã¬ã³ãã¼ã«è¨å®ãããã¨ã§ãGoogle Calendarä¸ã«ã¦äºç´ã®ä¸å
管çãå¯è½ã\x3Cbr />\nGCPã®ãµã¼ãã¹ã¢ã«ã¦ã³ãã使ãã¨Google Calendar APIçµç±ã§äºç´ãåå¾ã»ä½æãããã¨ãå¯è½ã\x3Cbr style=\"display:none\" />\n\x3Ca href=\"https://calendar.google.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://calendar.google.com/\x3C/a>\x3Ca href=\"https://calendar.google.com/\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://calendar.google.com/\x3C/a>\x3C/p>\n\x3Ch3 id=\"upstash\" data-line=\"25\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#upstash\" aria-hidden=\"true\">\x3C/a> Upstash\x3C/h3>\n\x3Cp data-line=\"26\" class=\"code-line\">ãµã¼ãã¼ã¬ã¹ãªRedisã®ãã¼ã¿ãã¼ã¹ãæä¾ãããµã¼ãã¹ã\x3Cbr />
2\nGoogle Calendar APIã¯ã¬ã¹ãã³ã¹ãæ©ããªãã®ã§å®æçã«Google Calendar APIããäºç´ä¸è¦§ããã£ãã·ã¥ããç´ æ©ãäºç´ä¸è¦§ã®ã¬ã¹ãã³ã¹ãå®ç¾ãããããã«ä½¿ç¨\x3Cbr style=\"display:none\" />\n\x3Ca href=\"https://upstash.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://upstash.com/\x3C/a>\x3Ca href=\"https://upstash.com/\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://upstash.com/\x3C/a>\x3C/p>\n\x3Ch2 id=\"%E8%A8%AD%E8%A8%88\" data-line=\"30\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E8%A8%AD%E8%A8%88\" aria-hidden=\"true\">\x3C/a> è¨è¨\x3C/h2>\n\x3Cp data-line=\"31\" class=\"code-line\">è¦ä»¶ãæºããããã«API Routesã§ã¯ä¸è¨ã®ï¼ã¤ã®å¦çãè¡ãã¨ã³ããã¤ã³ããå®è£
ãããã¨ã«ããã\x3C/p>\n\x3Cul data-line=\"32\" class=\"code-line\">\n\x3Cli data-line=\"32\" class=\"code-line\">äºç´ä¸è¦§åå¾\x3C/li>\n\x3Cli data-line=\"33\" class=\"code-line\">äºç´ä¸è¦§æ´æ°ï¼å®æçã«å©ãããã¨ã³ããã¤ã³ãï¼\x3C/li>\n\x3Cli data-line=\"34\" class=\"code-line\">äºç´\x3C/li>\n\x3C/ul>\n\x3Ch2 id=\"%E5%87%A6%E7%90%86%E5%9B%B3%E8%A7%A3\" data-line=\"36\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E5%87%A6%E7%90%86%E5%9B%B3%E8%A7%A3\" aria-hidden=\"true\">\x3C/a> å¦çå³è§£\x3C/h2>\n\x3Ch3 id=\"%E4%BA%88%E7%B4%84%E4%B8%80%E8%A6%A7%E5%8F%96%E5%BE%97\" data-line=\"38\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E4%BA%88%E7%B4%84%E4%B8%80%E8%A6%A7%E5%8F%96%E5%BE%97\" aria-hidden=\"true\">\x3C/a> äºç´ä¸è¦§åå¾\x3C/h3>\n\x3Cp data-line=\"39\" class=\"code-line\">ç´ æ©ãã¬ã¹ãã³ã¹ãå®ç¾ããããã«Upstashããäºç´ä¸è¦§ãåå¾ããå¦çã®ã¿ãè¡ã\x3Cbr />\n\x3Cimg src=\"https://storage.googleapis.com/zenn-user-upload/5c061b7bfd69-20220809.png\" alt=\"\" class=\"md-img\" loading=\"lazy\" />\x3C/p>\n\x3Ch3 id=\"%E4%BA%88%E7%B4%84%E4%B8%80%E8%A6%A7%E6%9B%B4%E6%96%B0\" data-line=\"42\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E4%BA%88%E7%B4%84%E4%B8%80%E8%A6%A7%E6%9B%B4%E6%96%B0\" aria-hidden=\"true\">\x3C/a> äºç´ä¸è¦§æ´æ°\x3C/h3>\n\x3Cp data-line=\"43\" class=\"code-line\">äºç´ä¸è¦§åå¾ã§åå¾ãããã¼ã¿ãæ´æ°ããã¨ã³ããã¤ã³ã\x3Cbr />\nä»åã¯Google Cloud Schedulerã§5åã«1åæ´æ°ããããã«ãã¦ããã\x3Cbr />\n\x3Cimg src=\"https://storage.googleapis.com/zenn-user-upload/64f6ec813fa5-20220809.png\" alt=\"\" class=\"md-img\" loading=\"lazy\" />\x3C/p>\n\x3Ch3 id=\"%E4%BA%88%E7%B4%84\" data-line=\"47\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E4%BA%88%E7%B4%84\" aria-hidden=\"true\">\x3C/a> äºç´\x3C/h3>\n\x3Cp data-line=\"48\" class=\"code-line\">äºç´æã¯Google Calendar APIçµç±ã§äºç´ã使ã\x3Cbr />\n使æã«äºç´ããæ
å ±ãè¿ãããã®ã§ããã®æ
å ±ã使ã£ã¦Upstashã®ãã£ãã·ã¥ãæ´æ°ããäºç´ç´å¾ã§ãèªåã®äºç´ãè¿ãããããã«ããã\x3Cbr />\n\x3Cimg src=\"https://storage.googleapis.com/zenn-user-upload/c766dd7231af-20220809.png\" alt=\"\" class=\"md-img\" loading=\"lazy\" />\x3C/p>\n\x3Ch2 id=\"%E5%95%8F%E9%A1%8C%E7%82%B9\" data-line=\"52\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E5%95%8F%E9%A1%8C%E7%82%B9\" aria-hidden=\"true\">\x3C/a> åé¡ç¹\x3C/h2>\n\x3Cul data-line=\"53\" class=\"code-line\">\n\x3Cli data-line=\"53\" class=\"code-line\">ç¾å¨ã®Google Calendarã¯ããã©ã«ãã®è¨å®ã§ã¯\x3Ccode>airbnb\x3C/code> ã \x3Ccode>booking.com\x3C/code>ãªã©ã®icalã使ã£ãäºç´ã®åæã1æ¥ã«1åç¨åº¦ãã宿½ããªãã\x3Cbr />\nä¸è¨ã®ãªãã¸ããªã®ã¹ã¯ãªããã使ããã¨ã§ãã®é »åº¦ãä¸ããããããããè¦å®è¨¼ã\x3C/li>\n\x3C/ul>\n\x3Cp data-line=\"56\" class=\"code-line\">\x3Ca href=\"https://github.com/derekantrican/GAS-ICS-Sync\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/derekantrican/GAS-ICS-Sync\x3C/a>\x3Ca href=\"https://github.com/derekantrican/GAS-ICS-Sync\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://github.com/derekantrican/GAS-ICS-Sync\x3C/a>\x3C/p>\n",tags:$R[42]=["Next.js","React"],date:"2022-08-09T06:03:27.175Z"},$R[43]={title:"Next.jsããã°ã§OGPç»åãåççæãã¦è¿ãAPI Routesãå®è£
ãã¦ã¿ã",slug:"next-api-og-image",excerpt:"ãã®ããã°ã®è¨äºãSNSã§å
±æããã¨ãã«ãOGPç»åãè¨å®ãã¦ãªã·ã£ã¬ã«è¦ã
2ããæ¬²ãåºã¦ãã¾ããã\n\nãã è¨äºï¼ã¤ï¼ã¤ã«OGPç»åãè¨å®ãããªãã¦é¢åãªãã¨ã¯ãããç¡ãã®ã§ãZennãQiitaã®ããã«è¨äºã®ã¿ã¤ãã«ã使ã£ã¦OGPç»åãåçã«çæãããã¨ã«ãã¾ããã\n\nNext.jsã«ã¯AWSã®Lambdaã使ã£ã¦ã¨ã³ããã¤ã³ããå®è£
ããAPI Routesã¨ããæ©è½ãããããã®æ©è½ã使ã£ã¦OGPç»åãè¿ãã¨ã³ããã¤ã³ãã使ããnext-api-og-imageã¨ããã©ã¤ãã©ãªããã£ãã®ã§ãã¡ãã使ã£ã¦å®è£
ãã¦ã¿ã¾ããã\nhttps://github.com/neg4n/next-api-og-imagehttps://github.com/neg4n/next-api-og-image\nãã¡ãã®ã©ã¤ãã©ãªã®READMEéãã«å°å
¥ããä¸è¨ã®ãã¡ã¤ã«ãæ¸ãã¦å®è£
ãã¾ããã\npages/api/ogp.tsx\x3Ccode class=\"code-line\" data-line=\"9\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import",contentHtml:"\x3Cp data-line=\"1\" class=\"code-line\">ãã®ããã°ã®è¨äºãSNSã§å
±æããã¨ãã«ãOGPç»åãè¨å®ãã¦ãªã·ã£ã¬ã«è¦ãããæ¬²ãåºã¦ãã¾ããã\x3Cbr />\nãã è¨äºï¼ã¤ï¼ã¤ã«OGPç»åãè¨å®ãããªãã¦é¢åãªãã¨ã¯ãããç¡ãã®ã§ãZennãQiitaã®ããã«è¨äºã®ã¿ã¤ãã«ã使ã£ã¦OGPç»åãåçã«çæãããã¨ã«ãã¾ããã\x3Cbr />\nNext.jsã«ã¯AWSã®Lambdaã使ã£ã¦ã¨ã³ããã¤ã³ããå®è£
ããAPI Routesã¨ããæ©è½ãããããã®æ©è½ã使ã£ã¦OGPç»åãè¿ãã¨ã³ããã¤ã³ãã使ãã\x3Ccode>next-api-og-image\x3C/code>
2ã¨ããã©ã¤ãã©ãªããã£ãã®ã§ãã¡ãã使ã£ã¦å®è£
ãã¦ã¿ã¾ããã\x3C/p>\n\x3Cp data-line=\"5\" class=\"code-line\">\x3Ca href=\"https://github.com/neg4n/next-api-og-image\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/neg4n/next-api-og-image\x3C/a>\x3Ca href=\"https://github.com/neg4n/next-api-og-image\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://github.com/neg4n/next-api-og-image\x3C/a>\x3C/p>\n\x3Cp data-line=\"7\" class=\"code-line\">ãã¡ãã®ã©ã¤ãã©ãªã®READMEéãã«å°å
¥ããä¸è¨ã®ãã¡ã¤ã«ãæ¸ãã¦å®è£
ãã¾ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cdiv class=\"code-block-filename-container\">\x3Cspan class=\"code-block-filename\">pages/api/ogp.tsx\x3C/span>\x3C/div>\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"9\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { withOGImage } \x3C/span>\x3Cspan style=\"color:#F97583\">from\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> 'next-api-og-image'\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">import\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { getPostSlugs, getPostBySlug } \x3C/span>\x3Cspan style=\"color:#F97583\">from\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> '../../lib/api'\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">enum\x3C/span>\x3Cspan style=\"color:#B392F0\"> QueryParams\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> 'slug'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">}\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">export\x3C/span>\x3Cspan style=\"color:#F97583\"> default\x3C/span>\x3Cspan style=\"color:#B392F0\">
2 withOGImage\x3C/span>\x3Cspan style=\"color:#E1E4E8\"><\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'query'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, \x3C/span>\x3Cspan style=\"color:#F97583\">keyof\x3C/span>\x3Cspan style=\"color:#F97583\"> typeof\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> QueryParams>({\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> strategy: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">'query'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> template: {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#B392F0\"> react\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: ({ \x3C/span>\x3Cspan style=\"color:#FFAB70\">slug\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> }\x3C/span>\x3Cspan style=\"color:#F97583\">:\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { \x3C/span>\x3Cspan style=\"color:#FFAB70\">slug\x3C/span>\x3Cspan style=\"color:#F97583\">:\x3C/span>\x3Cspan style=\"color:#79B8FF\"> string\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> }) \x3C/span>\x3Cspan style=\"color:#F97583\">=>\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> allSlugs\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> getPostSlugs\x3C/span>\x3Cspan style=\"color:#E1E4E8\">().\x3C/span>\x3Cspan style=\"color:#B392F0\">map\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#FFAB70\">s\x3C/span>\x3Cspan style=\"color:#F97583\"> =>\x3C/span>\x3Cspan style=\"color:#E1E4E8\">
2 s.\x3C/span>\x3Cspan style=\"color:#B392F0\">replace\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">/\x3C/span>\x3Cspan style=\"color:#85E89D;font-weight:bold\">\\.\x3C/span>\x3Cspan style=\"color:#DBEDFF\">md\x3C/span>\x3Cspan style=\"color:#F97583\">$\x3C/span>\x3Cspan style=\"color:#9ECBFF\">/\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, \x3C/span>\x3Cspan style=\"color:#9ECBFF\">''\x3C/span>\x3Cspan style=\"color:#E1E4E8\">))\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> isExistSlug\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> allSlugs.\x3C/span>\x3Cspan style=\"color:#B392F0\">includes\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(slug)\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> const\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { \x3C/span>\x3Cspan style=\"color:#79B8FF\">title\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> } \x3C/span>\x3Cspan style=\"color:#F97583\">=\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> isExistSlug \x3C/span>\x3Cspan style=\"color:#F97583\">?\x3C/span>\x3Cspan style=\"color:#B392F0\"> getPostBySlug\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(slug, [\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'title'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">]) \x3C/span>\x3Cspan style=\"color:#F97583\">:\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> { title: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">'Not Found'\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> }\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#a0aab5\"> // ã¿ã¤ãã«ã®æåã®ã¿ã®ãã©ã³ããåå¾\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> style\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> `\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap&text=${\x3C/span>\x3Cspan style=\"color:#E1E4E8\">title\x3C/span>\x3Cspan style=\"color:#9ECBFF\">}');\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> @font-face {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> font-style: normal;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> font-weight: normal;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> }\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> body {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> font-family: 'Noto Sans JP', sans-serif;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> }\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> .container {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> width: 100vw;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> height: 100vh;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> display: flex;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> flex-direction: column;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> justify-content: center;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> align-items: center;\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> }\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> `\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> return\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> (\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> <
2\x3C/span>\x3Cspan style=\"color:#85E89D\">html\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> <\x3C/span>\x3Cspan style=\"color:#85E89D\">head\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> <\x3C/span>\x3Cspan style=\"color:#85E89D\">style\x3C/span>\x3Cspan style=\"color:#B392F0\"> dangerouslySetInnerHTML\x3C/span>\x3Cspan style=\"color:#F97583\">=\x3C/span>\x3Cspan style=\"color:#E1E4E8\">{{ __html: style }} />\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> </\x3C/span>\x3Cspan style=\"color:#85E89D\">head\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> <\x3C/span>\x3Cspan style=\"color:#85E89D\">body\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> <\x3C/span>\x3Cspan style=\"color:#85E89D\">div\x3C/span>\x3Cspan style=\"color:#B392F0\"> className\x3C/span>\x3Cspan style=\"color:#F97583\">=\x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"container\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> <\x3C/span>\x3Cspan style=\"color:#85E89D\">h1\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>{title}</\x3C/span>\x3Cspan style=\"color:#85E89D\">h1\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> </\x3C/span>\x3Cspan style=\"color:#85E89D\">div\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> </\x3C/span>\x3Cspan style=\"color:#85E89D\">body\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> </\x3C/span>\x3Cspan style=\"color:#85E89D\">
2html\x3C/span>\x3Cspan style=\"color:#E1E4E8\">>\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> )\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> },\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> },\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> dev: {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> inspectHtml: \x3C/span>\x3Cspan style=\"color:#79B8FF\">false\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> },\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">})\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Cp data-line=\"66\" class=\"code-line\">è¨äºã®slugãapiã®queryçµç±ã§æ¸¡ããä¸è´ããè¨äºã®ã¿ã¤ãã«ã使ã£ãç»åãçæãã¦è¿ãã¨ã³ããã¤ã³ããå®è£
ã§ãã¾ããã\x3C/p>\n\x3Cp data-line=\"68\" class=\"code-line\">slugãä¸è´ããè¨äºãåå¨ããªãå ´åã¯404ã®ã¬ã¹ãã³ã¹ãè¿ãããã£ãã®ã§ãããã©ã¤ãã©ãªã使ã£ã¦404ã¬ã¹ãã³ã¹ãè¿ãæ¹æ³ãããããªãã£ãã®ã§ãã¨ããããè¨äºã¿ã¤ãã«åã®ä»£ããã«\x3Ccode>Not Found\x3C/code>ã¨æ¸ãããç»åãè¿ãããã«ãã¾ããã\x3C/p>\n\x3Cp data-line=\"70\" class=\"code-line\">ãã¨ã¯è¨äºã®OGPç»åå
ã\x3Ccode>https://owndomain/api/ogp?slug={slug}\x3C/code>ã¨ããå½¢ã§æå®ãã¦ãããã°ãä¸è¨ã®ãããªå½¢ã§OGPç»åãè¨å®ã§ãã¾ãã\x3C/p>\n\x3Cp data-line=\"72\" class=\"code-line\">\x3Cimg src=\"/assets/posts/next-api-og-image/2022-04-18-01-41-32.png\" alt=\"\" class=\"md-img\" loading=\"lazy\" />\x3C/p>\n\x3Ch3 id=\"next-api-og-image%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" data-line=\"74\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#next-api-og-image%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" aria-hidden=\"true\">\x3C/a> next-api-og-imageã使ãã¡ãªãã\x3C/h3>\n\x3Cp data-line=\"76\" class=\"code-line\">API Routesã使ãã ããªã®ã§ãå¥ã®ããã¸ã§ã¯ããç¨æããå¿
è¦ããªããã¹ãã¼ãã£ã¼ã«å®è£
ã§ãã¾ããã\x3Cbr />\nã¾ããçæããç»åãReactã®ã³ã³ãã¼ãã³ããæ¸ãå½¢ã§ã¹ã¿ã¤ãªã³ã°ãã§ããã®ã¯ã¨ã¦ãè¯ãã§ãã\x3C/p>\n\x3Ch3 id=\"next-api-og-image%E3%82%92%E4%BD%BF%E3%81%86%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" data-line=\"79\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#next-api-og-image%E3%82%92%E4%BD%BF%E3%81%86%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" aria-hidden=\"true\">\x3C/a> next-api-og-imageã使ããã¡ãªãã\x3C/h3>\n\x3Cul data-line=\"81\" class=\"code-line\">\n\x3Cli data-line=\"81\" class=\"code-line\">API Routesãåããªãç°å¢ã§ã¯ä½¿ããªããªãã\x3C/li>\n\x3Cli data-line=\"82\" class=\"code-line\">API Routesã¯AWSã®Lambdaã§å¦çãè¡ãé¢ä¿ä¸ã颿°ã¨é¢é£ãªã½ã¼ã¹ã50MB以å
ã«ããå¿
è¦ãããã\x3Ccode>next-api-og-image\x3C/code>ã¯å
é¨ã§\x3Ccode>chrome-aws-lambda\x3C/code>ã使ã£ã¦ããããã®ã©ã¤ãã©ãªã49.7MB(\x3Ccode>v10.1.0\x3C/code>ã®å ´å)ã§ãéãæ¥æ¬èªãã©ã³ãã¯Webçµç±ã§åå¾ããæ¹æ³ãåããããå¾ãªãã£ããããè±è
ã表示ãããå¯è½æ§ãããã\x3C/li>\n\x3Cli data-line=\"83\" class=\"code-line\">ç»åçæãè² è·ãé«ãå¦çã§ããããã¬ã¹ãã³ã¹ã¾ã§å°ãæéãããã£ã¦ãã¾ããååãªã¯ã¨ã¹ãã®å ´åã¯æ£å¸¸ã«OGPç»åãè¼ããããªãå ´åãããã\x3Cbr />\nï¼2åç®ä»¥éã®ãªã¯ã¨ã¹ãã®å ´åã«ã¯çµæããã£ãã·ã¥ãããããåé¡ãªããªããï¼\x3C/li>\n\x3C/ul>\n\x3Cp data-line=\"86\" class=\"code-line\">ç¾ç¶ã¯ã¨ãããã使ã£ã¦ãããã¨æã£ã¦ãã¾ããããã¡ãªãããã¾ãã¾ãããã®ã§ãããè¯ãæ¹æ³ãæ¢ãã¦ããã¤ããã§ãã\x3Cbr />\nOGPç»åã®ãã¶ã¤ã³ããªã·ã£ã¬ã«ãããã\x3C/p>\n",tags:$R[44]=["Next.js","React"],date:"2022-04-17T15:34:34.954Z"},$R[45]={title:"é¢åãããããNext.jsã§ããã°ãæ§ç¯ãã¦ã¿ã",slug:"start-m
2y-nextjs-blog",excerpt:"èªåã®æè¡ååä¸ã¨å¦ãã ãã¨ã®ã¢ã¦ããããã®å ´ã¨ãã¦ããã°ãã¯ããã¦ã¿ãã\n\nèªåã¯é¢åãããããããã®ã§ãããï¼ãï¼å¹´ããããåå¹´ã«ï¼åãããã®é »åº¦ã§ããã°ãæ§ç¯ãããã¨æã£ã¦ã¯å®æã§ããªãã£ãããè¨äºãæ¸ããªãã£ããã§æ«æãã¦ããã\n\nåãè½ãè¸ã¾ãªãããã«ããç¨åº¦è¨äºæ¸ãããããªç°å¢ãæ§ç¯ã§ããããè¨äºãæ¸ããªããã«ã¹ã¿ã ãã¦å®æãç®æãã¦ããã¨ããæ¹éã«ããã\n è¦ä»¶\næ«æãç¹°ãè¿ããªãããã«ãè¨äºãæ¸ãã³ã¹ãã¯éããªãå°ãããããã\n\nå
·ä½çã«ã¯ä¸è¨ãæºããããã\n\nMarkdownã§æ¸ããã\nããç¨åº¦èªåã§ããã°ãã«ã¹ã¿ãã¤ãºã§ããããã«Reactã§æ¸ãã\nç»åã®æ¿å
¥ãã·ã§ã¼ãã«ããã³ãã³ãä¸çºã§ãããã\ngitã§ç®¡çãã¦mainãã©ã³ãã«pushããããæ¬çªã«åæ \nè¨äºãä½ãã¨ãã«yarnã³ãã³ãã§ãã³ãã¬ã¼ãã使ã§ãã\n\nNext.jsã使ãã¨å¤§ä½æºããããã ã£ãã®ã§ãNext.jsã§æ§ç¯ãããã¨ã«ãã¾ããã\n æ§ç¯\nNext.jsã§ããã°æ§ç¯ããéã«ã¯ãå
¬å¼ã®examplesã«blog-starter-typescriptãããã®ã§ãã®ã¾ã¾ä½¿ãã¾ããã\n\ntailw",contentHtml:"\x3Cp data-line=\"1\" class=\"code-line\">èªåã®æè¡ååä¸ã¨å¦ãã ãã¨ã®ã¢ã¦ããããã®å ´ã¨ãã¦ããã°ãã¯ããã¦ã¿ãã\x3Cbr />\nèªåã¯é¢åãããããããã®ã§ãããï¼ãï¼å¹´ããããåå¹´ã«ï¼åãããã®é »åº¦ã§ããã°ãæ§ç¯ãããã¨æã£ã¦ã¯å®æã§ããªãã£ãããè¨äºãæ¸ããªãã£ããã§æ«æãã¦ããã\x3Cbr />\nåãè½ãè¸ã¾ãªãããã«ããç¨åº¦è¨äºæ¸ãããããªç°å¢ãæ§ç¯ã§ããããè¨äºãæ¸ããªããã«ã¹ã¿ã ãã¦å®æãç®æãã¦ããã¨ããæ¹éã«ããã\x3C/p>\n\x3Ch2 id=\"%E8%A6%81%E4%BB%B6\" data-line=\"5\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E8%A6%81%E4%BB%B6\" aria-hidden=\"true\">\x3C/a> è¦ä»¶\x3C/h2>\n\x3Cp data-line=\"7\" class=\"code-line\">æ«æãç¹°ãè¿ããªãããã«ãè¨äºãæ¸ãã³ã¹ãã¯éããªãå°ãããããã\x3Cbr />\nå
·ä½çã«ã¯ä¸è¨ãæºããããã\x3C/p>\n\x3Cul data-line=\"10\" class=\"code-line\">\n\x3Cli data-line=\"10\" class=\"code-line\">Markdownã§æ¸ããã\x3C/li>\n\x3Cli data-line=\"11\" class=\"code-line\">ããç¨åº¦èªåã§ããã°ãã«ã¹ã¿ãã¤ãºã§ããããã«Reactã§æ¸ãã\x3C/li>\n\x3Cli data-line=\"12\" class=\"code-line\">ç»åã®æ¿å
¥ãã·ã§ã¼ãã«ããã³ãã³ãä¸çºã§ãããã\x3C/li>\n\x3Cli data-line=\"13\" class=\"code-line\">gitã§ç®¡çãã¦mainãã©ã³ãã«pushããããæ¬çªã«åæ \x3C/li>\n\x3Cli data-line=\"14\" class=\"code-line\">è¨äºãä½ãã¨ãã«yarnã³ãã³ãã§ãã³ãã¬ã¼ãã使ã§ãã\x3C/li>\n\x3C/ul>\n\x3Cp data-line=\"16\" class=\"code-line\">Next.jsã使ãã¨å¤§ä½æºããããã ã£ãã®ã§ãNext.jsã§æ§ç¯ãããã¨ã«ãã¾ããã\x3C/p>\n\x3Ch2 id=\"%E6%A7%8B%E7%AF%89\" data-line=\"18\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E6%A7%8B%E7%AF%89\" aria-hidden=\"true\">\x3C/a> æ§ç¯\x3C/h2>\n\x3Cp data-line=\"20\" class=\"code-line\">Next.jsã§ããã°æ§ç¯ããéã«ã¯ãå
¬å¼ã®examplesã«\x3Ccode>blog-starter-typescript\x3C/code>ãããã®ã§ãã®ã¾ã¾ä½¿ãã¾ããã\x3Cbr />\ntailwindcssã§æ§ç¯ããã¦ããã®ãããããããã«ã¹ã¿ãã¤ãºããããã§ãã\x3Cbr style=\"display:none\" />\n\x3Ca href=\"https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript\x3C/a>\x3Ca href=\"https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript\x3C/a>\x3C/p>\n\x3Cp data-line=\"24\" class=\"code-line\">æ§ç¯æã®ãã¼ã¸ã§ã³ã¯ä¸è¨ã®éãã§ãã\x3C/p>\n\x3Ctable data-line=\"25\" class=\"code-line\">\n\x3Cthead data-line=\"25\" class=\"code-line\">\n\x3Ctr data-line=\"25\" class=\"code-line\">\n\x3Cth>Library\x3C/th>\n\x3Cth>Version\x3C/th>\n\x3C/tr>\n\x3C/thead>\n\x3Ctbody data-line=\"27\" class=\"code-line\">\n\x3Ctr data-line=\"27\" class=\"code-line\">\n\x3Ctd>next\x3C/td>\n\x3Ctd>12.1.1\x3C/td>\n\x3C/tr>\n\x3Ctr data-line=\"28\" class=\"code-line\">\n\x3Ctd>zenn-markdown-html\x3C/td>\n\x3Ctd>0.1.108\x3C/td>\n\x3C/tr>\n\x3Ctr data-line=\"29\" class=\"code-line\">\n\x3Ctd>zenn-embed-elements\x3C/td>\n\x3Ctd>0.1.108\x3C/td>\n\x3C/tr>\n\x3Ctr data-line=\"30\" class=\"code-line\">\n\x3Ctd>zenn-content-css\x3C/td>\n\x3Ctd>0.1.108\x3C/td>\n\x3C/tr>\n\x3C/tbody>\n\x3C/table>\n\x3Ch3 id=\"%E8%A8%98%E4%BA%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AA%E3%83%B3%E3%82%B0\" data-line=\"32\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E8%A8%98%E4%BA%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AA%E3%83%B3%E3%82%B0\" aria-hidden=\"true\">\x3C/a> è¨äºãã¼ã¸ã®ã¹ã¿ã¤ãªã³ã°\x3C/h3>\n\x3Cp data-line=\"34\" class=\"code-line\">è¨äºã®ã¹ã¿ã¤ãªã³ã°ã¯æ´ããã®ãæ£ç´ãããé¢åã§ãéå»ã«å®ç§ãç®æãã¦æ«æãããã¨ããã鬼éã\x3Cbr />
2\nãã¤ãä»äºã§ãä¸è©±ã«ãªã£ã¦ããzennãããå
¬éãã¦ããmarkdownãã¼ãµã¼ã©ã¤ãã©ãªããã®ã¾ã¾ä½¿ããã¦ããã ãã¾ããã\x3Cbr />\nãªã³ã¯ãããã°ã«ã¼ãçãªè¡¨ç¤ºã«ãã¦ãããããã¡ããã¡ãå¬ãã...\x3Cbr />\n(ãã ããªã³ã¯å
ã®OGPæ
å ±ãåå¾ããã¨ã³ããã¤ã³ãã¯zennãããç¨æããã¦ãããã®ã«ã¿ãä¹ããã¦ãã¾ã£ã¦ãã¦ãèªåã®ç®¡çä¸ã«ãªãã®ãå°ãæ°ã«ãªã)\x3Cbr />\né©ç¨ã¯ãã¡ãã®è¨äºããã®ã¾ã¾è¡ãã¾ããã\x3C/p>\n\x3Cp data-line=\"40\" class=\"code-line\">\x3Ca href=\"https://zenn.dev/waddy/articles/intro-zenn-markdown\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://zenn.dev/waddy/articles/intro-zenn-markdown\x3C/a>\x3Ca href=\"https://zenn.dev/waddy/articles/intro-zenn-markdown\" style=\"display:none\" target=\"_blank\">https://zenn.dev/waddy/articles/intro-zenn-markdown\x3C/a>\x3C/p>\n\x3Ch3 id=\"front-matter%E9%A0%85%E7%9B%AE%E4%BF%AE%E6%AD%A3\" data-line=\"42\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#front-matter%E9%A0%85%E7%9B%AE%E4%BF%AE%E6%AD%A3\" aria-hidden=\"true\">\x3C/a> front-matteré
ç®ä¿®æ£\x3C/h3>\n\x3Cp data-line=\"44\" class=\"code-line\">Next.jsã® \x3Ccode>blog-starter-typescript\x3C/code> ã§æ§ç¯ããå ´åãè¨äºã®ããã©ã«ãã®front-matterã«ã¯å人ããã°ã§ã¯ä¸è¦ãªãã®ãè¨å®ãé¢åãªé
ç®ããã£ãã
2®ã§èªåãæ¸ããããããã«ã«ã¹ã¿ãã¤ãºããæçµçã«ã¯ä¸è¨ã®ããã«ãªãã¾ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"46\">\x3Cspan class=\"line\">\x3Cspan>---\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan>title: \"é¢åãããããNext.jsã§ããã°ãæ§ç¯ãã¦ã¿ã\"\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan>coverImage: ''\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan>date: '2022-04-02T07:04:11.054Z'\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan>tags:\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan> - 'Next.js'\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan> - 'React'\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan>---\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan>\x3C/span>\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Cp data-line=\"57\" class=\"code-line\">ä¸è¦§ç»é¢ã«è¡¨ç¤ºãããè¨äºã®èª¬ææç« ãå
¥ããé
ç®ã§ãã\x3Ccode>excerpt\x3C/code>ã¯ãæ¬æã®innerTextãå
é 500æåååãåºãããã«ãã¾ããã\x3C/p>\n\x3Cp data-line=\"59\" class=\"code-line\">\x3Cimg src=\"/assets/posts/start-my-nextjs-blog/2022-04-03-13-53-15.png\" alt=\"\" class=\"md-img\" loading=\"lazy\" />\x3Cbr />\n\x3Cem>ã¿ã¤ãã«ä¸ã®æåã\x3Ccode>excerpt\x3C/code>\x3C/em>\x3C/p>\n\x3Cp data-line=\"62\" class=\"code-line\">è¨äºæ¬æã®markdownããHTMLã¸ã®å¤æå¦çã¯ãããã©ã«ãã§ã¯è¨äºã®ã³ã³ãã¼ãã³ãå
ã§å¦çãã¦ãã¾ããããè¨äºå´ã§markdownã®ã¾ã¾æååãæä½ããããªããã¨ã¯ä»å¾ãªãã¨æãããããã\x3Ccode>lib/api.ts\x3C/code>å
ã«ç§»åããã¾ãããããã¦å¤æãããHTMLæååã\x3Ccode>node-html-parser\x3C/code>ã§parseããæ¬æã®innerTextãå
é ãã500æååãåºãããã®ã\x3Ccode>excerpt\x3C/code>ã¨ãã¦è¡¨ç¤ºããããã«ãã¦ãã¾ãã\x3C/p>\n\x3Ch3 id=\"%E8%A8%98%E4%BA%8B%E3%81%B8%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%AE%E6%8C%BF%E5%85%A5\" data-line=\"64\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E8%A8%98%E4%BA%8B%E3%81%B8%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%AE%E6%8C%BF%E5%85%A5\" aria-hidden=\"true\">\x3C/a> è¨äºã¸ã®ç»åã®æ¿å
¥\x3C/h3>\n\x3Cp data-line=\"66\" class=\"code-line\">ã·ã§ã¼ãã«ããã³ãã³ãã使ã£ãç»åã®æ¿å
¥ã¯vscodeã®PasteImageãã©ã°ã¤ã³ã使ãã°ç°¡åã«å®ç¾ã§ãã¾ããã\x3Cbr />\n\x3Ccode>blog-starter-typescript\x3C/code> ã§ã®è¨äºã®ä¿åå ´æã¯ \x3Ccode>public/assets/blog/{è¨äºslug}/{ç»åå.jpg}\x3C/code>
2ã§ä¿åããã¦ããã®ã§ã\x3Ccode>option + command + V\x3C/code> ã§ç»åããã¡ãã«ä¿åããããã«ä¸è¨ã®ããã«è¨å®ãã¾ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cdiv class=\"code-block-filename-container\">\x3Cspan class=\"code-block-filename\">.vscode/settings.json\x3C/span>\x3C/div>\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"69\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">{\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"pasteImage.path\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"${projectRoot}/public/assets/blog/${currentFileNameWithoutExt}\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"pasteImage.basePath\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"${projectRoot}/public\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"pasteImage.forceUnixStyleSeparator\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#79B8FF\">true\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"pasteImage.prefix\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"/\"\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">}\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Ch3 id=\"%E6%96%B0%E8%A6%8F%E8%A8%98%E4%BA%8B%E8%BF%BD%E5%8A%A0%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E5%87%A6%E7%90%86%E5%AE%9F%E8%A3%85\" data-line=\"78\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E6%96%B0%E8%A6%8F%E8%A8%98%E4%BA%8B%E8%BF%BD%E5%8A%A0%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E5%87%A6%E7%90%86%E5%AE%9F%E8%A3%85\" aria-hidden=\"true\">\x3C/a> æ°è¦è¨äºè¿½å ã®ã³ãã³ãå¦çå®è£
\x3C/h3>\n\x3Cp data-line=\"80\" class=\"code-line\">\x3Ccode>yarn new:post {slug}\x3C/code> ã§è¨äºã®ãã¡ã¤ã«ã使ãããã®ã§ãå®è£
ãã¦ã¿ãã\x3C/p>\n\x3Cp data-line=\"82\" class=\"code-line\">æ°è¦è¨äºä½æã³ãã³ãã®å
容ã®å¦çã \x3Ccode>commands/new-post.js\x3C/code> ã«å®è£
ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cdiv class=\"code-block-filename-container\">\x3Cspan class=\"code-block-filename\">commands/new-post.js\x3C/span>\x3C/div>\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"84\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> fs\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> require\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'fs-extra'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">)\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> arg\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> require\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'arg'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">)\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> path\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> require\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'path'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">)\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">function\x3C/span>\x3Cspan style=\"color:#B392F0\"> getWorkingPath\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#FFAB70\">
2pathFromWorkingDir\x3C/span>\x3Cspan style=\"color:#E1E4E8\">) {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> if\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> (\x3C/span>\x3Cspan style=\"color:#9ECBFF\">/\x3C/span>\x3Cspan style=\"color:#85E89D;font-weight:bold\">\\.\\.\x3C/span>\x3Cspan style=\"color:#9ECBFF\">/\x3C/span>\x3Cspan style=\"color:#E1E4E8\">.\x3C/span>\x3Cspan style=\"color:#B392F0\">test\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(pathFromWorkingDir)) {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> console.\x3C/span>\x3Cspan style=\"color:#B392F0\">error\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> 'åå¾ãããã¡ã¤ã«/ãã£ã¬ã¯ããªã®ååã«ä¸æ£ãªæååãå«ã¾ãã¦ããããå¦çãçµäºãã¾ã'\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> );\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> process.\x3C/span>\x3Cspan style=\"color:#B392F0\">exit\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#79B8FF\">1\x3C/span>\x3Cspan style=\"color:#E1E4E8\">);\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> }\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> return\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> path.\x3C/span>\x3Cspan style=\"color:#B392F0\">join\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(process.\x3C/span>\x3Cspan style=\"color:#B392F0\">cwd\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(), pathFromWorkingDir.\x3C/span>\x3Cspan style=\"color:#B392F0\">replace\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">/\x3C/span>\x3Cspan style=\"color:#F97583\">^\x3C/span>\x3Cspan style=\"color:#85E89D;font-weight:bold\">\\/\x3C/span>\x3Cspan style=\"color:#9ECBFF\">/\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, \x3C/span>\x3Cspan style=\"color:#9ECBFF\">''\x3C/span>\x3Cspan style=\"color:#E1E4E8\">));\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">}\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">function\x3C/span>\x3Cspan style=\"color:#B392F0\"> generateFileIfNotExist\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#FFAB70\">fullpath\x3C/span>\x3Cspan style=\"color:#E1E4E8\">, \x3C/span>\x3Cspan style=\"color:#FFAB70\">content\x3C/span>\x3Cspan style=\"color:#E1E4E8\">) {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> fs.\x3C/span>\x3Cspan style=\"color:#B392F0\">outputFileSync\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> fullpath,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> content,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> { flag: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">'wx'\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> }\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> );\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">}\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> args\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> arg\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> {},\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> permissive: \x3C/span>\x3Cspan style=\"color:#79B8FF\">true\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> }\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">);\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">
2const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> slug\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> args._[\x3C/span>\x3Cspan style=\"color:#79B8FF\">0\x3C/span>\x3Cspan style=\"color:#E1E4E8\">]\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> fileName\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> `${\x3C/span>\x3Cspan style=\"color:#E1E4E8\">slug\x3C/span>\x3Cspan style=\"color:#9ECBFF\">}.md`\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> relativeFilePath\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> `_posts/${\x3C/span>\x3Cspan style=\"color:#E1E4E8\">fileName\x3C/span>\x3Cspan style=\"color:#9ECBFF\">}`\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> fullFilepath\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#B392F0\"> getWorkingPath\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(relativeFilePath)\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> today\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3Cspan style=\"color:#F97583\"> new\x3C/span>\x3Cspan style=\"color:#B392F0\"> Date\x3C/span>\x3Cspan style=\"color:#E1E4E8\">()\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">const\x3C/span>\x3Cspan style=\"color:#79B8FF\"> fileBody\x3C/span>\x3Cspan style=\"color:#F97583\"> =\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> [\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> '---'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> `title: \"\"`\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> `coverImage: ''`\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> `date: '${\x3C/span>\x3Cspan style=\"color:#E1E4E8\">today\x3C/span>\x3Cspan style=\"color:#9ECBFF\">.\x3C/span>\x3Cspan style=\"color:#B392F0\">toISOString\x3C/span>\x3Cspan style=\"color:#9ECBFF\">()\x3C/span>\x3Cspan style=\"color:#9ECBFF\">}'`\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> `ogImage: ''`\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> 'tags:'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> ` - 'example'`\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> '---'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> ].\x3C/span>\x3Cspan style=\"color:#B392F0\">join\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'\x3C/span>\x3Cspan style=\"color:#79B8FF\">\\n\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">) \x3C/span>\x3Cspan style=\"color:#F97583\">+\x3C/span>\x3Cspan style=\"color:#9ECBFF\"> '\x3C/span>\x3Cspan style=\"color:#79B8FF\">\\n\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\">try\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#B392F0\"> generateFileIfNotExist\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(fullFilepath, fileBody);\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> console.\x3C/span>\x3Cspan style=\"color:#B392F0\">
2log\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(relativeFilePath);\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">} \x3C/span>\x3Cspan style=\"color:#F97583\">catch\x3C/span>\x3Cspan style=\"color:#E1E4E8\"> (err) {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> console.\x3C/span>\x3Cspan style=\"color:#B392F0\">error\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(\x3C/span>\x3Cspan style=\"color:#9ECBFF\">'è¨äºã®ãã¡ã¤ã«ä½ææã«ã¨ã©ã¼ãçºçãã¾ãã'\x3C/span>\x3Cspan style=\"color:#E1E4E8\">);\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> console.\x3C/span>\x3Cspan style=\"color:#B392F0\">error\x3C/span>\x3Cspan style=\"color:#E1E4E8\">(err);\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">}\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Cp data-line=\"141\" class=\"code-line\">å®è£
ããå¦çã \x3Ccode>yarn\x3C/code> å´ã§å¼ã³åºããããã« \x3Ccode>scripts\x3C/code> ã«è¿½å ããã\x3C/p>\n\x3Cdiv class=\"code-block-container\">\x3Cdiv class=\"code-block-filename-container\">\x3Cspan class=\"code-block-filename\">package.json\x3C/span>\x3C/div>\x3Cpre class=\"shiki github-dark\" style=\"background-color:#151e2c;color:#e1e4e8\">\x3Ccode class=\"code-line\" data-line=\"143\">\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">{\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"private\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#79B8FF\">true\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"scripts\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">
2: {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"dev\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"next\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"build\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"next build\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"start\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"next start\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"typecheck\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"tsc\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">,\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">+ \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"new:post\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">: \x3C/span>\x3Cspan style=\"color:#9ECBFF\">\"node commands/new-post.js\"\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> },\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#9ECBFF\"> \"dependencies\"\x3C/span>\x3Cspan style=\"color:#E1E4E8\">
2: {\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> ...\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\"> },\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#F97583\"> ...\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3Cspan style=\"color:#E1E4E8\">}\x3C/span>\x3C/span>\n\x3Cspan class=\"line\">\x3C/span>\x3C/code>\x3C/pre>\x3C/div>\x3Ch2 id=\"%E4%BB%8A%E5%BE%8C%E6%AC%B2%E3%81%97%E3%81%84%E6%A9%9F%E8%83%BD\" data-line=\"160\" class=\"code-line\">\x3Ca class=\"header-anchor-link\" href=\"#%E4%BB%8A%E5%BE%8C%E6%AC%B2%E3%81%97%E3%81%84%E6%A9%9F%E8%83%BD\" aria-hidden=\"true\">\x3C/a> ä»å¾æ¬²ããæ©è½\x3C/h2>\n\x3Cp data-line=\"162\" class=\"code-line\">ç¾å¨ã¯è¨äºæ°ãå°ãªãã®ã§åé¡ãªãã®ã§ãããå°æ¥çã«ã¯ä¸è¨ã®ãããªè¨äºãæ¤ç´¢ããæ©è½ãä½ãã¨ãã便å©ã«ãªãããã\x3C/p>\n\x3Cul data-line=\"164\" class=\"code-line\">\n\x3Cli data-line=\"164\" class=\"code-line\">ãã¼ã¸ãã¼ã·ã§ã³æ©è½\x3C/li>\n\x3Cli data-line=\"165\" class=\"code-line\">ã¿ã°æ¤ç´¢æ©è½\x3C/li>\n\x3Cli data-line=\"166\" class=\"code-line\">å
¨ææ¤ç´¢æ©è½\x3C/li>\n\x3C/ul>\n",tags:$R[46]=["Next.js","React"],date:"2022-04-02T07:04:11.054Z"}],ssr:!0}],lastMatchId:"�posts��posts�"})($R["tsr"]);$_TSR.e();document.currentScript.remove()</script>
2<script type="module" async="">import("/assets/main-BTvl8QpF.js")</script>
2</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.