Upgrading to Next.js version 13 with Turbopack

Next.js, a React framework, released version 13 in October 2022. We were maintaining a web application built with Next.js version 12, so we went ahead and upgraded. During the upgrade, we encountered several issues which we would like to share here.
We first started with the [.inline-code]next.config.js[.inline-code] configuration file. This file is created for the custom advanced configuration of Next.js. It is located in the root of your project directory (next to [.inline-code]package.json[.inline-code]).
In Next.js 12, our [.inline-code]next.config.js[.inline-code] file looks like this:
In version 13, Next.js’ SWC compiler is used for minification by default. It is claimed to be 7x faster than Terser (used by default in 12). So we no longer had to state [.inline-code]swcMinify: true[.inline-code] in [.inline-code]next.config.js[.inline-code] in order to use SWC. But if Terser is still needed for any reason, it can be configured as below:
Next, we tried out Turbopack, which is a new JavaScript bundler and the successor to Webpack. It is in alpha release and can be enabled in development mode. It is claimed that on large applications, Turbopack updates 10x faster than Vite and 700x faster than Webpack. To enable Turbopack, we started with the following change:
After starting up our development server, we encountered the below error:
Turbopack doesn’t currently support Tailwind CSS out of the box. But we had previously configured our application to use Tailwind CSS and PostCSS as below:
However, we found a workaround that allows Turbopack to work with Tailwind CSS.
We use [.inline-code]yarn[.inline-code] package manager to install the npm package called [.inline-code]concurrently[.inline-code]:
This adds [.inline-code]concurrently[.inline-code] as part of [.inline-code]devDependencies[.inline-code] in [.inline-code]package.json[.inline-code]:
Then we moved the [.inline-code]dev[.inline-code] and [.inline-code]build[.inline-code] commands to [.inline-code]scripts[.inline-code], and imported the compiled CSS output file.
[.inline-code]concurrently[.inline-code] allows us to run Tailwind CLI in parallel to compile our CSS [.inline-code]styles/globals.css[.inline-code] into an output file [.inline-code]styles/output.css[.inline-code]. We then import this output file in javascript code.
Starting up the development server again, we see that the Tailwind CSS issue is now solved.
But we ran into another issue:
For [.inline-code]next.config.js[.inline-code], not all the Webpack supported configurations are currently supported by Turbopack. Here are a few of them:
- [.inline-code]env[.inline-code]
This Next.js feature is using a Webpack plugin called DefinePlugin behind the scenes. More information can be found here:
• next.config.js: Environment Variables | Next.js
• DefinePlugin | webpack
- [.inline-code]images -> domains[.inline-code] for [.inline-code]next/image[.inline-code]
The [.inline-code]domains[.inline-code] is used to specify the allowed hostnames for external images.
- Sentry-related [.inline-code]withSentryConfig[.inline-code] and [.inline-code]sentryWebpackPluginOptions[.inline-code]
Sentry is an error-tracking tool which allows integration with Next.js. But it hasn’t supported building with Turbopack at the moment. More information can be found here:
• Next.js | Sentry Documentation
In conclusion, we were able to migrate to Next.js version 13. But we couldn’t enable Turbopack due to certain features not being supported yet.