静的アセット

Web向けバンドルの一部として、Webがサポートするすべてのアセットタイプ（画像、ビデオ、JSON、フォントなど）を処理することが含まれます。Turbopackは、すぐに使いこなせる使い慣れたツールを提供します。

静的アセットのインポート

静的アセットのインポートは、Turbopackでそのまま動作します。

import img from './img.png'

Next.js

webpackやその他のフレームワークでは、画像をインポートすると、その画像のURLを含む文字列が返されます。

import img from './img.png';
 
console.log(img); // /assets/static/1uahwd98h123.png

Next.jsでは、画像をインポートすると、実際には画像に関するさまざまなメタデータを含むオブジェクトが返されます。これは、Next.jsのImageコンポーネント (新しいタブで開きます)に供給できるようにするためです。

画像からメタデータのオブジェクトを抽出する動作は、**まだサポートされていません**。今のところ、インポートされた画像は文字列に解決されます。

パブリックディレクトリ

/publicディレクトリを使用すると、WebサイトのルートURLで利用できるようにしたいアセットを配置できます。たとえば、public/favicon.pngはhttps://example/favicon.pngで利用できます。

Turbopackでは、/publicディレクトリは、そのままサポートされています。

JSON

ほとんどのフレームワークでは、JSONをアプリケーションに直接インポートできます。

import fixtures from './fixtures.json';

これは、そのJSONで名前付きインポートを実行する場合と同様に、Turbopackでそのままサポートされています。

import { users, posts } from './fixtures.json';