$ ryokkkke.com/Blog

Next.js Conf 2020に参加した▲

更新日：2020/10/31

概要

Next.js Conf に参加したのでレポートです！
全体感がわかるように、開催前からまるっと自分が見えていた景色を書いていきます。

技術的な細かい話はなく、カンファレンス全体の雰囲気が掴める内容です。

Next.js Conf について

アナウンス

わかりやすいようにタイトルには 2020 とか書きましたが、Next.js Conf は今回が初めての開催です。

8/25 のこのツイートが最初のアナウンスでした。

こんな時世なのでもちろん最初からオンライン開催です。

Vercel は本当にいつもオシャレを追求しているので、サイトにはほとんど情報がなくミステリアスなそれでいてワクワクさせるような雰囲気でした。

カンファレンス用のサイトができてからは、Next のドキュメントページにも目立つリンクが貼られていました。

参加

参加予約は、公式サイトからメールアドレスを登録する方式。

↑ 最初のチケットを Vercel CEO の Guillermo Rauch 氏が取っています。

and your careers

Job Oppotunities としての側面も押し出しています。

↑9/1 の時点で参加者が 25000 人突破。

↑（9/17）35000 人突破。登壇者は 9/21 まで募集中。

チケットゲット

自分は 9/22 にチケットゲット。

メールアドレスを登録すると、自分用のチケットが発行されます。

URL も発行されるので、シェアしやすい作りになっていました。

↑Discord にシェアしてる様子。

開催までの情報展開

↑ （10/5）ロゴ入りマグカップ、オシャレ。

↑ （10/13）強気 & オシャレな盛り上げ

おおよそ開催一週間前の 10/20 に、今までほとんど公開されていなかった実際の情報がオープンに。

時間の発表（日本時間で 10/28 午前 1 時〜午前 7 時）

Event is 8:45am Pacific to ~3pm Pacific (4pm-10pm GMT). Add to your calendar for a memorable day/evening together

↑ 気づくとカレンダーに入っている親切設計。

そして、公式の Discord サーバの公開。

Live chat and Q&A will happen via the official Next.js Community Discord. Join now

実際入ってみると、既にこの時点でかなりの人数が参加しており、それなりのスピードで会話が始まっていました。

The Next.js Discord server is moderated by volunteers from the Community - we’re truly grateful! The current plan is to keep it running beyond the event, if there’s demand.

↑ さらに、この Discord サーバはカンファレンスだけでなく、その後も運営していきたいという方針

この時点でカンファレンスの参加者は 60000 人超え。

↑ 4 日前

開始

開催時刻は日本時間の 25 時から 6 時間というスケジュールだったので、仕事を終えて 24 時くらいまで仮眠とりつつ待機。

まず構造として、Next.js Conf には 4 つのステージが用意されていました。
上から順に N, E, X, T の 4 つです。

カンファレンスのページの中にステージごとのページが用意され、それぞれそこに YouTube のライブが埋め込みで表示されている状態です。

1 時になると 2 分間のカウントダウン動画が再生されました。これはスクショ撮り忘れましたが、専用に用意されたこれまたオシャレなカウントダウンムービーでした。

Vercel CEO による最初のキーノート: Next.js 10

カウントダウンムービーが終わると、最初のキーノートがスタート。
内容は、Vercel CEO Guillermo Rauch 氏による Next.js 10 の発表です。

Next.js 10 の機能のメイントピックは

  • Image Optimaization
    • 画像を最適化する。ロードのタイミングの調整から、画像フォーマットの変換までおよそ画像配信時にやってほしいことをまるっと持ってくれる画像周辺機能の実装。
  • Internationalized Routing
    • i18n のための機能の実装。
  • Analytics
    • Web Vitals を基本とした Web サイトのパフォーマンスチューニングのための機能の実装。

の 3 つでした。
（細かい話は別の場所で。）

https://nextjs.org/blog/next-10

さらに、EC へのサポートを強化していくという Next.js Commerce の発表。

今回の Next.js Conf、メインのトピックはなんと言っても EC でした。
上記の Next10 の 3 つの機能も、基本的にどの Web サイトにも必要な要素であるのはもちろんですが、全て大量の商品（つまり大量のコンテンツ、ページ）を扱う EC サイトの開発にとって非常に効果を発揮する機能です。

今まで Next が特定のユースケースについて特別なサポートをするみたいな話は無かったと思いますが、ここに来て EC へのプッシュが非常に強い印象を受けました。
スポンサーとして BigCommerce が入っているのは因果関係で言うと結果な気がします。つまり、元々 Vercel としてこっち方向に向かう方針はあったんでしょうね、わからんけど。

ちなみに、このキーノート開始時点では GitHub 上で既にメジャーバージョン 10 のタグができていて、npm 上での publish はまだな感じでした。
開始してからちょっとして npm にも publish されていました。

それぞれのセッション開始

自分が聞いたセッションは

  1. When Not to Use Next.js by Jeff Escalante – Next.js Conf
  2. CSR, SSR, SSG, ISR and OMG.WTF?BBQ! by Ahmad Awais – Next.js Conf
  3. Next.js: A Framework For Frameworks by Chris Ball – Next.js Conf
  4. Inside Framer Motion’s Layout Animations by Matt Perry – Next.js Conf
  5. The X in MDX by Rodrigo Pombo – Next.js Conf
  6. WebAssembly Zone by Daniel Lauzon – Next.js Conf
  7. Blitz.js — Fullstack Framework for Next.js by Brandon Bayer – Next.js Conf

辺りです。
休憩が一切なく全セッション途切れることなく進むのでかなり忙しい感じでした。

ただオンライン開催の良いところは、全てのステージをブラウザのタブで開き、切り替えながら動画は全部見れることですね。
画面 4 つに分ける感じで表示すれば同時に全部見ることも可能。

スライドの雰囲気でどんなこと話してるのか掴むのはとてもやりやすい状況でした。

全セッションの総括

セッションの総括としては、全体的に、真新しいことというよりは現状の自社の紹介だったり自社サービスの紹介の内容が多めでした。
たまに全く Next.js 関係ない話もあったり…w

Discord

カンファレンスについてのチャンネルから、たくさんついているスポンサー企業ごとのチャンネルまで色んな会話が繰り広げられていました。
自分が入ったときは 600 人くらいでしたが、今（2020/10/29）見ると 2600 人くらいになっています。

また前述の通り採用の文脈の押し出しもあったので、各社ごとに会社名-jobsなチャンネルが作られていて、そこで求人のやりとりもされていました。

実際にカンファレンス中は、4 つあるステージごとのチャンネルが作られ、それぞれのステージの内容について事務連絡から質問、感想などなどこれまたたくさんの会話がなされていました。

（今見るとカンファレンス用のチャンネルは全て消えていました）

前述の通り今後もこのサーバを活用していく方針のようなので、Next.js をウォッチしていきたい方は参加すると良いと思います！

Next.js Conf 限定パーカー

YouTube の description に /give という URL が貼られていて、キーノートでもめっちゃさらっと一言くらい触れられたくらいだったんですが、Next.js 関連アイテムが発売されています。
特に、Next.js Conf 開催日限定のパーカーがあったので、とりあえず購入しておきました。

今見ると、その時公開されていなかった商品もここから辿れるようになっています（右側）。

パーカーの方は

こんな感じ。
安くはないなあと思いつつ、プロダクトへのお布施でもあるし、最近全く服買ってないしいっか。

購入画面で電話番号入れるようになっていたので入力すると

SMS が到着。

Only available today at this conference!

とのこと。

でこれ面白いのが、電話番号入れる時に国番号を入れるので購入者の国が分かるわけですが、パーカーの柄をよく見ると…

いや日本語 www

これ実際の商品がどうなるのかわからないんですが、やっぱりわざわざこう出るってことはちゃんと国ごとの言語で書かれたものをプリントしてくれるんじゃないでしょうか w

期待して待ちます 😇

雑多な所感

Next.js について

State Of JS の 2019 年の結果で Next.js は利用者・ポジティブ意見共に増加傾向でしたが、この傾向は 2020 年も変わらなかったと思います。

そして Vercel 社のガチ度合いや他のフレームワーク状況を鑑みても、直近数年で Next.js はより伸びていくんでしょう。

next/image 、実際にこのページでも既に使用していますが、慣れたらこれ無しで開発できなくなるんじゃないでしょうか、便利すぎる w
足腰弱りそうな気もしますが、作るプロダクトに集中できるという意味でも Next は使っていて本当に気持ちが良いので、とりあえずは Next でいろいろ書いていこうな〜という気持ちです。

数年前の変化がヤバかった時代と比べるとある程度は落ち着いたと思いますが、とはいえやっぱりフロントはその性質上、新しいことを試しやすいので、今後もいっぱい新しい流れが出てくると思われます。
そのキャッチアップは常にしておきたいですね。

Vercel について

本当に Vercel は組織として色々秀逸だなあという印象を改めて感じました。

  • 当然、前提にある Next.js のフレームワークとしての強さ
    • 非常に使いやすく今となっては React でちゃんと Web サイト作るならとりあえず使う、レベルのフレームワークに。
  • Vercel ホスティングサービスへの誘導
    • Next.js は実質 Vercel ホスティングの SDK に。
      • OSS である Next が流行れば流行るほど Vercel でのデプロイも増える構造が構築されている。
      • ホスティングサービスとしては Amplify も似たような感じになっている（ホスティング + フレームワーク）が、明らかにフロントエンドでの存在感、シナジーの強さは Vercel + Next の方が上。
    • マネタイズポイントであるホスティングサービス
      • now 時代が長かったが、そこからの蓄積はどれくらいあるんだろう。
        • now 時代のホスティングの趣旨は今とは違った記憶。
        • 名前の通り、設定いらずで"速攻"Web ページをデプロイできる、みたいな。
      • Netlify は now 時代から存在していたが、そこからのホスティングサービスとしての追い上げがすごい。
        • ホスティングサービスとしての売り上げの実際はわからないが、Next.js（及び Vercel 社）の存在感が圧倒的なので、今後も伸びていくと予想される。
        • ちなみに純粋に競合っぽい Netlify も Next.js Conf のスポンサーに入っていて、Discord のチャンネルもある。
  • 組織ブランディング
    • 洗練されたトンマナ
    • zeit -> Vercel 辺りからやたらとデザインの尖りを感じる
      • ロゴ変更のための動画をわざわざ作っていたのが印象的。
      • Next Conf 関連でも都度オシャレ感のあるショートムービーを公開していた。
      • zeit 時代のコンテンツをあまり見てこなかったので、実際の変化がどんな感じだったのかは気になる。
    • シリーズ A で 21 億調達してるので、そこで採用も一気に加速したのでは。
  • コミュニティ活性化 & ロイヤリティ向上施策の秀逸さ

カンファレンス参加について

今回自分は前所属チームのフロントのメンバーで Discord のボイスチャット繋ぎながら見ましたが、これは良いなと思いました。

  • 楽しい
  • 自分に無い視点の感想が聞けるので知見も議論も広がる

これ、リアルで実際の会場があるカンファレンスだとリアルタイムでちゃんとした話ってそこまで自由にできないと思うので、オンラインならではの良い体験だったと思います。
（もちろんリアルの会場ならではの良さもありますが）

おしまい

Next.js Conf の様子と所感でした ▲
今後も Next.js をメインに使いつつ、いい感じに Web 開発していきたいですね 🚀