Static Assets

Part of bundling for the web is handling all the asset types the web supports - images, videos, JSON, fonts, 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 actually 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).

The behavior of extracting an object of metadata from the image is not yet supported. For now, imported images will resolve to strings.

Public directory

The /public directory lets you place assets which you want to be available on the root URL of the website. For instance, public/favicon.png will be available at https://example/favicon.png.

In Turbopack, the /public directory is supported out of the box.

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