Next.js 13 マイグレーションついでに Turbopack (Alpha) を試してみる
今回の環境
TL;DR
1. 環境構築
コマンドパレット > Dev Containers: Add Dev Container Configuration Files... > Node.js & TypeScript > 16-bullseye (default)
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)