netlify＆next.js

Cassidy Williamsは最近、Netlifyブログで1か月にわたる毎日のブログキャンペーンを実施しました。多くのブログ投稿はnext.jsについてです。 next.jsには賞賛されることがたくさんあります。 Cassidyの入門プロジェクトを興味深いものにしました。それは速く反応して組み込まれており、これは素晴らしいことです。任意の「ページ」でgetStaticPropsおよび使用して、元々 .jsファイルに含まれていたものを制御できることがgetServerSideProps 。 next.jsを試してみるのはこれが初めてですので、基本を許してください。しかし、私にとってnext.jsについて最も印象的なのは、完全なレンダリングプロセスを簡単にサポートすることです。デフォルトで静的ファイルレンダリングを実行することをお勧めします（SMART）。その後、サーバーサイドレンダリング（SSR）を実行する必要がある場合は、次のように特定のページコンポーネントを更新する必要があります。

 async関数getserversideprops（）{
  //外部API const res = await fetch（ `https：//.../ data`）からデータを取得します。
  const data = await res.json（）;

  // props return {props：{data}}を介してデータをページに渡す;
}

ページをレンダリングするためにデータを取得するためにサーバーにアクセスする必要があるため、SSRを実行すると仮定しますが、ページが必要に応じてJavaScriptを迅速にレンダリングできるようにサーバー側でレンダリングすることを好みます（これはSEOに非常に適しています）。これは、いつでもこの作業を実行する準備ができているノードサーバーがあることを前提としています。 netlifyでは、これは関数（ノードラムダ）を意味しますが、 netlify.tomlファイルに次のものを追加するだけでよいので、それについて考える必要はほとんどありません。

 [[プラグイン]]
  package = "@netlify/plugin-nextjs"

これで、必要な場所で静的なレンダリングを行うことができます。サーバー側のレンダリングが必要な場所ですが、クライアントレンダリングもあきらめていません。私はそれがいくつかのJSON転送または他のフレームワークレベルの魔法を内部で行うと思います。

テスト用のホームページから高速SSRルートを設定しましたが、ロード時にホームページ（静的）と/coolルート（SSR）の両方が静的HTMLを返すことが明確にわかります。

私はReactを使用するのが好きであることを認めています。Hext.jsは、シンプルさと優れた機能の両方を持っているため、非常に素晴らしいフレームワークです。 Netlifyで簡単に実行できますが、これは素晴らしいことです。

以上がnetlify＆next.jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。