はじめに
こんばんは！Testarossaです！
プログラミングを初めて1ヶ月の初心者です。
Reactの基礎を終えた後、次に何を学ぶべきか。本記事では、Next.jsを使ったモダンなWebアプリ開発から、GitHubでのブランチ管理、Supabaseを使ったデータベース連携まで、実際に遭遇したエラーとその解決策を交えて解説します。
今回の記事は長くなりそうなので何段階か分割してとうこうします。
ステップ1：GitHub主体のプロジェクト開始とGitの壁
プロジェクトの開始時に、GitHubのリポジトリとローカル環境を同期させる際、よく遭遇する「Non-fast-forward」エラーの解決からスタートしました。
遭遇した問題
git push した際に、リモートとローカルの履歴が異なり拒否される。
解決策
# リモートの変更を取り込む
git pull origin main --allow-unrelated-histories
# または、GitHubからクローンし直した後に create-next-app を実行
npx create-next-app@latest .
ステップ2：Next.js App Routerの基本とディレクトリ構造
Next.js 13以降の標準である App Router を学びます。
学んだポイント
-
ファイルシステムルーティング:
app/about/page.tsxを作るだけで/aboutというページが完成する。 -
srcフォルダの有無: プロジェクト作成時の選択肢で
srcフォルダの有無が決まるが、どちらでも動作に影響はない（今回はsrcなし構成）。 -
共通レイアウト:
layout.tsxを使うことで、全ページ共通のヘッダーやフッターを簡単に実装可能。
ステップ3：インタラクティブな機能とデータ取得
ReactのHooks（useState）と、Next.js独自のデータ取得手法を組み合わせます。
-
Client Components:
use clientを宣言して、フォーム入力やボタンクリックなどの動きを作る。 - Data Fetching: APIからデータを取得し、ページに表示する。
- Server Actions: フォーム送信時にサーバー側で直接処理を行うNext.jsの強力な機能。
ステップ4：Supabaseによるバックエンドの構築
データベースには Supabase を採用しました。
💡 苦労したポイント：環境変数のエラー
⨯ Error: supabaseUrl is required.
このエラーは、.env.local ファイルに記述した NEXT_PUBLIC_SUPABASE_URL が正しく読み込まれていない、あるいは定義されていないことが原因です。
解決策:
- Supabaseの
Project Settings > APIから URL と Anon Key をコピー。 -
.env.localに正確に貼り付け、サーバーを再起動する。
ステップ5：RLS（Row Level Security）の壁を越える
データを投稿しても反映されない問題。これはSupabaseのセキュリティ機能 RLS が原因でした。
RLSの設定方法
投稿（INSERT）を許可するためには、ポリシーを作成する必要があります。
| 項目 | 設定内容 |
|---|---|
| Policy Name | Enable insert for anonymous users (任意) |
| Policy Command |
INSERT (および SELECT) |
| Target Roles | anon |
| WITH CHECK |
true (すべての投稿を許可する場合) |
注意: 開発中は
Disable RLSで通すことも可能ですが、本番公開前には必ず適切なポリシー（認証済みユーザーのみ等）を設定しましょう。
まとめ：学習を終えて
最初はGitのエラーで立ち止まりましたが、最終的にはSupabaseと連携した掲示板を完成させることができました。
- Next.js はルーティングが直感的。
- Server Actions はAPIエンドポイントを作る手間を省いてくれる。
- Supabase はRLSさえ理解すれば、最強の味方になる。
ここまでがその1になります。
次回はログイン機能を実装するところとそのあとやったことを投稿します！