爆速構築！Remote Containerで Next.js 開発環境を構築する

プロジェクト用に、適当なディレクトリを作る。

mkdir next_sample

上で作成したディレクトリに docker-compose.yml を作成します。

version: '3'
services:
  app:
    image: node
    volumes:
      - ./:/app 
    ports:
      - "3000:3000"

Remote Container を開きます。

ターミナルを開き、次のコマンドで、Next.js のインストールと新しいアプリのプロジェクトを作成します。

npx create-next-app@latest my-app --typescript

インストールが完了したら、プロジェクトのルートフォルダに移動して、ビルト＆実行をします。

cd my-app
npm run build
npm run start

http://localhost:3000/ にアクセスして、スターターページが表示されればOKです。

デバッグする環境を作る

- "dev": "next dev",
+ "dev": "NODE_OPTIONS='--inspect' next dev",