Read on Twitter
／
Next.js初の世界規模カンファレンス
10月に無料オンライン開催決定
初心者から上級者まで大歓迎！
＼
登録はこちらから。GitHub認証すると自分オリジナルのチケット画像を生成できます
https://nextjs.org/conf/tickets/chibicode
当ページの実装の大部分を担当しました。皆様のチケット番号教えてください
Next.js初の世界規模カンファレンス
10月に無料オンライン開催決定
初心者から上級者まで大歓迎！
＼
登録はこちらから。GitHub認証すると自分オリジナルのチケット画像を生成できます
https://nextjs.org/conf/tickets/chibicode
当ページの実装の大部分を担当しました。皆様のチケット番号教えてください
Next.jsカンファレンスページ実装のこだわりポイントその
チケットの画像がポインタの動きに合わせて傾くのですが、これにはVanilla-tilt.jsというライブラリを使用しています
https://micku7zu.github.io/vanilla-tilt.js/
↓ソースコード
https://github.com/vercel/next-site/blob/006456536137fb775c731f4e92c5edb4fb5f02a0/components/conf/ticket.tsx#L29-L38
↓私のチケットページ
https://nextjs.org/conf/tickets/chibicode
Next.jsカンファレンスページ実装のこだわりポイントその
シェア用URLをコピーする機能にはiOSのSafariでも最近使えるようになったブラウザAPIを利用しています。
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
コードはこれだけ↓
navigator.clipboard.writeText(url)
昔はFlashを使っていたのが懐かしいですね…
Next.jsカンファレンスページ実装のこだわりポイントその
各チケットページ ( https://nextjs.org/conf/tickets/chibicode) にはNext.jsのインクリメンタル静的生成機能を利用しているので高速です。
↓ソース
https://github.com/vercel/next-site/blob/006456536137fb775c731f4e92c5edb4fb5f02a0/pages/conf/tickets/%5Busername%5D.tsx#L77-L82
↓unstable_blockingは最近canary版に追加されました
https://github.com/vercel/next.js/pull/15672
Next.jsカンファレンスページ実装のこだわりポイントその
チケットOGP画像の生成方法
・チケットのみ表示するページを作成
・そのページをPuppeteerでスクショするサーバレス関数をNodeで書く
・関数を @vercelにデプロイし実行結果はCDNにキャッシュ
↓を流用してます
https://github.com/vercel/og-image
Next.jsカンファレンスページ実装のこだわりポイントその
リンク等にCSSで :hover を使うとスマホでタップ時に遅延しますよね。
↓のPostCSSプラグインを導入すれば、自動で全てのhover記述がhover: hoverというmediaクエリで囲まれ、スマホでhoverを無効化できます！
https://github.com/saulhardman/postcss-hover-media-feature
Next.jsカンファレンスページ実装のこだわりポイントその
当ページは @vercelのデザイン責任者で正体不明?のデザイナー、Evil Rabbit @evilrabbit_ が設計しました。
このハンドルネームは直訳すると「悪のウサギ」で、チケット番号も悪魔の数字である666を取得したそう。
(とても優しい方です)
