Frameworks

Turbopack plans to offer first-class support for multiple frameworks. No matter whether you're using Svelte, React, Vue.js, or another framework, we want to provide a great experience on Turbopack.

React

JSX/TSX

.jsx and .tsx files are supported out of the box with Turbopack. We use SWC (opens in a new tab) to compile your JavaScript and TypeScript code, which results in extremely fast compilation.

Similar to Next.js, Turbopack doesn't require you to import React in order to use JSX:

- import React from 'react';
 
const Component = () => {
  return <div />
}

React Server Components

React Server Components let you declare certain components as 'server' components, allowing you to run backend code inside an async function. Next.js 13+ brings first-class support for them (opens in a new tab).

React Server Components impose unusual constraints on your bundler. The mix of client and server code means you need to ensure that server code does not get compiled to the client, and vice versa.

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

Next

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.

Vue and Svelte

VueJS (opens in a new tab) and Svelte (opens in a new tab) are tremendously popular frameworks which deliver a world-class developer experience.

Since Turbopack is in beta, we're focusing our support on Next.js's dev server. That means that right now, Vue and Svelte don't work out of the box.

In future versions, we'll be supporting Vue and Svelte via plugins.