Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Next.js mention in Turbopack docs #7928

Merged
merged 3 commits into from
Apr 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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";
```
Loading