フレームワーク

Turbopackは、複数のフレームワークに対してファーストクラスのサポートを提供することを計画しています。Svelte、React、Vue.js、またはその他のフレームワークを使用しているかに関わらず、Turbopack上で素晴らしい開発体験を提供したいと考えています。

React

.jsx および .tsx ファイルは、Turbopackでそのままサポートされています。SWC (新しいタブで開きます) を使用してJavaScriptとTypeScriptコードをコンパイルするため、非常に高速なコンパイルを実現します。

Next.jsと同様に、TurbopackではJSXを使用するためにReactをインポートする必要はありません。

- import React from 'react';
 
const Component = () => {
  return <div />
}

React Server Componentsを使用すると、特定のコンポーネントを「サーバー」コンポーネントとして宣言し、async関数内でバックエンドコードを実行できます。Next.js 13+はそれらに対するファーストクラスのサポートを提供します (新しいタブで開きます)。

React Server Componentsは、バンドラーに特殊な制約を課します。クライアントとサーバーのコードが混在するため、サーバーコードがクライアントにコンパイルされないように、またその逆も同様にする必要があります。

Turbopackはこれらの問題を解決するためにゼロから構築されました。React Server Componentsをすぐに使用できます。

まず、TurbopackはNext.jsの開発サーバーに対する優れたエクスペリエンスの提供に重点を置いています。これは、Turbopackの機能を示すための最初の目標として使用しています。将来的には、Turbopackを他のフレームワークの下位レベルのエンジンとして機能させたいと考えています。

VueJS (新しいタブで開きます) と Svelte (新しいタブで開きます) は、世界クラスの開発者エクスペリエンスを提供する非常に人気のあるフレームワークです。

Turbopackはベータ版であるため、Next.jsの開発サーバーへのサポートに重点を置いています。つまり、現時点ではVueとSvelteはすぐに動作しません。

今後のバージョンでは、プラグインを介してVueとSvelteをサポートする予定です。