vercel/virtual-event-starter-kit の実装を読んでみた

vercel/virtual-event-starter-kit: Open source demo that Next.js developers can clone, deploy, and fully customize for events. は Vercel が公開したオンラインイベントのデモサイトです。このサイトの実装には現在の Web 開発のプラクティスが詰まっていると考えて読んでみました。

普段は Nuxt.js を使っていて、Next.js については何も知らない人です。

DatoCMS

https://github.com/vercel/virtual-event-starter-kit/blob/main/styles/global.css#L28-L59
SaaS の変数じゃなくて CSS 変数を使っている
IE11 がなき現代なら良さそう
色だけじゃなくて余白に関する変数も定義しているの良さそう

SSRProvider/OverlayProvider
- https://github.com/vercel/virtual-event-starter-kit/blob/main/pages/_app.tsx で SSRProvider と OverlayProvider を設定している
- リポジトリは https://github.com/souporserious/react-aria ぽいけど、今は Adobe の方に移った？
  - Adobe: https://react-spectrum.adobe.com/react-aria/index.html
- SSRProvider
  - https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/ssr/src/SSRProvider.tsx
  - SSR 時と CSR 時に共通の ID を使うために必要なものっぽいけど、その ID が何のためにあるのかわからん
- OverlayProvider
  - https://github.com/adobe/react-spectrum/blob/d6696e3192/packages/%40react-aria/overlays/src/useModal.tsx
  - modal のために必要な provider
  - modal が 1 つでも開いていると aria-hidden を設定する機能がある
useButton
- https://react-spectrum.adobe.com/react-aria/useButton.html
- button タグに設定できる attr のうちアクセシビリティ関連のものを生成してくれるやつ
  - https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/button/src/useButton.ts#L91-L108

Reach UI
アクセシビリティ周りを整えてくれるライブラリ？
SkipNavLink
- https://github.com/reach/reach-ui/blob/main/packages/skip-nav/src/index.tsx
- WebAIM: “Skip Navigation” Links
- スクリーンリーダーで読むときに画面上部のナビゲーションリンクを飛ばして、メインコンテンツから選択されるようにするもの

https://github.com/vercel/virtual-event-starter-kit/blob/37449e5fe98ce94a4b57652816e6e6f9e0453fdf/components/page.tsx
head タグの中身を実装しているコンポーネント
抑えておきたいタグが並んでいる気がする
Nuxt.js だと layouts/default.vue の meta に書く内容だけど、Next.js では別のコンポーネントとして共通化するのか

https://github.com/vercel/virtual-event-starter-kit/blob/151a635c47/.eslintrc.json
plugin:@typescript-eslint/recommended-requiring-type-checking も指定している