ギレルモ・ローチとのスマッシングポッドキャストエピソード23：Next.jsとは何ですか？

今日はNext.jsについて話します。 それは何ですか、そしてそれは私たちのWeb開発ワークフローのどこに適合するでしょうか？ 共同制作者のギレルモ・ローチに話を聞いて調べました。

メモを表示

• Twitterのギレルモ・ローチ
• Next.js

毎週の更新

• 「ReactでプロップとPropTypeをマスターする」
  デビッド・アデニー
• 「ブラッドバリー・トンプソンによるインスピレーションを得たデザインの決定：グラフィックデザインの芸術」
  アンディ・クラーク
• 「Flask、GoogleのクラウドSQL、AppEngineを使用したAPIのセットアップ」
  WoleOyekanmi著
• 「IonicReactのフォームと検証」
  ジェリー・ナビ
• 「クライアントがデザインを通じてより多くの被リンクを取得できるようにする方法」
  スザンヌ・スカッカ

トランスクリプト

Drew McLellan：彼は、Jamstackワークフローに適合する静的サイト用のクラウドプラットフォームであるVercelの創設者兼CEOです。 彼はNext.jsの共同作成者でもあります。 彼は以前にLearnBoostとCloudUpを設立し、Socket.io、Mongoose、SlackInなどのいくつかの人気のあるノードオープンソースライブラリの作成者としてよく知られています。 それ以前は、彼はMooToolsのコア開発者だったので、彼は手の甲のようにJavaScriptを回避する方法を知っています。 彼がかつてスペイン国王からアイスバーグレタスから氷の彫刻を作るための王立委員会を受け取ったことをご存知ですか？ 私の壊滅的な友人、ギレルモ・ローチを歓迎してください。 こんにちはギレルモ、お元気ですか？

ギレルモ・ローチ：私を持ってくれてありがとう。

Drew：今日は、Next.jsの全世界についてお話ししたいと思います。これは、最初から共同作成者として関わっていたため、明らかに個人的に非常に精通していることです。 Next.jsは、Jamstackスペースで作業しているときに私のレーダーに載っていたプロジェクト名のひとつですが、私が実際に個人的に調べたり、以前にあまりにも密接に作業したことはありません。 Next.jsが何であるかをおそらく知らない私のような人々のために、おそらくそれが何であるか、そしてそれがどのような問題を解決しようとしているのかについて少し背景を教えてください。

Guillermo： Next.jsは、実際には完全にSSRに焦点を合わせたフレームワークであり始めたため、Jamstackユニバースの非常に興味深いメンバーです。 特にユーザー生成コンテンツ、動的コンテンツ、ソーシャルネットワーク、eコマースが必要な場合に、人々が非常に大きなものを構築していたJamstackスペースの外で多くの採用が始まり、データセットが非常に大きいまたは非常に動的です。 それはJamstackの世界の多くの人々にとってはレーダーに当てはまらなかったと思いますが、後でNext.jsは静的最適化の機能を獲得しました。

Guillermo：たとえば、Next.jsを使用してページのトップレベルでデータフェッチを行わない場合、Reactページは…ちなみに、完全に理解していない人にとっては、 Next.jsは、本番用のReactフレームワークですが、レンダリングを行うこの機能があります。 次に、静的最適化機能を利用するときに、ページのトップレベルでデータフェッチを定義しない場合、サーバーレンダリングで何もしようとせずに、HTMLとして自動的にエクスポートされます。

Guillermo：その後、静的サイト生成の機能も追加されました。つまり、特別なデータフックを定義できますが、そのデータフックはビルド時にデータを取得します。 Next.jsは、ハイブリッドで非常に強力な動的および静的フレームワークになり、現在、Jamstackスペースでも大きく成長しています。

Drew： Reactはすでにフレームワークだと言われるかもしれませんが、確かにそのように説明されていると聞きます。 Reactのフレームワークとはどういう意味ですか？

Guillermo：それは素晴らしい観察です。なぜなら、FacebookでのReactとFacebookの外でのReactは完全に異なる獣であると私はいつも指摘しているからです。 React at Facebookは実際にはサーバーレンダリングと一緒に使用されますが、たとえばサーバーレンダリングでもNode.jsを使用せず、Hermesと呼ばれる高度に特殊化された仮想マシンを使用して、一種のプロダクションハックやPHPスタックと通信します。この高度でエキゾチックなFacebookのニーズすべて。

Guillermo：彼らがReactをオープンソース化するとき、それはコンポーネントをオープンソース化するようなものです。 私はいつもそれをエンジンのオープンソーシングのように呼んでいますが、あなたに車を与えるわけではありません。 何が起こったのかというと、人々は本当にそれを持って行きたいと思っていました。彼らはReactを使って場所に行きたいと思っていました。 コミュニティでは、人々が車を作り始め、Reactをエンジンとして組み込んでいました。これは、ドライバー、開発者が最初に求めていたものであり、Reactを車の基本的な部分にしました。 Next.js、Gatsby、React Staticなど、「完全にロードされたページとアプリケーションを実際に作成したい」というニーズを解決する他の多くのフレームワークが登場し始めました。

Guillermo： Reactはページ内の特定のウィジェットのコンポーネントやエンジンに似ていましたが、これは確かにFacebookの場合でした。 彼らは、通知バッチ、チャットウィジェット、ニュースフィードコンポーネントなどのためにそれを発明したことを広く公に認めます。これらのコンポーネントは、多数のコード行を含む本番環境の既存のアプリのコンテンツに埋め込まれたReactルートでした。そして他のJSライブラリやフレームワークですら。

Guillermo： Reactのフレームワークを作成することの意味は、Reactをストーリーの基本的な部分にすることを意味します。うまくいけば、これはNext.jsでやろうとしていることです。学習曲線は、主にReactにいくつか追加されたものです。 Next.jsの表面、特にデータのフェッチとルーティングの周り。 プロダクションの最適化もたくさん行っているので、Reactを入手したとき、Create Reactアプリを入手したとき、Facebookが提供するブートストラップ車と呼んでいますが、プロダクションのニーズは実際には満たされていません。 。 または、Webpackを構成し、Babelを構成し、サーバーレンダリングと静的生成を構成して自分でそれを実行しようとすると、車を最初から組み立てることも困難になります。 Next.jsは、このゼロ構成と、Reactを使用して大きなもの全体を構築するための本番環境に最適化されたデフォルトのセットを提供します。

Drew：つまり、Reactアプリの周りに一種のエコシステムがあり、事前に構成されたツールのコレクションを使用して、次のことができるようになっているようです。

ギレルモ：正解です。

ドリュー：着実に実行し、静的サイトの生成またはサーバーのレンダリングまたはルーティングを行います。

ギレルモ：正解です。そこで、これらすべての鍵となる、事前に構成された単語を使用しました。 Next.jsへの貢献者としてGoogleChromeの注目を集めることができて幸運です。 このプロジェクトのリーダーの1人である彼女は、Googleの社内でフレームワークに取り組んでいたときに、コミュニティやオープンソースが今日直面しているのと同じ問題に直面したことです。 Googleには、すぐに使用できるパフォーマンスの高いWebアプリを拡張して作成する方法について、さまざまな競合するイニシアチブがありました。

Guillermo： Google社員として参加すると、非常に大規模な本番環境に対応した非常に高性能なアプリケーションを作成するためのフレームワークが提供されます。 Shubieはこれらの多くのイニシアチブの一部であり、彼女が見つけたのは、フレームワークを大規模に成功させるための2つの重要な要素があるということです。 1つは事前設定です。つまり、作業を開始し、新しいアプリを開始します。すでに準備ができており、その時点でわかっている多くの制作要求を満たすものを提供する必要があります。時間内に。

Guillermo：一方、私たちが取り組んでいるもう1つの非常に重要なステップは、適合性です。 最も高度に最適化された本番環境に対応した事前構成済みフレームワークを提供できますが、先に進んで、たとえば、大量の依存関係やサードパーティスクリプトの導入を開始したり、ペイントに時間がかかる非常に非効率的なレイアウトを使用したりする場合などなどなど、事前設定のようなものを無駄にすることになります。 事前構成と適合性を時間の経過とともに混合することにより、開発者は優れた出発点を得るだけでなく、時間の経過とともに成功へと導きます。

Drew： Next.jsの特徴は、かなりの意見があり、UIレイヤーはReactであり、タイプスクリプトを使用し、Webpackを使用しているようです。これらはすべて、プロジェクトが行った選択であり、それが得られます。 私が間違っている場合は訂正してください。ただし、たとえばNext.js内でReact forVueを交換することはできません。

ギレルモ：それは、技術的な意思決定が一種の芸術と出会う良い点です。 一方で、Nextは非常に非ピニオンであると主張したいのですが、その理由は、具体的にgithub.com/vercel/nextjsとexamplesディレクトリにアクセスすると、ほぼ次のようなものがあることがわかるからです。 Next.jsと一緒に使用できるテクノロジーの組み合わせ爆発。 CSSスペースには、さらに多くのオプションがあり、Fire-based、Graphic UL、Apollo、Redux、MobXが表示されます。

Guillermo：デフォルトのCSSポートが埋め込まれていますが、インポート用と、スタイルJSXと呼ばれるスタイルタグ付きの2つのフレーバーを使用できます。これは、シャドウCSSへのWebプラットフォームアプローチに非常によく似ています。 私が非ピニオンを意味する理由は、Next.jsをWebの「ベアメタル」に非常に近づけ、今日から10年後のWebが互換性がない場合に多くのプリミティブを導入しないようにするためです。 次に、例を見ると、プラグインできる他のすべてのテクノロジーがあることがわかります。

Guillermo：基本的な意見のレベルは、Reactがあり、少なくとも近いうちにそれを置き換えることはできないということです。 次に、ページを作成できるようにするという概念があります。これは、最初に起動したときの新しいもののようなもので、誰もがシングルページアプリケーションを作成しようとしていました。 私たちが気付いたのは、インターネットは、検索エンジン、Twitter、Facebook、ソーシャルネットワーク、電子メールコンパニオンを介して、常に人をエントリポイントに誘導するように、個別のエントリポイントを作成する多くのページを備えたWebサイトで構成されていることです。そして、そのエントリポイントを通過する人は、アプリケーション全体の負担をダウンロードする必要はありません。

Guillermo：それから、そのパスはサーバーレンダリングの実装につながり、次に複数のページの静的生成などにつながりました。 他の基本レベルの意見はNextであり、Webに対してではなく、Webに対して機能するフレームワークである必要があります。 その上、Reactにはデータのフェッチとルーティングのプリミティブがありませんでした。それらを追加しました。 誰もがルーターを必要としているように対処しなければならないレベルの意見があるので、デフォルトでルーターが組み込まれている場合もあります。

ドリュー：これらのデフォルトを使用することの大きな利点は、選択の複雑さが大幅に軽減されることです。それは、そこにあり、構成されており、あまり考えなくても使い始めることができるということです。 -

ギレルモ：その通りです。

ドリュー：使用するコンポーネントの選択肢が多すぎる状況にあり、それは圧倒され、生産性の妨げになる可能性があります。

ギレルモ：その通りです。

Drew： Next.jsを使用している人はどのようなプロジェクトだと思いますか？ 基本的に、本番Reactアプリを作成する可能性のある状況に適していますか、それとも特定の種類のコンテンツの多いサイトに適していますか？ その意味で重要ですか？

ギレルモ：ええ、これはWebについての古くからの議論でした。アプリ用のウェブですか、サイト用のWebですか、それはハイブリッドですか？ JavaScriptなどの役割は何ですか？ 正直に答えるのは難しいですが、これに対する私の見解は、Webは常に進化し、ユーザーにとってますますダイナミックで個人的なコンテンツのハイブリッドになるように進化したということです。 コンテンツWebサイトのように言っても、世界のハイエンドコンテンツWebサイトには、アプリに非常に匹敵するコードベースがあります。

Guillermo：ここでの素晴らしい例は、New York Timesのようなものです。データ分析ツールとインタラクティブなアニメーションを備えた埋め込みウィジェットを提供し、次に読むストーリーを推奨します。サブスクリプションモデルが組み込まれているため、サブスクリプションモデルが組み込まれている場合があります。コンテンツの一部であり、読んだ記事の数を数えることもあります。 ティムバーナーズリーのように、ウェブが発明されたときにこれを言ったとしたら、「いいえ、それはクレイジーです。ウェブでは不可能です」のようになりますが、それが今日のウェブです。

Guillermo： Next.jsは、これらの複雑で現代的なニーズの多くに応えています。つまり、多くのeコマースの使用法が見られ、それに伴って多くのコンテンツが見られます。 ちなみに、Eコマースとは、商品を購入するだけでなく、ウェブ上で最大の不動産Webサイト、realtor.com、zillow.com、trulio.comなどのエクスペリエンスを意味し、カテゴリ全体がすべてNext.jsであり、コンテンツです。サイト。 VercelとNext.jsの顧客としてwashingtonpost.comをオンボーディングしました。次に、より新しいが非常に興味深い3番目のカテゴリがあります。これは、tiktok.comのような完全なアプリとユーザー生成コンテンツであり、あなたのようなものです。元のシングルページアプリケーションのユースケースもそこにかなり表されていると思います。

Guillermo： Next.jsは、非常に迅速に提供する必要があり、SEOに最適化する必要がある大量のコンテンツが必要な場合に役立ちます。そして、結局のところ、動的と静的が混在しています。

ドリュー：私は以前、マーシー・サットンにギャツビーについて話しました。ギャツビーは同じような空間にあるようです。 問題に対する複数の解決策を見つけ、1つのプロジェクトから次のプロジェクトへの選択肢があることは常に素晴らしいことです。 Next.jsとGatsbyは同じ種類の問題空間で動作していると思いますか？また、それらはどの程度類似しているか、または異なっていますか？

Guillermo：いくつかのユースケースには重複があると思います。 たとえば、私の個人的なブログrauchg.comはNext.jsで実行されていますが、これは素晴らしいGatsbyブログでもあった可能性があります。 小さな静的なウェブサイトのようなスペースにはその重複があり、小さな意味では関連性がないという意味ではありません。 非常に重要なドットコム企業の多くは、基本的に静的なWebで実行されるため、私の意見ではそれがJamstackの美しさです。 Next.jsはページを静的に最適化でき、それによってLighthouseの優れたスコアを取得できるため、重複するユースケースに使用できます。

ギレルモ：よりダイナミックなニーズに取り組み始め、ページがたくさんあると、線が引かれると思います。一度に更新する必要があります。 Gatsbyはそれらのソリューションを作成していますが、Next.jsには、あらゆる種類のデータベース、基本的に大量のページを「生成」または「印刷」するためのあらゆる種類のデータバックエンドで動作する本番環境対応のライブソリューションがすでにあります。 それが今日の顧客がギャツビーの代わりにNext.jsに行くところです。

Drew： JavaScriptベースのソリューションが大きくなるにつれて誰もが遭遇するように思われる問題の1つは、パフォーマンスと、物事がかなり遅くなり始める方法です。バンドルサイズが大きくなります。 従来、コード分割のようなものは、正しく構成するためにかなり複雑になる可能性があります。 これは、Next.jsの私に飛びついた機能のひとつであり、コード分割が自動であると主張していることがわかります。 Next.jsは、それを機能させるためのコード分割に関して何をしますか？

ギレルモ：あなたの観察は100％正しいです。 Webで最大のものの1つであり、Webで最大の重みの1つはJavaScriptです。実際の物理的なボリュームに関係なく、さまざまなマテリアルの密度と重みが異なるように、JavaScriptは非常に密度が高く重い要素になる傾向があります。 たとえば、非同期でメインスレッドから離れて処理できる画像のように、少量のJavaScriptでも、JavaScriptは特に面倒な傾向があります。

Guillermo： Next.jsは、バンドルを自動的に最適化するために多大な労力を費やしてきました。 Next.jsのアイデアを最初に思いついたときの最初の直感は、たとえば10個のルートを定義することでした。 Next.jsの世界では、ページディレクトリを作成し、そこにファイルをIndex.js、About.js、Settings.js、Dashboard.js、Termsofservice.js、Signup.js、Login.jsにドロップします。 これらは、あらゆる種類のメディアを通じて共有できるアプリケーションへのエントリポイントになります。

Guillermo：それらを入力するときは、まずそのページに関連するJSを提供し、次に、システム内の後続のナビゲーションが非常に迅速になるように、おそらく共通のバンドルを提供します。 Next.jsも非常に優れており、そのエントリポイントに接続されている残りのページを自動的にプリフェッチするため、単一ページのアプリケーションのように感じられます。 多くの人が、「ルートがいくつかあることがわかっているのに、Create Reactアプリを使用しないのはなぜですか？」と言います。 私はいつも彼らにこう言います。「ほら、それらはページとして見つけることができます。Next.jsは接続されているものを自動的にプリフェッチするので、シングルページアプリケーションを取得することになりますが、最初のペイントに関してはより最適化されています。 、その最初のエントリポイント。」

Guillermo：それは最初のコード分割アプローチでしたが、その後、時間の経過とともにはるかに洗練されたものになりました。 Googleは、モジュールとモジュールなしと呼ばれる非常に優れた最適化を提供しました。これにより、最新のブラウザーに差分JSが提供され、他のブラウザーにはポリフィールドが多いレガシーJSが提供されます。この最適化は、100％自動化され、大幅な節約になります。 VercelでホストしているParnaby'sというお客様の1人にそれを渡しました。私が間違っていなければ、それは非常に重要なことだったと思います。 コードサイズが30％節約されたのかもしれません。それは、Next.jsをJSバンドルをより最適化したバージョンにアップグレードしたからです。

ギレルモ：それは私たちが以前に検討したポイントの一種でした。つまり、Next.jsを選択すると、時間の経過とともにより良く、より最適になり、あなたに代わって物事を最適化し続けます。 繰り返しになりますが、これらは、あなたが決して対処したり、煩わ​​されたりする必要のない事前設定であり、正直に言うと、あなたがこれまでやりたくない研究です。 私は明らかにこれにあまり関与していなかったようですが、内部の議論のいくつかを見て、Internet ExplorerXとSohoにのみ関係するこれらすべてのポリフィールドについて議論していました。 、Next.jsをアップグレードして、これらすべてのメリットを享受しましょう。」

Drew：デフォルトに固執し、最も一般的な構成に固執することで、大きなメリットが得られることがあります。これは、実際にはNext.jsのアプローチのようです。 私が2000年代初頭にPHPを書き始めたとき、誰もがPHPとMySQLを使用していたことを覚えています。当時、私はWindowsから来たばかりだったので、PHPとMicrosoft SequelServerを使用したいと思いました。 あなたはそれをすることができます、しかしあなたはずっと潮に逆らって泳いでいます。 その後、MySQLに切り替えた直後に、エコシステム全体が機能し始めたので、それについて考える必要はありませんでした。

ギレルモ：ええ、すべてがクリックするだけです、それはとても素晴らしい観察です。 Babelエコシステムは非常に強力であるため、たとえば、Babelを他のものと交換することで少し速くなることができますが、その信じられないほどのエコシステムの互換性をトレードオフすることができます。 これは以前にパフォーマンスに触れたものであり、多くの人にとって同様に、ビルドパフォーマンスと静的生成パフォーマンスは大きなボトルネックであり、ツールのパフォーマンスを段階的に改善することに非常に熱心に取り組んでいます。

Guillermo：たとえば、Next.jsが現在行っていることの1つは、デフォルトをWebpack4からWebpack5にアップグレードすることです。これには、いくつかの問題があります。そのため、最初にオプションとして人々に提供しています。フラグ内ですが、後でデフォルトになります。 Webpack 5は、パフォーマンスを大幅に向上させますが、Webpackエコシステムを犠牲にするのではなく、段階的に向上させています。 確かに、犠牲にする必要のある非常に小さなものがいくつかありましたが、それは今日のJSエコシステムの信じられないほどの利点であり、多くの人々が見過ごしていると思います。ソーホーでは、少し速かったかもしれませんし、ソーホーでのMPMの方が時間がかからなかったかもしれません。」 彼らはいくつかの詳細を理解し、生態系の価値が非常に大きいという全体像を見逃しています。

ドリュー：すべての構成とメンテナンス、そしてその側面をNext.jsのようなプロジェクトで行うことの価値は、他のものを使用するように交換するのではなく、信じられないほどです。なぜなら、これらのデフォルトから離れるとすぐに、あなたはすべての互換性を維持し、それを自分で行うという責任を負っています。 Next.jsで私が本当に興味を持っていることの1つは、静的サイト生成またはサーバー側レンダリング、あるいはおそらく2つのハイブリッドのいずれかを実行するために利用できるオプションがあることです。 最近のアップデートでこれにいくつかの最近の変更があったと思いますが、それについて少し教えてください。いつどちらを選択するかを教えてください。

ギレルモ：ええ、確かに。 前に説明したページシステムと組み合わせたこのハイブリッドアプローチの重要なコンポーネントの1つは、完全に静的なページまたはサーバーでレンダリングされたページを使用できることです。 完全に静的なページには、私が静的ホイストと呼んでいるものの信じられないほどの利点があります。つまり、そのアセットを取得して、自動的にエッジに配置できます。 エッジに配置することで、キャッシュしたり、プリエンプティブにキャッシュしたり、複製したり、リクエストが届いたときにサーバーにアクセスしないようにすることができます。これは、事前にわかっているためです。」ねえ、スラッシュインデックスは静的です。」

ギレルモ：それは、世界中の視聴者にサービスを提供することになると、非常に興味深いメリットです。 特にVercel、AWS Amplify、Netlifyなどの最新のエッジネットワークをデプロイする場合は、基本的に自動CDNをすぐに利用できます。 Next.jsには、静的にできる場合は静的である必要があるという前提があります。 プロジェクトを最初に開始し、最初のページで作業しているとき、またはフレームワークに飽き飽きしているときは、すべてを静的にすることもできます。

Guillermo：ハイエンドのニーズ、たとえばvercel.comの場合でも、Next.jsの独自の使用法は完全に静的です。 これは完全に静的なサイト生成と静的なサイト生成の組み合わせであるため、すべてのマーケティングページは静的であり、ブログは動的データソースから静的に生成され、次に多くの動的データを含むダッシュボードですが、シェルまたはスケルトンとして配信できます。 、デプロイメントの表示、プロジェクトの表示、ログの表示などに関連するすべてのページは、基本的にクライアント側のJavaScriptを使用した静的ページです。

Guillermo：非常に高速なファーストペインのパフォーマンスが必要なものはすべて事前にレンダリングされており、SEOが必要なものはすべて事前にレンダリングされており、非常に動的であるため、セキュリティについてのみ心配する必要があります。たとえば、CLIが使用したり、統合が使用したりするのと同じAPI呼び出しを使用するクライアント側の観点からなどです。 完全に静的なWebサイト、操作が非常に安価、非常にスケーラブルなど。

Guillermo：さて、私たちのブログで必要だった1つの特定のことは、データを非常に迅速に更新したかったということでした。 タイプミスを非常に迅速に修正し、ビルド全体が発生するのを待たないようにしたかったのです。これはNext.jsの非常に重要な利点であり、静的から動的にまたがるときに、ソリューション間でもこれらを提供します。 。 私たちのブログでは、増分静的生成を使用したため、基本的に、基になるコンテンツが変更されたときに一度に1ページを再構築できます。

Guillermo：数百のブログ投稿だけでなく、たくさんのブログ投稿が常に生成され、常に更新されていると想像してみてください。私たちの顧客の1人であるWashington Postについて述べたように、その場合は行く必要があります。特に各ユーザー向けにコンテンツのカスタマイズを開始すると、完全なSSRに向けてさらに進化します。 私が今説明した複雑さの旅は、私が1つのマーケティングページを持っていることから、数千ページのブログを持っていること、数万または数百万ページを持っていることから始まりました。 それはあなたがあなた自身のビジネスで横断することができるNext.jsの旅です。

Guillermo：次に、開発者として、責任の軽減と責任の拡大のどちらかを選択します。SSRの使用を選択すると、サーバーでコードを実行し、クラウドでコードを実行し、責任が増えるためです。もっと力を。 それぞれの種類のツールをどこで使用するかを決めることができるという事実は、Nextの非常に興味深い利点だと思います。

Drew：静的サイト生成とサーバー側レンダリングを組み合わせるという実用性だけで、サーバー要素に関してはどのように機能しますか？ それを達成するためにVercelのような専用のプラットフォームが必要ですか、それとももっと簡単に、もっと簡単にできることですか？

Guillermo： Next.jsは開発サーバーを提供するので、NextをダウンロードしてNext Devを実行すると、それが開発サーバーになります。 開発サーバーは、Facebookがリリースした最新の高速更新テクノロジーを備えているように、開発用に明らかに非常に最適化されています。実際、Facebookはそれをリリースしていません。Facebookはそれを内部で使用して、最高で最もパフォーマンスが高く、最も信頼性の高いホットモジュールの交換を行います。 、基本的に入力していて、変更が画面に反映されているように、これが開発サーバーです。

Guillermo：次に、NextはNext Startと呼ばれる本番サーバーを提供し、NextStartはセルフホスティングのフレームワークのすべての機能を備えています。 Vercelの興味深い点は、Nextをデプロイすると、自動的に最適化され、100％サーバーレスになることです。つまり、管理、スケーリング、キャッシングとキャッシングの検証、パージ、レプリケーション、グローバルフェイルオーバーなどの責任は一切ありません。次のスタートを自分で実行するときに引き受ける必要があるなどです。

Guillermo：これはNext.jsの大きなメリットでもあります。たとえば、apple.comには、非常に高度で厳格なセキュリティとプライバシーのニーズがあるため、自己ホストするNext.jsのdotcomにいくつかの異なるプロパティ、サブドメイン、ページがあります。 。 一方、washingtonpost.comはVercelを使用しているため、このような幅広いユーザーがいて、すべてのユーザーをサポートできることを非常に嬉しく思います。 私の意見では、サーバーレスが向かうところの良いところは、時間の経過とともに向上する最適なパフォーマンスという点で、両方の長所を提供できることです。あらゆる種類のインフラストラクチャについて心配する必要があります。」

Drew： Next.jsは、Vercelのチームによって開発されているオープンソースプロジェクトです。 Vercel以外に他の貢献者はいますか？

Guillermo：そうですね。サーバーPRを積極的に送信するメインのGoogle Chromeは、最適化とパートナーとのテストに役立ちます。たとえば、多くのユーザーを使用しているために、すでにGoogleエコシステムに参加している非常に大規模なNext.jsユーザーなどです。たくさんのアプリがあるので、パートナーとして密接に関与する必要があります。 Facebook、私たちはFacebookチームとの素晴らしい関係を維持しています。 たとえば、高速更新は、それを実現した最初のReactフレームワークであり、FacebookでReactと高速更新を使用することについて学んだすべてのことをガイドしてくれました。

Guillermo：私たちは、eコマースやコンテンツの想像など、さまざまな種類のユースケースから、Next.jsアプリを実際に非常に大規模に展開している多くのパートナーと協力しています。 それから、たくさんの独立した貢献者、Next.jsを個人的に使用する人々だけでなく、大企業の教育者やフロントインフラストラクチャチームのメンバーもいます。 これは非常に幅広いコミュニティの取り組みです。

Drew：誰かが懸念しているように思えますが、これはVercelによってかなりの部分が開発されており、特定のプラットフォームでの展開にロックされてしまうのではないかという懸念があるかもしれませんが、まったくそうではなく、サイトを開発してFirebaseやNetlifyにデプロイしたり、…

ギレルモ：ええ、もちろんです。 ある意味でフロントエンド時代のKubernetesのように、それをよく比較するのが好きです。なぜなら、結局のところ、私は…Kubernetesは、Linuxプロセスを実行する必要があるときにほとんどすべての人が必要とするものだと固く信じているからです。 、あなたが意見について話していて、それが優れたテクノロジーだと言っているように、それはほとんど意見がありませんが、私たちがちょっと忘れている意見がいくつかあります。 結局のところ、コンテナとしてパッケージ化されたLinuxプログラムの特定のデーモンを実行することから生まれたようなものです。

Guillermo：次は同様の立場にあります。なぜなら、Reactコンポーネントとして世界の普遍的なプリミティブであるために私たちが取るものは、明らかに意見が分かれていますが、多くの企業にとって、すべてがLinuxに引き寄せられているように、私たちはReactとVueについても同じことがわかりますが、幸いなことにVueにはNuxtもあります。これは非常に優れたソリューションであり、考え方と原則においてNextと同等です。 私たちは、SvelteエコシステムのSapperのようなNuxtのようなNext.jsのようなこれらのプラットフォームに向かって引力を注いでいます。

ギレルモ：これらはオープンなプラットフォームであるべきだと思います。なぜなら、誰もがこれを必要とするのであれば、業界全体で車輪の再発明をしなかったのではないでしょうか。 私たちはその立場を大いに歓迎します。人々がそれを展開して再構成し、再構築して再配布することなどを歓迎します。

Drew：つい最近、Next.jsの新しいバージョンがリリースされました。バージョン9.5だと思います。 そのリリースにはどのような重要な変更がありましたか？

ギレルモ：最も素晴らしいのは、前に言ったように、多くのものが静的に始まり、物事が成長するにつれてより動的になることです。 ちなみに、これはWordPressのベンチャーでした。 WordPressは当初、静的ファイルデータベースのアプローチに基づいていましたが、その後、PHPがますますMySQLに進化した方法で説明したようなデータベースが必要になりました。 Next.js 9.5の優れている点は、増分静的生成が本番環境に対応した機能になることです。そのため、不安定なフラグから除外しました。

Guillermo：この機能を使用すると、静的な利点をすべてあきらめることなく、静的から動的に移行することができます。また、サーバーでレンダリングされた動的に完全に移行する必要がないため、静的な種類の有効期間が延長されます。 たとえば、Vercelでの使用方法は、前述したように、ブログがビルド時に完全に事前レンダリングされるようなものですが、たとえば、実際には数分で主要な発表が行われる予定です。 1つのブログ投稿の1文字を変更するたびに、5〜10分のビルドを発行することなく、微調整、修正、プレビューなどができるようにしたいとブログに書いています。

Guillermo：インクリメンタル静的生成を使用すると、一度に1ページを再構築できます。 サイトの大きさにもよりますが、数分から数秒かかることもありますが、今では数ミリ秒かかります。 繰り返しますが、静的の利点をあきらめる必要はありませんでした。 これはおそらく、Next.js 9.5で安定したことで私が最も興奮していることです。特に、JSコミュニティとReactコミュニティ、フレームワークコミュニティと静的サイト生成コミュニティが、静的インクリメンタルを作成するこのユニコーンについて話しているためです。 a long time, so the fact that Next.js did it, it's being used in production and it's there for everybody to use, I think it's a major, major, major milestone.

Guillermo: There's lots of little DX benefits. One that's really nice in my opinion is Next.js, as I said, has a page system. You would argue, “Okay, so let's say that I'm uber.com and I've decided to migrate on Next.js, do I need to migrate every URL inside over to Next.js in order to go live?” This has become a pretty important concern for us, because lots of people choose Next.js, but they already are running big things, so how do you reconcile the two?

Guillermo: One of the things that Next.js allows you to do in 9.5 is you can say, “I want to handle all new pages that I created with Next.js with Next.js, and the rest I want to hand off to a legacy system.” That allows you incremental, incremental is the keyword here today, incremental adoption of Next.js. You can sort of begin to strangle your legacy application with your Next.js optimized application one page at a time, when you deploy and you introduce in your Next.js page, it gets handled by Next. If it doesn't match the Next.js routing system, it goes to the legacy system.

Drew: That sounds incredibly powerful, and the incremental rendering piece of that, I can think of several projects immediately that would really benefit that have maybe 30-minute build times for fixing a typo, as you say. That sort of technology is a big change.

Guillermo: We talked to one of the largest, I believe, use cases in Jamstack in the wild, and it was basically a documentation website and their build times were 40 minutes. We're doing a lot in this space, by the way, like we're making pre-rendering a lot faster as well. One of my intuitions for years to come is that as platforms get better, as the primitives get better, as the build pipelines get better we're going to continue to extend the useful lifetime of statics. Like what ended up taking 40 minutes is going to take four.

Guillermo: A great example is we're rolling out an incremental build cache, as well, system. I sort of pre-announced it on Twitter the other day, we're already seeing 5.5 times faster incremental builds. One of the things that I like about Jamstack is that the core tenet is pre-render as much as possible. I do think that's extremely valuable, because when you're pre-rendering you're not rendering just in time at runtime. Like what otherwise the visitor would incur in in terms of rendering costs on the server gets transferred to build time.

Guillermo: One of the most exciting things that's coming to Next is that without you doing anything as well, the build process is also getting faster. On the Vercel side, we're also taking advantage of some new cloud technology to make pre-rendering a lot faster as well. I think we're always going to live in this hybrid world, but as technology gets better, build times will get better, pre-rendering will get better and faster, and then you'll have more and more opportunities to do kind of a mix of the two.

Drew: Sounds like there's some really exciting things coming in the future for Next.js. Is there anything else we should know before we sort of go away and get started working with Next.js?

Guillermo: Yeah. I think for a lot of people for whom this is new, you can go to nextjs.org/learn, it'll walk you through building your first small static site with Next.js, and then it'll walk you through the journey of adding more and more complexity over time, so it's a really fun tutorial. I recommend also staying tuned for our announcement that I was just starting to share on twitter.com/vercel, where we share a lot of Next.js news. Specifically we highlight a lot of the work that's being done on our open source projects and our community projects and so on. For myself as well, twitter.com/rauchg if you want to stay on top of our thoughts on the ecosystem.

Drew: I've been learning all about Next.js today, what have you been learning about lately, Guillermo?

Guillermo: As a random tangent that I've been learning about, I decided to study more economics, so I've been really concerned with like what is the next big thing that's coming in terms of enabling people at scale to live better lives. I think we're going through a transition period, especially in the US, of noticing that a lot of the institutions that people were “banking on”, like the education system, like the healthcare system, a lot of those, like where you live and whether you're going to own a house or rent and things like that, a lot of these things are changing, they have changed rapidly, and people have lost their compass.

Guillermo: Things like, “Oh, should I go to college? Should I get a student loan?” and things like that, and there is a case to be made for capitalism 3.0, and there is a case to be made for next level of evolution in social and economic systems. I've been just trying to expand my horizons in learning a lot more about what could be next, no pun intended. I've found there's lots of great materials and lots of great books. A lot of people have been thinking about this problem, and there is lots of interesting solutions in the making.

ドリュー：それは魅力的です。 If you, dear listener, would like to hear more from Guillermo, you can find him on Twitter at @RauchG, and you can find more about Next.js and keep up to date with everything that goes on in that space at nextjs.org. Thanks for joining us today, Guillermo. 別れの言葉はありますか？

Guillermo: No, thank you for having me.