TypeScript Next.js でトップレベルの「await」を使用する方法

Question

次のようにトップレベルで「await」を使用すると:

リーリー

ターミナルに「set Experiments.topLevelAwait true」という警告が表示されます。 「tsconfig.json」に追加しようとしても、まだ機能しません。 「実験的な」プロパティは存在しないと表示されます。

async関数でラップすることもできるのですが、ラップ関数を使わずに設定したいのです。

Answer 1

この記事の執筆時点でうまくいった最新の解決策は、SWC の代わりに Babel を使用することです。Next.js ではカスタム SWC 構成が許可されていないため、# 経由で topLevelAwait を許可することはできません。 ##。 swcrc ファイル。

1. @babel/plugin-syntax-top-level-await という名前の Babel プラグインを package.json に追加します。
＃＃＃例えば。

リーリー

2. package.json

   が存在するプロジェクトのルート ディレクトリに .babelrc ファイルを作成します。

3. next/babel

   プリセットと topLevelAwait プラグインを .babelrc に必ず含めてください。

   ＃＃＃例えば。
リーリー

Next.js チームが SWC 構成を含めることを許可するまでは、これが最も単純なソリューションでした。これを行うと、SWC が無効になって Babel が優先されるため、SWC のパフォーマンス上の利点が得られなくなることに注意してください。

Answer 2

tsconfig.json とは関係ありません。 next.config.js で設定する必要があります。 next.js の新しいバージョンは、トップレベルの await をサポートする webpack5 を使用します。

リーリー ＃＃＃＃＃＃知らせ＃＃＃＃＃＃

機能コンポーネントの外で使用する必要があります: リーリー 次の 13 件のアイテム

同じ設定が「pages」ディレクトリと「app」ディレクトリの「next」に適用されます: "^13.1.6"

。 (この機能は next.js 機能ではなく

webpack5

機能であるため) 次のサンプル コードを使用してテストできます。 リーリー

警告 実験的なものなので、バージョンによっては壊れる可能性があります