ba02680b7b
<!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change that you're making: --> ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper <jj@jjsweb.site> |
||
|---|---|---|
| .. | ||
| app | ||
| lib | ||
| public | ||
| styles | ||
| ui | ||
| .gitignore | ||
| .npmrc | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.json | ||
Next.js + Turbopack App Directory Playground
Turbopack is a new incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of Webpack and Next.js at Vercel. On large applications Turbopack updates 10x faster than Vite and 700x faster than Webpack (benchmark). For the biggest applications the difference grows even more stark with updates up to 20x faster than Vite.
This playground is a mirror of the Next.js v13 App Directory Playground, but uses Turbopack as the Next.js development server (next dev --turbo).
As a reminder, Turbopack is currently in alpha and not yet ready for production. We appreciate your ongoing support as we work to make it ready for everyone.
Running Locally
- Install dependencies:
yarn - Start the dev server:
yarn dev
Note: The playground uses Tailwind CSS. However, Turbopack does not yet support fully PostCSS, but it does support CSS and CSS Modules. As a workaround, we run Tailwind through it's CLI upon postinstall. For live reload of CSS, you can run Tailwind in another process with the --watch flag or install concurrently and modify your dev script:
yarn install concurrently --dev
Then modify your dev script in package.json:
{
"scripts": {
"dev": "concurrently \"next dev --turbo\" \"npm run tailwind --watch\""
}
}
For more information, see: https://turbo.build/pack/docs/features/css#tailwind-css
Documentation
https://nextjs.link/with-turbopack