Tech Blog

Next.js 13 + Turbopack

Cover Image for Next.js 13 + Turbopack

Next.js 13 マイグレーションついでに Turbopack (Alpha) を試してみる

今回の環境

TL;DR

1. 環境構築

コマンドパレット > Dev Containers: Add Dev Container Configuration Files... > Node.js & TypeScript > 16-bullseye (default)

Dev Containers: Add Dev Container Configuration Files...

2. プロジェクト作成

npx -y create-next-app --example with-turbopack \
    with-turbopack-app
Creating a new Next.js app in /workspaces/with-turbopack-app/wi
th-turbopack-app.

Downloading files for example with-turbopack. This might take a
moment.

Installing packages. This might take a couple of minutes.


> postinstall
> npm run tailwind


> tailwind
> tailwindcss -i styles/globals.css -o styles/dist.css


Rebuilding...

Done in 701ms.

added 461 packages, and audited 462 packages in 4m

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Success! Created with-turbopack-app at /workspaces/with-turbop
ack-app/with-turbopack-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd with-turbopack-app
  npm run dev

3. デバッガー設定

  // .vscode/launch.json
+ {
+     // Use IntelliSense to learn about possible attributes.
+     // Hover to view descriptions of existing attributes.
+     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+     "version": "0.2.0",
+     "configurations": [
+         {
+             "type": "node-terminal",
+             "request": "launch",
+             "name": "Next.js: debug full stack",
+             "command": "npm run dev",
+             "serverReadyAction":{
+                 "action": "debugWithChrome",
+                 "pattern": "started server on .+, url: (https?://.+)",
+                 "uriFormat": "%s"
+             }
+         },
+         {
+             "type": "node-terminal",
+             "request": "launch",
+             "name": "Next.js: debug server-side",
+             "command": "npm run dev"
+         },
+         {
+             "type": "chrome",
+             "request": "launch",
+             "name": "Next.js: debug client-side",
+             "url": "http://localhost:3000"
+         }
+     ]
+ }

4. 実行

コマンドパレット > > Debug: Start Debugging (F5)

Next.js: debug server-side

Next.js: debug client-side

参考にしたページ