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.

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