diff --git a/docs/pages/pack/docs/features/frameworks.mdx b/docs/pages/pack/docs/features/frameworks.mdx index 14498c0ef2043..bfe9db931074d 100644 --- a/docs/pages/pack/docs/features/frameworks.mdx +++ b/docs/pages/pack/docs/features/frameworks.mdx @@ -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 diff --git a/docs/pages/pack/docs/features/static-assets.mdx b/docs/pages/pack/docs/features/static-assets.mdx index fd13d8d0ff0d4..0b42f69957b2a 100644 --- a/docs/pages/pack/docs/features/static-assets.mdx +++ b/docs/pages/pack/docs/features/static-assets.mdx @@ -1,13 +1,13 @@ # 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 @@ -15,31 +15,23 @@ import img from './img.png' 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"; ```