はじめに

実務経験半年ぐらいの頃に「Laravel × Next.js」の個人開発をしようと思っていましたが、結局技術的な部分で躓いてしまい、できませんでした。
ただ、半年前から作っていたものが割といい感じに仕上がってきたので、そのベースになる部分をサンプルとしてこの記事内で公開しようと思います！

ローカル環境はもちろんのこと、「X Server VPS」で動作することも検証済みで幅広く利用可能です。

検証環境

Mac(M2チップ)

※知人によると、WindowsでもWSL２上で動かせば動いたとのこと
（ホットリロード対策でWindowsでは、WSL２上で動かす必要がある）

環境構築手順

早速始めていきます。
ベースになるリポジトリを用意したので、これをcloneして進めていってもらえればと思います！

git clone https://github.com/yumelab-imai/origin_dev

※長いのであとは手順を淡々と書いていきます。

次のコマンドを実行

cp .env.example .env
docker compose build
docker compose up -d
docker-compose exec api bash

laravel関連のコンテナで、次のコマンドを実行

composer create-project --prefer-dist laravel/laravel .
php artisan key:generate
composer install
php artisan install:api
exit

src/.envの編集を行います

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=APP
DB_USERNAME=APP
DB_PASSWORD=password

続いて、フロント側も用意します。

app/node_modulesを削除して

docker-compose exec next bash

を実行して下さい。

Next.js関連のコンテナで、次のコマンドを実行

npx create-next-app@latest .

選択肢はこんな感じです

root@a829883aedf4:/app# npx create-next-app@latest .
✔ Would you like to use TypeScript? … No / 「Yes」
✔ Would you like to use ESLint? … No / 「Yes」
✔ Would you like to use Tailwind CSS? … No / 「Yes」
✔ Would you like to use `src/` directory? … 「No」 / Yes
✔ Would you like to use App Router? (recommended) … No / 「Yes」
✔ Would you like to customize the default import alias (@/*)? … 「No」 / Yes
Creating a new Next.js app in /app.

終えたら、

exit

でコンテナを抜けます。

Next.jsの初期設定を終えたので、docker関連ファイルを修正します。
次のように変更してください

docker-compose.yml

        command: npm run dev // コメントアウトを消して有効化
        depends_on:
            - api
        ports:
            - "3000:3000"
        # 最初だけ（後で削除）// いらないので削除
        # tty: true　　　　　// いらないので削除
        # stdin_open: true　// いらないので削除

docker/next/Dockerfile

# package.jsonとpackage-lock.jsonをコピー
COPY ./next/package*.json ./     // 有効化

RUN npm install                  // 有効化

最後に次のコマンドを叩いてコンテナを再実行してください

docker compose down
docker compose build
docker compose up -d

そうすると、

http://localhost/
でNext.jsで初期画面が確認可能です。

この画面で簡単にLaravelのAPIも叩いてみます。
次のコードのようにしてください

next/app/page.tsx

'use client'
import Image from "next/image";
import { useEffect } from "react";



export default function Home() {
  useEffect(() => {
    const fetchUser = async () => {
        const response = await fetch('http://localhost/api/user', {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
          },
        });
        const userData = await response.json();
        console.log('User data:', userData);
    };
  
  fetchUser();
}, []);

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
      ..................

そうすると認証で弾かれてしまいますが、次のようにAPI側のデータが渡ってくることが確認できます。

環境構築を終えた時点でアクセスできるURL一覧

補足

Makefileを用意しているので、
例えば

docker compose up -d

のようにコマンドを打たなくても

make up

でも同じことができます

最後に

ベースとして使ってこれをカスタムしていくことで色々なシステムが作れると思います！
是非参考にしていただければと思います!😆
※また、もっとこういう構成の方がいいというのがあれば是非ご教授いただきたいです！🙇

この続きとなる認証機能実装編もあるのでそちらも合わせて試してみてください！