筆者環境

• Windows10
• WSL2 (Ubuntu22.4)
• Docker Desktopアプリを使用していない

フロント

• Next.js 14
• App Router
• TypeScript
• Vercel

バック

• Ruby on Rails7.1.3 APIモード
• Heroku
• MySQL
• Heroku CLI

大本で参考にした記事

DockerでRailsAPIモード/Next.jsの環境構築をして、Fly.ioとVercelへデプロイしてみた

GitHubについて

今回バックとフロントのリポジトリを分けないやり方（サブモジュールを使わない）をご紹介します。理由は管理が楽だからです。 ただしバックとフロントをリポジトリごと分けたほうがメンテナンスがしやすいなど諸々利点があるので、サブモジュールをつかうか今回ご紹介する一括管理のほうにするかはお任せします。

ローカル環境作成

フロント環境構築

バック環境構築