NEXT.js テストアプリ

NEXTを勉強するためだけのアプリフォークして使うと便利

技術セット

• Node.js 20
• Next.js
• Prisma
• phpMyAdmin
• MariaDB
• TailwindCSS
• TypeScript

開発環境

• MacOS
• DockerDesktop
• GithubDesktop
• VisualStudioCode

開発環境構築てじゅん

1. 環境変数ファイルのコピー

開発用環境変数ファイルを読み込み用環境変数としてコピーします。

cp .env.loacl .env

2. Dockerコンテナのビルド

NEXT.jsやデータベースを動作させるためのDockerコンテナをビルドします。

docker-compose up -d --build

3. 依存関係のインストール

NEXT.js用の依存関係をインストールします。

docker-compose exec app npm install

4. データベースの初期設定

まず、モデル情報などをschema.prismaに統合します。

docker-compose exec app node scripts/merge-prisma.js

次にモデルなどのテーブル構造をデーターベースに登録します。

docker-compose exec app npx prisma migrate dev

END.

環境構築はこれで終了です。

開発環境の起動

以下のコマンドを実行してNEXT.jsを起動します。

docker-compose exec app npm run dev

アクセス情報

NEXT.js

http://localhost:3000

phpMyAdmin

http://localhost:8080