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

2022年1月24日月曜日

Next.js react

t f B! P L

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

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です。

enter image description here

デバッグする環境を作る

- "dev": "next dev",
+ "dev": "NODE_OPTIONS='--inspect' next dev",
スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ