Exploring Turbopack with Next.js 13

Hey everyone,

I recently wrote an article about Turbopack, which is being hailed as the successor to Webpack. It promises some serious speed improvements when it comes to bundling and optimizing JavaScript/TypeScript applications. What's cool about it is that it's written in Rust, known for its high performance and memory safety.

The key feature that caught my eye is "Incremental Bundling". This strategy optimizes the delivery of JavaScript and CSS files, making it super efficient, especially for larger projects.

Enabling Turbopack in Next.js 13

{
 "scripts": {
 "dev": "next dev --turbo",
 "build": "next build",
 "start": "next start",
 "lint": "next lint"
 }
}

NOTE: Turbopack is currently in beta and not ready for production use.

Has anyone here tried using Turbopack with Next.js 13? I'd love to hear your experiences or any tips you might have! 😊

Comments

[NathLowe]

I experimented with it, it was very fast. I encountered an issue with React i18n and turbo, as turbo could not load the translation.

I also added a new script called turbo instead of modifying the dev one. This way, I can easily switch between them.

{
    "scripts": {
        "dev": "next dev",
        "turbo": "next dev --turbo",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    }
}

[Rajae Robinson]

Hey NathLowe, thanks for sharing your experience. And, nice tip on creating a separate turbo script to make things more convenient. I'll definitely consider using it