プログラミング初心者のための入門ブログエンジニアが未来を切り開く。新機能と変更点を詳しく解説!この広告は、90日以上更新していないブログに表示しています。13向けに多くの優れた機能が発表されたことをご存知でしょう。13以降から魅力的な新機能が大量に追加され、Reactのサーバー側レンダリングと、それがインタラクティブなクライアント側コンポーネントと接続する方法がより魅力的で一貫したものになります。13以降のいくつかの新機能を詳しく掘り下げて、アップグレードによる主な変更点を初心者に詳しく解説していきます。13はまだ実験版であるため、運用アプリ(本番環境)での使用は推奨しません。コミュニティは現在も開発と改善に取り組んでいます。13の特典がすべて含まれるようになります。v13Next.jsは、2,400人以上の個々の開発者、GoogleやMetaのような業界パートナー、そして私たちのコアチームの共同作業の結果です。週に300万以上のnpmのダウンロード数と94,000以上のGitHubのスターを誇るNext.jsは、Webを構築するための最も人気のある手段の一つです。14.6.0以降がインストールされている必要があります。13以降ではReactの最小バージョンは17.0.2から18.2.0に変更されました。12.x.xがサポート終了になったため、Node.jsの最小バージョンは12.22.0から14.6.0に変更となります。13をインストールします。my-next-app新しいappフォルダを除いては、生成されるファイルとフォルダは以前のバージョンとほぼ同じです。13.3以降では、静的エクスポートの構成オプションが変更されました。'static'を設定することで静的エクスポートを有効にしていましたが、新しいバージョンではoutputプロパティを使用します。nextConfig;上記のコードでは、nextConfigという変数にNext.jsの構成オプションを定義しています。outputプロパティは、エクスポートされる静的ファイルの出力ディレクトリを指定します。上記の例では、'export'という値が設定されているため、静的ファイルは/exportディレクトリに出力されます。このnextConfigオブジェクトをmodule.exportsでエクスポートすることで、Next.jsアプリケーションでこの構成を使用できます。上記の設定コードでは、nextConfig変数の型アノテーションが含まれており、TypeScriptを使用していることを前提としています。TypeScriptを使用していない場合は、型アノテーションを削除して以下のように書いてください。nextConfig;この設定により、TSを使用しない静的ファイルは/exportディレクトリに出力されます。このコードを使用する前に、Next.jsのバージョンが13.3以上であることを確認してください。他の構成オプションが必要な場合は、nextConfigオブジェクトに追加してカスタマイズすることができます。Generation)の場合でもnext.config.jsファイルの変更が必要です。13.3以降ではoutputプロパティを使用します。'export'をご自身で設定する必要があります。この設定により、静的ファイルは/exportディレクトリに出力されます。13.3では、以前のバージョンと比較してアプリのディレクトリ構造が変更されました。以前のバージョンでは、pagesディレクトリ内に作成されたファイルがUIのルートとして機能していました。新しいバージョンでは、pagesディレクトリの隣にappディレクトリが追加され、新たな機能や変更点が導入されました。新しいappディレクトリは、段階的な導入をサポートし、サーバーサイドレンダリング(SSR)や静的サイトレンダリング(SSG)などの他の新機能を提供します。appディレクトリ内では、レイアウト、サーバーコンポーネント、ストリーミング、データフェッチなどの機能もサポートされています。13.3のディレクトリ構造を比較して解説します。...上記の構造では、pagesディレクトリ内に作成された各ファイルがUIのルートとして機能していました。pages/index.jsはルートURLのメインページとして表示され、pages/about.jsは/aboutパスのページとして表示されるといった具体的な役割を持っていました。componentsディレクトリには再利用可能なコンポーネントが配置され、stylesディレクトリにはグローバルなスタイルが定義されていました。13.3では、新たにappディレクトリが導入されました。新しいディレクトリ構造は以下のようになります。...appディレクトリはpagesディレクトリの隣に配置され、プロジェクトのルートディレクトリに追加される形となります。この変更により、appディレクトリはより多機能なアプリケーションの構築をサポートします。app/pagesディレクトリ内の各ファイルは以前と同様にUIのルートとして機能します。app/componentsディレクトリは再利用可能なコンポーネントを配置する場所であり、app/stylesディレクトリはグローバルなスタイルの定義に使用されます。pagesディレクトリを保持し、appディレクトリと併存させることもできます。appディレクトリを追加しないことも可能です。これらを行う必要があるのは、next.config.jsに次のコードを追加してNextに使用することを伝えることです。}という設定は、Next.jsの実験的な機能を有効にするためのオプションです。具体的には、appDirオプションをtrueに設定しています。この設定により、先ほどの話で言及した新しいレイアウト機能を使うために、Next.jsはappディレクトリをプロジェクトのルートに作成します。pagesディレクトリとappディレクトリを併存させ、pagesディレクトリは従来のNext.jsのページコンポーネントを格納するためのディレクトリであり、appディレクトリは新しいストリーミング機能を利用するためのディレクトリです。これによって、より柔軟なルーティングとレイアウトの管理が可能になります。この機能はまだベータ版であり、完全にオプションです。appディレクトリを使用しない場合は、この設定を省略することもできます。この変更により、Next.jsはより柔軟性があり、より複雑なアプリケーションの開発をサポートするようになりました。13.3では、TypeScriptのバージョンが4.4にアップグレードされました。これにより、最新のTypeScriptの機能やパフォーマンスの向上が利用可能になります。4.4のアップグレードにより、以下のような具体的な機能が利用可能になります。4.4では、新しいアサーション関数が導入されました。これにより、特定の型をアサート(確認)するためのカスタムな関数を定義できます。assertNonNullというカスタムなアサーション関数を作成して、特定の変数がnullではないことを保証することができます。4.4では、テンプレート文字列に型情報を追加することができます。テンプレート文字列内で${}を使用する際に、その中に含まれる式の型を正確に推論できます。4.4では、クラスのプロパティの型推論が改善されました。コンストラクタの引数として受け取った値を元に、クラス内のプロパティの型を推論することができます。4.4では、オブジェクトのインデックスシグネチャにおいて、シンボルやテンプレート文字列を使用することができます。これにより、より柔軟なキーの型指定が可能になります。4.4にはさまざまな他の改善や機能追加も含まれています。4.4のアップグレードにより、開発者はより効率的で安全なコーディングを行うことができます。13以降では、Webpackのバージョンが5.50にアップデートされました。これにより、最新のWebpackの機能やパフォーマンスの向上が反映されます。13.3におけるWebpackのバージョンアップ(5.50)による、具体的な機能やパフォーマンスの向上反映は以下です。キャッシュの改善:新しいWebpackのバージョンでは、キャッシュの仕組みが改善されました。ファイルの変更を検知してキャッシュを更新する仕組みが最適化され、ビルドの高速化と効率的なキャッシュ管理が可能になりました。5は、ビルドパフォーマンスの改善に焦点を当てています。キャッシュの改善、並列処理の最適化、キャッシュの再利用などの機能により、ビルドの高速化が図られています。5では、モジュール解決のアルゴリズムが改善されました。スマートな解決アルゴリズムにより、モジュールの依存関係の解決が効率的に行われます。5では、モジュールバンドルの最適化が進められました。バンドルサイズの削減や、効率的なコード分割、ツリーシェイキングなどの機能により、アプリケーションのパフォーマンスが向上します。これらの機能と改善により、Webpackのバージョンアップ(5.50)によって、Next.jsのビルドパフォーマンスやモジュール解決、モジュールバンドルの最適化が向上し、より効率的な開発環境が提供されるようになりました。13.3では、インターナショナリゼーション(多言語対応)の機能が向上しました。next/linkやnext/routerで使用するリンクやURLに対して、多言語パラメータを簡単に追加できるようになりました。以下のような具体的な機能が追加されました。ルートリンクの多言語サポート:next/linkやnext/routerを使用して生成されるリンクやURLに対して、簡単に多言語パラメータを追加できるようになりました。これにより、異なる言語のコンテンツを表示する際に、適切な言語パラメータを自動的に追加できます。routes)に対しても、多言語パラメータを簡単に追加できるようになりました。動的なパスセグメントに対して、異なる言語の情報を追加することができます。/products/[productId]という動的なルートであれば、/products/[productId]?lang=enといった形式で多言語パラメータを指定できます。言語切り替えの簡便化:インターナショナリゼーションの機能により、言語切り替えのためのリンクやボタンを簡単に作成できます。next/linkを使用して言語切り替えのリンクを作成する場合、適切な言語パラメータを含んだリンクを簡単に生成できます。13.3ではインターナショナリゼーションの実装が簡便化され、異なる言語のコンテンツを扱う際の開発効率が向上しました。多言語対応のWebアプリケーションを作成する際に、上記の機能を活用することで、ユーザーエクスペリエンスの向上と国際的な展開の容易化が図られます。13.3では、Imageコンポーネントのパフォーマンスと品質が向上しました。自動生成される画像サイズが最適化され、画像の表示や読み込みのパフォーマンスが改善されました。13以降ではnext/legacy-imageに変更して使用する必要があります。next-image-to-legacy-image:next/legacy/imageにリネーム変更することにより、以前のNext.jsバージョンと同じ動作にすることができます。props)等は使用できません。そのため、Next.jsは2つ目のコードモッドを用意しています。next-image-experimental:このコードモッドは、next-image-experimentalを実行した後、任意で実行できます。このコードモッドにより、最新機能を使用可能になります。注意点はこのコードモッドはまだ実験的であり、動的な使用には完全に対応されていません。13.3におけるImageコンポーネントのアップデートによる、具体的な変更点とパフォーマンス向上は以下です。自動生成される画像サイズの最適化:Imageコンポーネントは、画像の表示時に必要な最適なサイズの画像を自動的に生成します。13.3ではより効率的なサイズの画像が生成されるように改善されました。これにより、必要以上に大きな画像をダウンロードすることなく、適切なサイズの画像が表示されるため、ページの読み込み速度が向上します。画像の表示と読み込みのパフォーマンスの改善:Imageコンポーネントは、画像の表示や読み込みのパフォーマンスを向上させるためのさまざまな最適化が行われています。loading)が自動的に有効になり、画面に表示される直前まで画像の読み込みが遅延されます。ブラウザのビューポートに基づいた画像のプリロードやキャッシュ制御も行われます。これらの最適化により、ユーザーエクスペリエンスが向上し、ページのパフォーマンスが向上します。13.3におけるImageコンポーネントは、画像の表示と読み込みのパフォーマンスを大幅に改善し、ユーザーによりスムーズな体験を提供します。画像の最適化と効率的な読み込みにより、ページの速度やパフォーマンスが向上し、ユーザーエクスペリエンスが向上します。当サイトで詳しく解説していますので参照ください。v18を理解している方は、Reactコンポーネントがクライアント側コンポーネントとサーバー側コンポーネントの両方としてレンダリングできるようになった方法についてはすでにご存じかもしれません。13では、Reactアプリでのデータの取得方法が完全に変更されました。データの取得はgetServerSideProps()、getStaticProps()、getInitialPath()などのデータフェッチメソッドに精通していると思います。13以降では、これらのメソッドはアンチパターンとみなされ、使用は非推奨になりました。Next.jsエコシステムで最も話題となっている変更の1つは、新しいappディレクトリの導入です。従来のpagesディレクトリを作成し、すべてのページをそこに設定することもできますが、そうするとNext.jsバージョン13で提供される最新の素晴らしい機能を見逃すことになります。app/ディレクトリでは、Reactの新しいサーバーコンポーネントアーキテクチャのサポートが導入されています。アプリのルートが読み込まれると、キャッシュ可能で予測可能なサイズのNext.jsとReactのランタイムが読み込まれます。このランタイムは、アプリが成長してもサイズが増えることはありません。ランタイムは非同期に読み込まれるため、サーバーからのHTMLをクライアント上で段階的に拡張することができます。サーバーコンポーネントを使用することで、パフォーマンスの向上と開発者エクスペリエンスの向上を実現できる、効果的なアプリ開発の手法が導入されています。13以降では、ストリーミングのサポートが改善されました。13では、新しいstreamモジュールが導入され、サーバーサイドレンダリング(SSR)時にストリーミングを行うことができるようになりました。これにより、大きなデータセットやリアルタイムデータのストリーミングを処理するために、Next.jsアプリケーションでストリーミングを使用することができます。ストリーミングを使用することで、速度とユーザーエクスペリエンスの向上に期待できます。以下は、インストール手順の流れです。プロジェクトのルートディレクトリに移動します。streamインストールが完了したら、streamモジュールを必要なファイルでインポートして使用することができます。'stream';上記のように、streamモジュールから必要なクラスや関数をインポートすることができます。Readableは読み込み可能なストリーム、Writableは書き込み可能なストリーム、Transformは変換可能なストリームを表します。インポートしたクラスや関数を使用する際には、適切なインスタンスを作成してストリームの操作を行っていきます。app/ディレクトリでは、UIのレンダリングユニットを段階的にレンダリングし、クライアントに対して増分的にストリーム配信する機能を導入します。ComponentsとNext.jsのネストされたレイアウトを使用することで、データを特に必要としないページの一部を即座にレンダリングし、データを取得しているページの一部にはローディング状態を表示することができます。このアプローチにより、ユーザーはページ全体の読み込みを待つ必要なく、キャッシュされているページの部分または更新する必要のないページの部分を即座にレンダリングし、新しいデータをフェッチしているページの部分を読み込むことで、読み込み時間を短縮できます。(Alpha)初めてリリースされて以来、Next.jsは内部でWebpackを使用してきました。30億回以上ダウンロードされています。これはWeb構築に不可欠な部分でしたが、JavaScriptベースのツールで可能な最大パフォーマンスの限界に達していました」と述べていました。v13でTurbopack(ターボパック)を発表しました。Turbopackは、「RustベースのWebpackの最大700倍高速、Viteよりも10倍高速な代替」として注目されています。開発に必要な最低限のみをバンドルしているため、起動時間が非常に高速です。Turbopackの起動に1.8秒かかります。12は6.3秒、Viteは11.4秒、Webpackは16.5秒かかります。Turbopackのアーキテクチャは、同じ作業を2回実行する必要がないようにキャッシュするという事実のおかげで、これらの速度を実現しています。これは関数が変更された場合にのみ再実行されることを意味しており、多くの実行時間をスキップしていることになります。Koppers氏から一般への開発者に向けて書かれたメッセージも含まれており、彼がこの新プロジェクトを主導していることは、フロントエンドコミュニティにとって非常に良いニュースです。13と一緒にTurbopackを使用することができます。--turbo"コマンドを使用する必要があります。Components、TypeScript、JSX、CSSなどをサポートしています。このプロジェクトはまだアルファ版の状態であり、多くの機能がまだサポートされていません。安定版のリリースが期待され、世界中のプロジェクトの速度向上に期待が寄せられています。続報があり次第、この記事を更新してお知らせします。13は素晴らしい新機能をもたらします。13以降では、ルーティングとレイアウトを改善するために、appディレクトリをNext.jsプロジェクトのルートに導入しました。この機能はまだベータ版であり、完全にオプションです。pagesディレクトリを保持し、appディレクトリと併存させることもでき、appディレクトリを追加しない選択肢もあります。13以降ではReactの最小バージョンは17.0.2から18.2.0に変更されました。12.x.xがサポート終了になったため、Node.jsの最小バージョンは12.22.0から14.6.0に変更されます。next.config.jsからtargetオプションが削除され、非推奨となりました。swcMinifyの設定プロパティがfalseからtrueに変更されました。Next.jsのコンパイラを参照してください。13のバージョンアップデートが皆さんにとって魅力的なものであることを願っています。本日は以上となります。最後まで読んで頂きありがとうございます。この記事が役に立ったら、ブックマークと共有をしていただけると幸いです。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。