次のJS 11でウェブをより速くします。

次のJSの人々は本当に懸命に働いているといくつかの驚くべき機能を市場で市場に出てくる.
含まれている新機能は

の適合性

は、パフォーマンス

を改善しました

ネクスト/スクリプト

次に、イメージ

ウェブパック5

は、アプリの移行(実験的な)

を反応させます
次に、

.JSライブ

一つ一つについて話しましょう

適合

Conformance is a system that provides carefully crafted solutions and rules to support optimal loading and Core Web Vitals, with further additions coming to support other quality aspects like security and accessibility. These solutions free your team from memorizing all the latest rules for optimal loading performance, while still giving you the flexibility to make the right choices for your applications.

開発者は、このシステムが自動的にそれを行ういくつかの良い練習を使用することを忘れても、コードを記述しながら、基本的に開発者は、彼らがルールに従うことができますどのような適合性は、それができます.
また、箱からEslintをサポートします.
それを使用するには、実行する必要がありますnpx run lint

パフォーマンス

以降.JS 10、次のJSチームはさらに次の開発者の経験を改善することに執着しています.js
次.JS 11は、さらに起動時間を減らすためにBabelにもう一つの最適化を含みます.彼らはWebpackのためのBabelローダーの真新しい実装を作成しました.実際には、これは開発者の変更を意味しませんが、最終的にはより速い開発経験を意味します.

次スクリプト

これは次のJS 11に来る非常に大きな特徴です.
これは何をすることができますあなたがあなたのサイトにスクリプトを追加することができますが、しかし
ページが対話的になる前にさえ実行したいスクリプトがあるならば、あなたはそれをすることができます.
ページがロードされた後に遅延することができますし、実行することができますスクリプトがある場合は、同様にそれを行うことができます.
非常にクールで便利な機能.
これを行うには、次/スクリプトのコンポーネントを使用する必要がありますし、戦略を使用することができます
対話前:ボットの検出と同意管理などのページが対話的である前に取得し、実行する必要がある重要なスクリプトのために.これらのスクリプトは、サーバーから初期HTMLに注入され、自己バンドルされたJavaScriptが実行される前に実行されます.
Interactive(既定):タグマネージャーと解析のような、ページが対話的になった後に取得および実行できるスクリプトについて.これらのスクリプトは、クライアント側に注入され、水和後に実行されます.
LazyOnLoadは、チャットのサポートやソーシャルメディアのウィジェットなどのアイドル時間中に読み込むのを待つことができるスクリプトのため.

<Script
  src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.map"
  strategy="beforeInteractive" // lazyOnload, afterInteractive
/>

次/画像

イメージコンポーネントは非常に多くの改善しており、これはまた、有用な機能であり、グローバルに多くの開発者によって使用される.
画像のこの更新プログラムはあなたを

それがロードされている間(ぼけプレースホルダ)画像のプレースホルダを使用します.

あなたはもはやイメージの高さと幅を与える必要はありません.
例<Image src="abc.jpeg" alt="some very cool picture"/>

ぼかしを使用する場合は、プレースホルダ=“ぼかし”を行うことができますし、自動的にロードされるまで、画像をぼかします
例<Image src="apple.jpg" alt="an apple a day keeps doctor away" placeholder="blur"/>［ぼかしの実例］
https://nextjs.org/static/blog/next-11/Placeholder.mp4
次.JSはまた、あなたのバックエンドによって提供されるカスタムblurdataurlを提供できるようにする動的なイメージをぼかしをサポートしています.

Webpack 5

もう一つの大きな機能は、DEVsをウェブパック5 Hassle無料にアップグレードすることができます.
彼らはコミュニティと密接に連携して、次の3400以上のウェブパック5へのスムーズな移行を確実にする.JSの統合テストは、すべてのプル要求で実行されるWebパック5を有効にします.
また、アプリケーションがカスタムWebpackの設定を持っている場合は、following steps

CRAの移行

以来、多くの人々は、これらの人々が来て、簡単に旅をした(まだそれに取り組んでいるが、それを得る)次のjsにCREATEのアプリからの切り替えていたので
開発者が次のアプリケーションに変換するのを助ける.JSは、彼らが自動的に次のようにアプリケーションを作成する反応アプリケーションを変換する次/Codemodに新しいツールを導入しました.互換性のあるJS.
プロジェクトを移行するには、次のコマンドを使用します.npx @next/codemod cra-to-nextその実験的な特徴

次世代ライブ

Next js liveは、ユーザーが他のツールを使用せずにオンザフライで協力できる非常にクールな機能です.
サービスワーカー、webassembly、およびESモジュールのような最先端技術を活用することによって、次に.JS Liveは、Webブラウザで開発プロセス全体を置きます.
これは、コラボレーションのような可能性を開き、瞬時にURLで、ビルドステップなしで共有する.開発者にとって、これは速いフィードバックループ、ビルドの待ち時間が少なく、ブラウザ内のリアルタイムピアプログラミングと編集を意味します.
私はこのようなポストを作成することを奨励したい
Buy me a coffee