Static Assets
Part of bundling for the web is handling all the asset types the web supports - images, JSON, and much more. Turbopack offers familiar tools for these so you can immediately get productive.
Import static assets
Importing static assets works out of the box with Turbopack:
import img from "./img.png";
Next.js
In webpack and some other frameworks, importing an image returns a string containing that image's URL.
import img from "./img.png";
console.log(img); // /assets/static/1uahwd98h123.png
In Next.js, importing an image returns an object, containing various metadata about the image. This is so it can be fed into Next.js's Image component (opens in a new tab).
JSON
Most frameworks allow you to import JSON directly into your application:
import fixtures from "./fixtures.json";
This is supported out of the box with Turbopack, as is performing a named import on that JSON:
import { users, posts } from "./fixtures.json";