TSKaigi 2024 のトークと、登壇者がスライドを公開していればその URL を記載しています。 トラックごとのトーク、および登壇者情報は公式サイトに詳しく掲載されているので、そちらをご確認ください。

preload パターンについて preload パターンは、Next.js 公式ドキュメントの Data Fetching Patterns and Best Practices 内で紹介されている[1]、Sequential data fetching によるウォーターフォールを回避するための 1 手法です。 使い所 Sequential data fetching が発生するようなケースとその解決方法はいくつかあるのですが、preload パターンの典型的な使い所と言えるのは以下のようなケースです。 例は、認証されているユーザーに対してのみ、課金プランを表示するようなページです。 import { redirect } from 'next/navigation'; import { getIsAuthenticated } from '@/lib/auth'; export def

はじめに Jest でも同じかもしれませんが、検証していないためあくまで Vitest についてということで書いています。 vi.mock の呼び出しは巻き上げられる 最もオーソドックスなモック手法である vi.mock ですが、ファイル内での記載位置は関係なく、実行時に Vitest によって hoist され、テストファイルの先頭で実行されます。 （厳密には、vi.mock が先頭で実行された後、callback である factory 関数が実行されるのは対象の参照時のようです） 例として以下のようなテストについて、 import { render } from '@testing-library/react'; import { UserProfile } from './user-profile'; vi.mock('./use-user-query', () => ({ use

はじめに Vercel Ship、アツい発表が続いていますね。 特に初日の Storage は、KV、Postgres、Blob と 3 つのプロダクトが公開され、「とりあえず何か試したい！」「今の構成のあのコンポーネントは Vercel で済ませられるようになりそう！」となった方も多いんじゃないでしょうか。 Vercel で何かしら関数を動かすとなった時に一番最初に思い付かれがちな選択肢は、とりあえず create-next-app して pages/api/hello.ts を作成して... というあれですが、Vercel を使ってみたい人（またはプロジェクト）のうち全員が React を使っているわけではありませんし、そもそもフロントエンド無しで完結するユースケースも多いはずです。 Vercel の Serverless Functions は（ご存知の方も多いと思いますが）実際には

はじめに 2023 年 5 月 4 日時点の情報で執筆しています。 例によってやってみた記事です。公式ドキュメント通りで動かない部分があったので記事を書きましたが、基本公式で事足りるので触る場合はそちらを参照ください。 Contentlayer について Markdown 形式のデータを型の付いた JSON として扱うためのツールです。 マークダウン部分の HTML への変形は remark、HTML の加工装飾は rehype がそれぞれ担っていて、合わせて frontmatter のパースもしてくれます。 具体的には、以下のようなファイルを