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";