-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update Next.js mention in Turbopack docs (#7928)
### Description Make sure name is consistent. <!-- ✍️ Write a short summary of your work. If necessary, include relevant screenshots. --> ### Testing Instructions <!-- Give a quick description of steps to test your changes. --> --------- Co-authored-by: Maia Teegarden <dev@padmaia.rocks>
- Loading branch information
1 parent
ba01e39
commit 63282a5
Showing
2 changed files
with
8 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,37 @@ | ||
# 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. | ||
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: | ||
|
||
```ts | ||
import img from './img.png' | ||
import img from "./img.png"; | ||
``` | ||
|
||
### Next.js | ||
|
||
In webpack and some other frameworks, importing an image returns a string containing that image's URL. | ||
|
||
```ts | ||
import img from './img.png'; | ||
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](https://nextjs.org/docs/basic-features/image-optimization#local-images). | ||
|
||
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. | ||
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](https://nextjs.org/docs/basic-features/image-optimization#local-images). | ||
|
||
## JSON | ||
|
||
Most frameworks allow you to import JSON directly into your application: | ||
|
||
```ts | ||
import fixtures from './fixtures.json'; | ||
import fixtures from "./fixtures.json"; | ||
``` | ||
|
||
This is supported out of the box with Turbopack, as is performing a named import on that JSON: | ||
|
||
```ts | ||
import { users, posts } from './fixtures.json'; | ||
import { users, posts } from "./fixtures.json"; | ||
``` |