はじめに 普段React・Next.jsを用いた開発に際して、UIコンポーネントを作成する際にReact.FCやJSX.Element、ReactNodeなどの"要素やコンポーネントに関する型"を使用する場面が多々あるかなと思います。 昨今のReactコンポーネント開発において、実際には要素やコンポーネントの型を「何を使うか」をあまり意識しないでもちゃんと開発できてしまいます。とはいえ、それぞれの型には微妙に異なる特徴や特性がありますので、今回はよく見かける以下の四つの型について、それぞれの違いや特性を紹介していきたいと思います。 JSX.Element ReactElement ReactNode React.FC

はじめに タイトルで大袈裟にZero API Web Applicationという名前をつけてしまいましたが、要するにNext.jsのversion13.4のServer ActionとReact Server Componentを活用してAPIを作らない・叩かないWeb Applicationを開発するというものです。 今回は趣味で作った麻雀のゲームを例に、Next.js@13.4でAPI要らずなアプリケーション開発及び、開発で得た知見を紹介できたらと思います。 補足ですが、今回開発したアプリケーションの概要としては、麻雀のさまざまな局面に応じて「あなたならどの牌を切る？」というアンケート型のゲームです。 話すこと 今回以下の二点に絞って知見を共有できたらと思います。 RSCとserver actionsでZero APIの実現 ファイルベースのOGP・favicon 成果物とその構成

はじめに 先日のNext.jsのver13.4の発表でApp Routerがstableになり、まだあまり普及していませんが、React Server Componentが今後本格的に広まっていきそうですね。 React Srever Componentの登場により、Reactのレンダリングプロセスは以前のそれとは異なるものにりました。 今回は、そんなReact Server Componentのレンダリングプロセスをざっくり解説していきます。

はじめに 先日(2023/5/1)にVercelの新機能・サービスを発表するビッグイベント 『 Vercel Ship 』 が開催されました。 Next.jsやVercelの激アツな発表がたくさんあり、非常に大きな盛り上がりを見せているように感じます。 今回は、最近社内でも活用されているISRという技術を支えるstale-while-revalidateに触れつつ、Vercel(with Next.js)のキャッシュについて、最低限知っておきたい知見について共有できたらなと思います。 Vercelのインフラストラクチャ概要 Vercel Edge Network を使用すると、顧客の近くにコンテンツを保存し、データに近いリージョンでコンピューティングを実行できるため、待ち時間が短縮され、エンドユーザーのパフォーマンスが向上します。 エッジ ネットワークは、コンテンツ配信ネットワーク (CD

はじめに GWに入り、5日連続のVercelによる新機能の発表が始まりました。早速初日(2023 5/1)からすさまじい機能の発表がありました。 初日に発表されたのは、以下の三つのStorageサービスです。 Vercel Postgres Vercel KV Vercel Blob 今回はこの中のVercel Postgresを実際に使いながら、ClientからServerまで網羅しためっちゃ簡易的なフルスタックなアプリケーションを、実用性の側面も加味してPrisma + Next.jsで作っていこうと思います。

はじめに 最近Denoをよく触っており、DenoのSSRフレームワークであるFreshのミドルウェア・キャッシュについて調べている際にブラウザキャッシュのEtagヘッダが使用されており、気になったのでブラウザキャッシュの仕組みについて調べてみました。 Etagの正体 Etagとは、ブラウザキャッシュの仕組みの中で使用されるHTTPレスポンスヘッダーでリソースの特定のバージョンに関する識別子のことです。 Etagがあることでウェブサーバーは、コンテンツが変更されていない場合はレスポンス全体を再送する必要がないので、キャッシュがより効率的になる。 ブラウザキャッシュの設定について ブラウザキャッシュを設定する際に必要なHTTPレスポンスヘッダーはEtagを含めて以下の通りです。 Expiresヘッダー Cache-Controlヘッダー Last-Modifiedヘッダー Etagヘッダー そ