次は何が新しい.JS 10.2

次.JSは反応するWebアプリケーション、超高速の静的ウェブサイト、および単一のページJavaScriptアプリケーションを構築するためのフレームワークです.これは、コードの分割、コードバンドル(Webpack)、およびコードコンパイラなどの生産最適化などの反応の開発に関連する一般的な問題を解決するために設計されました.
次.JSは、その優れた開発者経験と多くのビルトイン機能、特により速いページローディングのための自動コード分割と最適化されたプリフェッチでクライアント側ルーティングのために人気を得ています.
2021年4月28日、次の.JSチームは次のリリースを発表しました.さらに魅力的な新機能とJS 10.2.新しいリリースでは、開発者は、両方のサーバーをレンダリングし、静的に生成されたページを含むハイブリッドアプリケーションを構築することができます.
このガイドでは、次の新機能を見てみましょう.JS 10.2 :

加速ビルドとリフレッシュ

より速いスタートアップ

アクセシビリティ向上

より柔軟なリダイレクトと書き換え

自動ウェブフォント最適化
加速ビルドとリフレッシュ

次.JS 10.2は、Webpack 5を通じて、より高速なビルドとリフレッシュを可能にします.この改善により、カスタムWeb Packの設定を使用しないアプリケーションはnext.config.js 有効になっているときに自動的にWebpack 5を使用します.
さらに、任意の次.Webpack 5を有効にしているJSアプリケーションは、ディスクキャッシュ、高速リフレッシュ、資産の長期キャッシュ、木揺れを含む改善された機能のホストにアクセスする必要があります
より速いスタートアップ
最新の次の主要な目標.JSのリリースは、ローカルサーバー上の最初の実行後に近くのリアルタイムの速度にローカル開発の経験を加速することです.公式ブログ投稿によると、次.JS 10.2は、最初の次の起動パフォーマンスを向上させます.24 %のJS CLI.例えば、next dev コマンドを実行します.COMは3.3秒から2.5秒に減少した.
以前はnext dev ローカルターミナルで開発モード用のローカルサーバーを起動するには、長い時間がかかりました.次.JS 10.2このプロセスははるかに速く、より開発者フレンドリーになります.
より多くの
ルートの変更は、現在のアクセス許可を改善するために設計された他の支援技術に加えて、デフォルトで読者を画面に表示されます.アクセシビリティによって、我々は可能な限り多くの人々が使用できるように設計されている機能を意味します.これは一般的に障害のあるユーザーにも適用されますが、遅いネットワーク接続を持つユーザー、特定の種類のデバイスを使用しているユーザーなどの利点のために、機能とコンテンツを設計することも参照できます.
より柔軟なリダイレクトと書き換え
次.JSチームは、新しいバージョンでより柔軟にリダイレクトして、書き直しました.これは大部分の新しい支持のおかげですhas プロパティを使用すると、着信ヘッダー、クッキー、およびクエリ文字列に対してマッチさせることができます.
リダイレクトを使用すると、着信要求を異なる宛先パスに変更できます.書き換えると、着信リクエストをマップできます.The has プロパティーは次のようになります.

type : String , 値はどちらかheader , cookie , host , or query

key :
「String , これにより、選択したタイプのキーを

以下にマッチする異なる選択されたタイプの例を示します.

// next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)'
          }
        ],
        destination: '/old-browser',
        permanent: false
      }
    ]
  }
}

上のコードは、古いブラウザをリダイレクトする方法を示しますU

ser- A gent :

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB'
          }
        ],
        destination: '/uk/:path*',
        permanent: true
      }
    ]
  }
}

アプリケーションがその場所に基づいてユーザーを検出する必要がある場合は、ユーザーをリダイレクトすることもできます.

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)'
          }
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false
      }
    ]
  }
}

あなたがアカウントを作成するユーザーを必要とする場合は、ログインしている場合は、ユーザーをリダイレクトする必要があるWebアプリに取り組んでいるとしましょう.新しい、改善された、より柔軟な次のリダイレクト.JS 10.2、これはケーキです.
自動ウェブフォント最適化
WebFontについて話すとき、我々はあらかじめインストールされることができないそれらのフォントについて話していて、ケースとして彼らがウェブサイトまたはウェブアプリに表示される前に、ブラウザによってダウンロードされなければなりません.そして、デスクトップ用のWebページの82 %のWebフォントとモバイルページの80 %は、モバイル画面上での作業時にWebフォントを使用します.時には我々は自分のフォントをカスタマイズするときに我々はブランディングやウェブサイトのデザイン画面での作業中です.いくつかのいくつかの外れ値で、それは世界中でかなり一貫して使用します.
次のリリース.JS 10.2は、Webフォントでは、独自のカスタムフォントで動作するときに自動WebFontの最適化へのサポートのためにそれ以上の開発者フレンドリーになりました.そして、クールなことは、自動的にWebフォントの最適化は、Googleのフォントをサポートしています.
しかし、デフォルトでは次に.JSはまだ私たちのアプリケーション開発のビルド時に自動的にインラインフォントCSSをインラインします.

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter"
  rel="stylesheet"
/>

上の例では、次のリリース前にWebアプリケーションやWebサイトで実装されているかを示します.JS 10.2

// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal.....
</style>

さて、上記の例を見れば、Googleフォントの最初の使い方と2つ目の使い方の変更に気付きます.最初の例では、リンクのタグを使用してWebアプリケーションまたは任意のWebサイトで通常使用する通常の方法のリンクを追加しました.
しかし、現在次のリリース.JSは私たちに直接、またはスタイルタグと一緒にそれを使用できるようにしました.私たちは、2番目の例では、Googleフォントを使用した方法data-href スタイルタグの属性.
どのような属性は、それが自動的にページを終了する前に、Webフォントを最適化するスタイルと一緒にロードされます.
結論
次のリリース.JS 10.2はフレームワークに多くの更新と改善をもたらしました、そして、我々は次々と改善を見ることができました.私はこのフレームワークについてのクールなことは、多くのそれを新しいバージョンに追加された自動WebFontの最適化機能が好きです.このアップグレードは4月28日に導入されました.JS 10.2 .そして、もう一つの涼しいことは、Webpack 5の使用がディスクキャッシュを改善するのを助けたということです.変更後のファイルのみが再コンパイルされるためです.