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'
import video from './video.mp4'
import audio from './audio.wav'

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.

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';
Last updated on 2022-10-23T18:47:10.000Z