Install NextJS 13 with Turbopack

In this section we will install next js 13 with Turbopack. Turbopack is like Vite tool alternative it written in Rust, and built into Next.js 13. Turbopack updates 10x faster than Vite and 700x faster than Webpack. For the biggest applications, the difference is even larger with updates up to 20x faster than Vite.

Install NextJS 13 with Turbopack

Run below command to create next 13 app wih turbopack.

npx create-next[email protected] --example with-turbopack

Move to project folder.

cd my-project

Run project.

 npm run dev
 # Starts the development server.

 npm run build
 # Builds the app for production.

 npm start
 # Runs the built app in production mode.

app/page.tsx

import { demos } from '@/lib/demos';
import Link from 'next/link';

export default function Page() {
  return (
    <div className="space-y-6">
      <div className="space-y-8 text-white">
        {demos
          .filter((section) =>
            section.items.some((x) => typeof x.isDisabled === 'undefined'),
          )
          .map((section) => {
            return (
              <div key={section.name} className="space-y-3">
                <div className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
                  {section.name}
                </div>

                <div className="grid grid-cols-2 gap-5">
                  {section.items
                    .filter((item) => !item.isDisabled)
                    .map((item) => {
                      return (
                        <Link
                          href={`/${item.slug}`}
                          key={item.name}
                          className="block space-y-1.5 rounded-lg border border-white/10 px-4 py-3 hover:border-white/20"
                        >
                          <div>{item.name}</div>

                          {item.description ? (
                            <div className="line-clamp-3 text-sm text-zinc-400">
                              {item.description}
                            </div>
                          ) : null}
                        </Link>
                      );
                    })}
                </div>
              </div>
            );
          })}
      </div>
    </div>
  );
}

nextjs 13 turbopack

Next 13 Features with Turbopack

1. Turbopack is very fast. you can see turbopack performance benchmarks

2. It come with new file conventions to allow you to easily create pages, shared layouts, and templates.

3. It come with styled-jsx, styled-components and tailwind css ui.

4. turbopack nextjs come with loading.js, Error Handling error.js, route-groups, hooks, context

Note: Turbopack is still Alpha mode please use in local.

For more details you can read turbopack document.