Skip to content

Commit

Permalink
Update Next.js mention in Turbopack docs (#7928)
Browse files Browse the repository at this point in the history
### 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
timneutkens and padmaia authored Apr 10, 2024
1 parent ba01e39 commit 63282a5
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 16 deletions.
4 changes: 2 additions & 2 deletions docs/pages/pack/docs/features/frameworks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ React Server Components impose unusual constraints on your bundler. The mix of c

Turbopack has been built from the ground up to solve these problems - it works with React Server Components out of the box.

## Next
## Next.js

To begin with, Turbopack is focused on providing a great experience for Next.js's dev server. We're using this as our initial goal to show what Turbopack can do. In the future, we want Turbopack to act as a low-level engine for other frameworks.
To begin with, Turbopack is focused on providing a great experience for the Next.js dev server. We're using this as our initial goal to show what Turbopack can do. In the future, we want Turbopack to act as a low-level engine for other frameworks.

## Vue and Svelte

Expand Down
20 changes: 6 additions & 14 deletions docs/pages/pack/docs/features/static-assets.mdx
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";
```

0 comments on commit 63282a5

Please sign in to comment.