Next.jsは、サーバー側レンダリング用のReactフレームワークです。、その作成者は、Reactアプリケーション用のゼロ構成の単一コマンドツールチェーンとして提示します。
このフレーム Reactフロントエンドアプリケーションを簡単に作成できる共通の構造を提供します サーバー側のレンダリングを透過的に管理します。 Next.jsバージョン9.3が月曜日にリリースされ、新機能といくつかの改善が加えられました。その中で、静的サイトを生成する機能を主な目新しさとして見つけることができます。
Next.js 9.3の新機能は何ですか?
Next.js 9.0のリリースにより、 フレームワークは静的自動最適化の概念を導入しました。 あるとき ページにはブロッキング要件はありません getInitialPropsのようなデータ復旧、 HTMLで自動的にレンダリングされます それが構築されたら。
データ抽出要件をブロックしている場合でも、コンパイル時に静的HTMLでページを作成したい場合があります。 これは、たとえば、マーケティングページの場合です。 コンテンツ管理システム(CMS)を搭載。
Next.js 9.3では、XNUMXつの新しいデータ復旧方法が導入されています: getStaticPropsおよびgetServerSideProps.
これらの新しい方法 getInitialPropsモデルに比べて多くの利点がありますSSG(静的サイド生成)とSSR(サーバーサイドレンダリング)の間に明確な違いがあるためです。 それらはAPIの追加です。
すべての新機能には下位互換性があり、 徐々に採用することができます。 減価償却はなく、getInitialPropsは引き続き正常に機能します。 動的ルーティングを取得するために、getStaticPathsパラメーターが追加されました。
- getStaticProps:構築中にデータを取得できます。
- getStaticPaths-データベースの動的ルーティングを指定します。
- getServerSideProps:各リクエストのデータを取得できます。
この新しいバージョンから際立っているもうXNUMXつの変更点は、プレビューモードのサポートです。 getStaticPropsの紹介 Next.jsで 新しい可能性を開き、 特定の条件下でオンデマンドでNext.jsレンダリング機能を使用するなど。
例えば 下書きをプレビューするとき CMSでは、静的レンダリングをスキップして、 ドラフトコンテンツを使用してページをオンデマンドでレンダリングする 公開されたコンテンツの代わりに。 この特定の場合にのみ、Next.jsで静的ビルドをスキップする必要があります。 Next.jsチームによると、プレビューモードではこれを行うことができます。
のモード プレビューにより、ユーザーは生成されたページをスキップできます 静的に、たとえばCMSからのドラフトページを要求に応じて(SSR)返します。 ただし、特定のCMSシステムに限定されません。 プレビューモードは、getStaticPropsおよびgetServerSidePropsと直接統合されているため、あらゆるタイプのデータ復旧ソリューションで使用できます。
Next.js 9.2は、組み込みCSSのサポートを追加しました。 しかし、Next.js9.3はSassのサポートを追加しました。 グローバルスタイルシートとCSSモジュール、および埋め込みCSSがサポートされています。 Next.jsは、SassファイルでCSSモジュールをサポートするようになりました [name] .module.scssファイルの命名規則を使用します。 Next.js 5+でnext-sassを使用して以前に利用可能だったサポートとは異なり、グローバルSassモジュールとCSSモジュールを共存できるようになりました。
モジュール CSSを使用すると、一意のクラス名を自動的に作成することで、Sassをローカルで管理できます。
バージョン9.0では Next.jsから、 HTMLで自動的にレンダリングされないページがありました 静的:404ページ。
この背後にある主な理由は、404にフィードするエラーページが404よりも多く処理されたためです。たとえば、エラーも処理されました。 存在しないパスに対して404ページがレンダリングされるため、 ページをオンデマンドでレンダリングすると、コストと負荷が高くなる可能性があります サーバ。 フレームワークバージョン9.3は物事を改善し、自動静的最適化を提供します 404ページの場合。
リクエストにerror.jsカスタムページが含まれていない場合、ファイル Next.jsは自動的に404ページを静的に生成します 404を提供する必要がある場合に使用します。これは自動的に行われ、変更は必要ありません。
このページをカスタマイズすることもできます。 デフォルトの404ページを置き換えるには、404.jsファイルを作成します。
あなたがそれについてもっと知りたいならば、あなたは相談することができます 次のリンク。