🪴 農業の現場から：栽培管理アプリを作ってます（Next.js × Supabase）

2025年10月31日2025年11月23日

はじめに

「出荷アプリ開発記録」から、出荷伝票管理をテーマに未熟ながらアプリを作りました。
今回から、「栽培管理」をテーマにしたアプリを自作してみることに挑戦してみようと思います。

これまでスプレッドシートで取っていた日々のメモ（灌水・施肥・作業記録など）を、Next.js × Supabase で整理していきます。

注意: 2025年11月時点の情報に基づいています。Supabase/Next.jsのエコシステムは活発に開発が進んでいるため、将来的に推奨方法が変わる可能性があります。

🧩 開発環境（全体構成図）

macOS をベースに、Homebrew 経由で開発ツールを整えました。
下図はざっくりとした構成イメージです。

🪜 実際の「流れ」としてはこう動く

1️⃣ Homebrew が土台を用意する
　↓
2️⃣ Homebrew 経由で nvm / pnpm / supabase / gh をインストール
　↓
3️⃣ nvm で Node.js を入れる（自動でPATHを通す）
　↓
4️⃣ pnpm で Next.js や React、Tailwind を入れてプロジェクト構築
　↓
5️⃣ Supabase CLI でバックエンドを操作（必要なら）
　↓
6️⃣ Cursor / VS Code で開発
　↓
7️⃣ 完成したら Vercel にデプロイ

⚙️ 使用技術の詳細

分類	使用技術・ツール	役割・説明
OS	macOS	開発環境全体のベース
パッケージ管理	Homebrew	nvm・pnpm・gh などのCLIツールを管理
Node環境	nvm / Node.js / npm / pnpm	Next.jsやSupabase CLIなどを動かす実行基盤
フロントエンド	Next.js（TypeScript）	アプリのUI・画面部分
バックエンド	Supabase	認証・データベース・RLS制御
GitHub連携	gh CLI / GitHub	コードのバージョン管理・push操作
開発エディタ	VS Code / Cursor	コードを書く場所。AI補助（Cursor, ChatGPT, Claude）も使用
デプロイ環境	Vercel	アプリの本番公開場所
AI補助	Claude / Cursor / ChatGPT	設計・リファクタ・UI提案などを支援

🛠️ 初期セットアップ手順

と、いうわけで初期設定。

最小構成でNext.js＋Supabaseの環境を整えています。

# Node.js（LTS版）をインストール
nvm install --lts
nvm use --lts

# Next.js（TypeScript）プロジェクト作成
pnpm create next-app . --typescript
# ↓ 途中で聞かれたこと
# 1. Linter?                 → ESLint
# 2. Tailwind CSS?           → Yes
# 3. Use src/ directory?     → Yes
# 4. Use App Router?         → Yes（Next.js 15+ 標準）
# 5. Use Turbopack?　　　　　 → No
# 6. Customize import alias? → No

# Nodeバージョンを固定化
echo "24.11.0" > .nvmrc

# Supabase SDKを追加
pnpm add @supabase/supabase-js
pnpm add @supabase/ssr

**追記**: この記事執筆時点ではsupabase-jsを使用していましたが、現在は@supabase/ssrで制作しています。移行の経緯と手順は[続編記事]をご覧ください。

🌀 Git 初期化と GitHub 連携

ここまでの環境構築ができたら、GitHubにプッシュして管理できるようにします。
以下のように空のリポジトリを作成して、ローカルと接続します。

🔧 GitHub側の設定（新規リポジトリ作成時）

項目	設定内容	補足
Owner	デフォルトのまま	自分のアカウントでOK
Repository name	cultivation-app	わかりやすい名前にする
Description	（空でOK）	後から変更可能
Visibility	Private（おすすめ）	公開したくなったらPublicへ変更可
Add README	Off	初回pushをスムーズにするため
Add .gitignore	Off	初期設定で自動生成されているため不要
Add license	No license	公開時にMITなどを追加可

💻 ターミナルで実行

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/******/******.git
git push -u origin main

💡このあと

.env.local にSupabaseのURLとAnon Keyを記述して接続確認を行います。

create-next-app の質問と意図

ESLint：品質担保の基本。
Tailwind CSS = Yes：UI実装を素早く。あとからでも導入可能だが最初から入れるのが楽。
src/ ディレクトリ = Yes：ディレクトリ構成が整理される。
App Router = Yes：新ルーター。今後はこちらが標準。
Turbopack ＝ Next.js が開発中の 新しいビルドツール（Webpackの後継）
Import alias のカスタマイズ = No：必要になったら tsconfig.json で設定すればOK。

Turbopackを恒常的に使いたい場合は、
package.json の dev スクリプトをこう変えるだけ👇

"scripts": {
  "dev": "next dev --turbo",
  "build": "next build",
  "start": "next start"
}

`.nvmrc` の意味と運用（プロジェクト切替時のコマンド込み）

.nvmrc は「このプロジェクトはこの Node.js バージョンで動かす」という“目印”ファイル。
フォルダに入って nvm use するだけで、.nvmrc のバージョンに自動切替できます（未インストールなら nvm install）。

# 現在の Node バージョンを書き出して固定したいとき
node -v > .nvmrc

# プロジェクトに入ったら、そのバージョンに切り替える
nvm use          # .nvmrc を見て自動で切替
# もし未インストールなら
nvm install      # .nvmrc のバージョンを入れる

例：出荷アプリに戻るとき

出荷アプリ側にも .nvmrc がある前提。

# 栽培管理アプリ（今の作業）から離れて…
cd ../shipment-demo/        # 出荷アプリのディレクトリへ
node -v　　　　　　　　　　　# 念のためバージョンを確認
nvm use                      # 出荷アプリの .nvmrc を自動で読み込む
# （未インストールなら）
nvm install

プロジェクトごとに Node を固定しておくと、「いつの間にか最新化→ビルドが壊れた」といった事故を防げます。

「開発中は固定、プロジェクトを始める時だけ最新化」というあなたの方針と相性がいいやり方です。

依存関係の復元：`node_modules/` と `pnpm-lock.yaml` の扱い

リポジトリをクローンした直後や、node_modules/ が空のときは依存を復元します。
状況に応じて以下を使い分け。

# 1) lockfile が無い（初回 or 手動で消した）／node_modules も無い
pnpm install
# → package.json から解決して新しい pnpm-lock.yaml を生成し、node_modules を構築

# 2) lockfile がある（バージョンを厳密再現したい）
pnpm install --frozen-lockfile
# → lockfile を絶対に変えずに node_modules を再現（CI や本番と同じ解決にしたいとき）

# 3) まず lockfile だけ作りたい（CI 前に解決差分を確認したい等）
pnpm install --lockfile-only