Zenn
📔

Laravel Sail + Next.js のローカル環境構築

2024/03/24に公開
Docker
Laravel
Next.js
Laravel Sail
idea

今回は、Laravel Sail に対して、初めてNext.jsを導入したので、
備忘録としてまとめていきます！

実行環境・使用したツールなど

・WSL
・Docker
・Git

今回は作成済みのLaravelプロジェクトに対して、Next.jsを導入します。
Laravelプロジェクトの作成方法については、過去の記事で触れているので、
こちらを参考にしてください。

https://zenn.dev/kaxia7216/articles/9f4ee1d7fe4216

Next.jsリポジトリのクローン

今回は公式のスターターキットから、Next.js Edition をlaravelプロジェクト内にクローンしていきます。

クローンしたフォルダ内にある、.env.exampleファイルを.env.localにリネームします。

cd laravel-app/

git clone https://github.com/laravel/breeze-next.git frontend

mv frontend/ .env.example frontend/ .env.local

docker-compose.ymlに追記する

次に、laravelプロジェクトのdocker-compose.ymlにNext.jsの設定を追記します。

frontend:
    image: "node"
    volumes:
        - "./frontend:/var/www/html"
    working_dir: "/var/www/html"
    ports:
        - "3000:3000"
    command: bash -c "npm install && npm run dev"

laravel をAPIモードに変更

プロジェクトを起動します。

./vender/bin/sail up -d

Next.jsとlaravelを連携させるには、BreezeをAPIモードでインストールする必要があります。
以下のコマンドを実行してください。

./vendor/bin/sail shell

composer require laravel/breeze --dev

php artisan breeze:install api

続けて、マイグレーションを実行してDBを作成します。

php artisan migrate

localhostでlaravelのバージョンが表示され、
localhost:3000でlaravelのトップ画面が表示されれば成功です！

Discussion