Next.js×Laravelで開発する簡易アプリケーションのハンズオン

前提

• M1Macにも対応しています！
• Windowsでの動作確認は行っておらず環境構築のエラー対応はできないので悪しからず...

使用技術

• frontend: TypeScript/React/Next.js/Tailwind CSS
• backend(api): PHP/Laravel
• infra: Docker/Docker Compose

ブランチ指定でclone

git clone -b init https://github.com/shimotaroo/nextjs-laravel-hands-on.git

DB用Dockerfileの修正（M1Mac以外）

.docker/db/Dockerfileを修正

- FROM --platform=linux/x86_64 mysql:8.0
+ FROM mysql:8.0

ENV TZ=UTC

COPY my.cnf /etc/my.cnf

環境構築

make init

以下の状態になればOK

api(Laravel)

• apiディレクトリ内にLaravelがインストールされている
• localhost:80にアクセスするとLaravelのウェルカムページが表示される

frontend(Next.js)

• frontディレクトリ内にNext.jsがインストールされる
• localhost:3000にアクセスするとログイン画面が表示される

• localhost:3000/memosにアクセスするとメモ一覧画面が表示される

• localhost:3000/memos/postにアクセスすると登録画面が表示される

GUIツールでDBに接続

• Sequel Ace
• Table Plus

等のGUIツールでDB(MySQL)に接続。（以下接続情報）

ホスト: 127.0.0.1 ユーザー: sample パスワード: sample データベース: next_laravel

Next.jsの開発用サーバーの起動・停止

• 起動: make dev
• 停止: control + c