React版 YelpCampデモ

YelpCampReact
├── backend/        → Goのソースコードフォルダ
│   ├── go.mod
│   └── main.go
└── frontend/       → Reactのソースコードフォルダ
    ├── public/
    ├── src/
    └── package.json

cd c:\MAMP\htdocs\YelpCampReact\frontend
npx create-next-app@latest .

PS C:\MAMP\htdocs\YelpCampReact\frontend> npx create-next-app@latest .
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... No
√ Would you like your code inside a `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to use Turbopack for `next dev`? ... No
√ Would you like to customize the import alias (`@/*` by default)? ... Yes
√ What import alias would you like configured? ... <何も入力せずにリターンキー>
Creating a new Next.js app in C:\MAMP\htdocs\YelpCampReact\frontend.

Using npm.

Initializing project with template: app 


Installing dependencies:
- react
- react-dom
- next


added 25 packages, and audited 26 packages in 17s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created frontend at C:\MAMP\htdocs\YelpCampReact\frontend

PS C:\MAMP\htdocs\YelpCampReact\frontend> 

PS C:\MAMP\htdocs\YelpCampReact\frontend> npm run dev

> frontend@0.1.0 dev
> next dev

   ▲ Next.js 15.4.5
   - Local:        http://localhost:3000
   - Network:      http://192.168.11.19:3000

 ✓ Starting...
 ✓ Ready in 1544ms

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3002",
    "build": "next build",
    "start": "next start -p 3002",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "next": "15.4.5"
  }
}

cd c:\MAMP\htdocs\YelpCampReact\backend
go mod init yelpcampreact

package main
import "fmt"
func main() {
	fmt.Println("Hello!")
}

PS C:\MAMP\htdocs\YelpCampReact\backend> go run main.go
Hello!
PS C:\MAMP\htdocs\YelpCampReact\backend>

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Frontend: Next.js",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run",
                "dev"
            ],
            "cwd": "${workspaceFolder}/frontend",
            "console": "integratedTerminal",
        },
        {
            "name": "Backend: Go",
            "type": "go",
            "request": "launch",
            "mode": "auto",
            "program": "${workspaceFolder}/backend",
            "cwd": "${workspaceFolder}/backend"
        }
    ],
    "compounds": [
        {
            "name": "Debug All",
            "configurations": [
                "Frontend: Next.js",
                "Backend: Go"
            ]
        }
    ]
}

PS C:\MAMP\htdocs\YelpCampReact\frontend>  C:\; cd 'C:\MAMP\htdocs\YelpCampReact/frontend'; ${env:NODE_OPTIONS}=' --require "c:\/Users/admin/AppData/Local/Programs/Microsoft VS Code/resources/app/extensions/ms-vscode.js-debug/src/bootloader.js"  --inspect-publish-uid=http'; ${env:VSCODE_INSPECTOR_OPTIONS}=':::{"inspectorIpc":".pipenode-cdp.27540-af53b823-11.sock","deferredMode":false,"waitForDebugger":"","execPath":"C:\Program Filesnodejsnode.exe","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"R:tempnode-debug-callback-9455e78b341348a0"}'; & 'C:\Program Filesnodejsnpm.cmd' 'run' 'dev'
Debugger attached.

> frontend@0.1.0 dev
> next dev -p 3002

Debugger attached.
Debugger attached.
   ▲ Next.js 15.4.5
   - Local:        http://localhost:3002
   - Network:      http://192.168.11.19:3002

 ✓ Starting...
 ✓ Ready in 2s

【Reactのみ】

YelpCampReact/
└─ frontend/
    ├─ src/
    │    ├─ App.jsx
    │    └─ main.jsx
    └─ index.html

【React + Next.js + App Router】

YelpCampReact/
└─ frontend/
    └─ src/
         └─ app/
             └─ page.js

export default function Home() {
  return (
    <h1>メインページ</h1>
  );
}

export default function Home() {
  return (
    <h1>メインページ</h1>
    <h2>コンテンツ</h2>
  );
}

export default function Home() {
    return (
        <>
            <h1>メインページ</h1>
            <h2>コンテンツ</h2>
        </>
    );
}

import { Fragment} from 'react';

export default function Home() {
    return (
        <Fragment key={guid}>
            <h1>メインページ</h1>
            <h2>コンテンツ</h2>
        </Fragment>
    );
}

function PublicImage() {
  return <img src="/images/logo.png" alt="ロゴ">; // エラー
}
↓
function PublicImage() {
  return <img src="/images/logo.png" alt="ロゴ" />; // OK
}

YelpCampReact/
├── frontend/                   # React + Next.js（App Router 使用）
│   ├── public/                 # 静的ファイル（画像など）
│   │   ├── js/
│   │   │   └── bootstrap.bundle.min.js
│   │   └── css/
│   │       └── home.css
│   ├── src/
│   │   └── app/                # App Router エントリ
│   │       └── page.js         # "/" ルートページ
│   └── package.json
└── backend/                    # Go (Golang) バックエンド
    ├── main.go
    └── go.mod

src/
├─ app/
│   ├─ page.js            ← メインページ（レイアウトなし）
│   ├─ layout.js          ← 全体レイアウト 
│   ├─ campgrounds/
│   │   ├─ edit/
│   │   │   ├─ layout.js  ← 共通レイアウト使用
│   │   │   └─ page.js
│   │   ├─ new/
│   │   │   ├─ layout.js  ← 共通レイアウト使用
│   │   │   └─ page.js
│   │   ├─ show/
│   │   │   ├─ layout.js  ← 共通レイアウト使用
│   │   │   └─ page.js
│   │   └─ page.js
│   ├─ login
│   │   ├─ layout.js  ← 共通レイアウト使用
│   │   └─ page.js
│   └─ register
│       ├─ layout.js  ← 共通レイアウト使用
│       └─ page.js
└─ components/
     └─ CommonLayout.jsx  ← 共通レイアウト

export default function CommonLayout({ children }) {
  return (
    <>
      <header>共通ヘッダー</header>
      <main>{children}</main>
      <footer>共通フッター</footer>
    </>
  );
}

import CommonLayout from "@/components/CommonLayout";

export default function Layout({ children }) {
  return (
    <CommonLayout>{children}</CommonLayout>
  );
}

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

src/
├─ app/
│   ├─ page.js            ← メインページ（レイアウトなし）
│   ├─ layout.js          ← 全体レイアウト 
│   └─ (CommonLayout)/
│       ├─ layout.js      ← 共通レイアウト使用
│       ├─ campgrounds/
│       │   ├─ edit/
│       │   │   └─ page.js
│       │   ├─ new/
│       │   │   └─ page.js
│       │   ├─ show/
│       │   │   └─ page.js
│       │   └─ page.js
│       ├─ login
│       │   └─ page.js
│       └─ register
│           └─ page.js
└─ components/
     └─ CommonLayout.jsx  ← 共通レイアウト

export default function Layout({ children }) {
  return (
    // 子レイアウトで <body> の上書きは不可
    <body className="vh-100">
      {child}
    </body>
  );
}

'use client';

import { useLayoutEffect } from 'react';
import { usePathname } from 'next/navigation';

// 既製クラスを“管理対象”としてホワイトリスト化（必要に応じて追加）
const MANAGED = new Set([
    'text-center', 'text-white', 'bg-dark', // メイン
    'flex-column', 'vh-100',                // サブ
]);

// basePath運用の場合の保険（.env などで NEXT_PUBLIC_BASE_PATH=/myappを定義可）
const BASE = process.env.NEXT_PUBLIC_BASE_PATH || '';

function normalize(pathname) {
    if (BASE && pathname.startsWith(BASE)) return pathname.slice(BASE.length) || '/';
    return pathname || '/';
}

// ルートごとの body クラス割り当てを定義（必要に応じて追加）
function classesFor(path) {
    if (path === '/') {
        return ['text-center', 'text-white', 'bg-dark']; // メイン
    } else {
        return ['flex-column', 'vh-100'];
    }
}

export default function BodyClass() {
    const raw = usePathname();
    const path = normalize(raw);

    useLayoutEffect(() => {
        const el = document.body;
        const next = new Set(classesFor(path));

        // 管理対象のうち「いらないもの」を外す（他のグローバルクラスは触らない）
        Array.from(el.classList).forEach((c) => {
            if (MANAGED.has(c) && !next.has(c)) el.classList.remove(c);
        });

        // 必要なのに付いていないものを付ける
        next.forEach((c) => {
            if (!el.classList.contains(c)) el.classList.add(c);
        });

        // Rootは基本アンマウントしないのでクリーンアップ不要
    }, [path]);

    return null;
}

import { cookies } from "next/headers";
import { AuthProvider } from "./context/AuthContext";
import BodyClass from "@/components/BodyClass";

async function fetchInitialUser() {
  // ブラウザのCookieをバックエンドに転送
  const cookieStore = await cookies();
  const cookieHeader = cookieStore.toString();
  const res = await fetch("http://localhost:3003/api/me", {
    headers: { Cookie: cookieHeader },
    cache: "no-store",
  });
  return res.ok ? await res.json() : null;
}

export default async function RootLayout({ children }) {
  const initialUser = await fetchInitialUser();
  return (
    <html lang="ja">
      <head>
        <title>YelpCamp デモ</title>
        <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
      </head>
      <body className='d-flex flex-column vh-100'>
        <BodyClass />
        <AuthProvider initialUser={initialUser}>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

src/
├─ app/
│   ├─ page.js            ← メインページ（レイアウトなし）
│   ├─ layout.js          ← 全体レイアウト 
│   └─ (CommonLayout)/
│       ├─ layout.js      ← サブページレイアウト
│       ├─ campgrounds/
│       │   ├─ edit/
│       │   │   └─ page.js
│       │   ├─ new/
│       │   │   └─ page.js
│       │   ├─ show/
│       │   │   └─ page.js
│       │   └─ page.js
│       └─ (user)
│           ├─ login
│           │   └─ page.js
│           └─ register
│               └─ page.js
└─ components/
     ├─ CommonLayout.jsx  ← 冗長なので削除
     ├─ Footer.js         ← フッター
     └─ NavBar.js         ← ヘッダー

import 'bootstrap/dist/css/bootstrap.min.css';
import '@/styles/app.css'

import BodyClass from '@/components/BodyClass';
import FlashMessages from '@/components/FlashMessages'
import Navbar from '@/components/NavBar';
import Footer from '@/components/Footer';
import Scripts from './scripts';

export default function SubLayout({ children }) {
  return (
    <>
      <BodyClass classes="d-flex flex-column vh-100" />

      <Navbar />
      <main className="container mt-5">
        <FlashMessages />
        {children}
      </main>
      <Footer />

      <Scripts />
    </>
  );
}

以下の仕様の Go プログラムを作成してください。

・バックエンドで使用する Json API サーバー
・以下の Json 構造でテーブル名は「campground」
{
    "campground": [
        {
            "Id": 0,
            "Title": "",
            "Price": 0,
            "Description": "",
            "Location": "",
            "Author": "",
            "Geometry": ""
        }
    ]
}
・フロントエンドからaxiosでアクセスできる様にCORS有効で
・待ち受けポートは「3003」番
・データベースは「db.json」というファイルを使用
・送受信データにテーブル名「campground」は付加しない
・受信データに「Id」も含める
・登録時は「Id」を自動採番
・「localhost:3003/campground ですべてのデータを取得
・「localhost:3003/campground」にポストするとデータを追加
・「localhost:3003/campground/id」で指定のデータを取得
・「localhost:3003/campground/id」にPATCHで修正
・「localhost:3003/campground/id」にDELETEで削除
・できるだけ簡単に

以上でお願いします。

package main

import (
	"encoding/json"
	"errors"
	"fmt"
	"io"
	"net/http"
	"os"
	"path/filepath"
	"strconv"
	"strings"
	"sync"
)

const (
	addr    = ":3003"
	dbFile  = "db.json"
	route   = "/campground"
	routeId = "/campground/"
)

type Campground struct {
	Id          int    `json:"Id"`
	Title       string `json:"Title"`
	Price       int    `json:"Price"`
	Description string `json:"Description"`
	Location    string `json:"Location"`
	Author      string `json:"Author"`
	Geometry    string `json:"Geometry"`
}

type database struct {
	Campground []Campground `json:"campground"`
}

var (
	mu     sync.Mutex
	db     database
	nextID int
)

func main() {
	if err := loadOrInitDB(); err != nil {
		panic(err)
	}
	mux := http.NewServeMux()
	mux.HandleFunc(route, withCORS(handleCollection))
	mux.HandleFunc(routeId, withCORS(handleItem))

	fmt.Println("JSON API server listening on", addr)
	if err := http.ListenAndServe(addr, mux); err != nil {
		panic(err)
	}
}

// ---- Handlers ----

func handleCollection(w http.ResponseWriter, r *http.Request) {
	switch r.Method {
	case http.MethodGet:
		getAll(w, r)
	case http.MethodPost:
		create(w, r)
	case http.MethodOptions:
		w.WriteHeader(http.StatusNoContent)
	default:
		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
	}
}

func handleItem(w http.ResponseWriter, r *http.Request) {
	idStr := strings.TrimPrefix(r.URL.Path, routeId)
	id, err := strconv.Atoi(idStr)
	if err != nil {
		http.Error(w, "invalid id", http.StatusBadRequest)
		return
	}
	switch r.Method {
	case http.MethodGet:
		getOne(w, r, id)
	case http.MethodPatch:
		patch(w, r, id)
	case http.MethodDelete:
		del(w, r, id)
	case http.MethodOptions:
		w.WriteHeader(http.StatusNoContent)
	default:
		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
	}
}

// ---- CRUD ----

func getAll(w http.ResponseWriter, _ *http.Request) {
	mu.Lock()
	defer mu.Unlock()
	writeJSON(w, http.StatusOK, db.Campground)
}

func getOne(w http.ResponseWriter, _ *http.Request, id int) {
	mu.Lock()
	defer mu.Unlock()
	for _, cg := range db.Campground {
		if cg.Id == id {
			writeJSON(w, http.StatusOK, cg)
			return
		}
	}
	http.Error(w, "not found", http.StatusNotFound)
}

func create(w http.ResponseWriter, r *http.Request) {
	var in Campground
	if err := decodeJSON(r.Body, &in); err != nil {
		http.Error(w, "bad json", http.StatusBadRequest)
		return
	}

	mu.Lock()
	defer mu.Unlock()

	in.Id = nextID // 自動採番（受信に Id が含まれていても上書き）
	nextID++
	db.Campground = append(db.Campground, in)

	if err := saveDB(); err != nil {
		http.Error(w, "failed to save", http.StatusInternalServerError)
		return
	}
	writeJSON(w, http.StatusCreated, in)
}

func patch(w http.ResponseWriter, r *http.Request, id int) {
	var updates map[string]interface{}
	if err := decodeJSON(r.Body, &updates); err != nil {
		http.Error(w, "bad json", http.StatusBadRequest)
		return
	}

	mu.Lock()
	defer mu.Unlock()

	i := indexByID(id)
	if i == -1 {
		http.Error(w, "not found", http.StatusNotFound)
		return
	}
	// 既存を取得
	cg := db.Campground[i]

	// Id は不変にする
	if v, ok := updates["Title"].(string); ok {
		cg.Title = v
	}
	if v, ok := numberToInt(updates["Price"]); ok {
		cg.Price = v
	}
	if v, ok := updates["Description"].(string); ok {
		cg.Description = v
	}
	if v, ok := updates["Location"].(string); ok {
		cg.Location = v
	}
	if v, ok := updates["Author"].(string); ok {
		cg.Author = v
	}
	if v, ok := updates["Geometry"].(string); ok {
		cg.Geometry = v
	}

	db.Campground[i] = cg
	if err := saveDB(); err != nil {
		http.Error(w, "failed to save", http.StatusInternalServerError)
		return
	}
	writeJSON(w, http.StatusOK, cg)
}

func del(w http.ResponseWriter, _ *http.Request, id int) {
	mu.Lock()
	defer mu.Unlock()

	i := indexByID(id)
	if i == -1 {
		http.Error(w, "not found", http.StatusNotFound)
		return
	}
	// 削除
	db.Campground = append(db.Campground[:i], db.Campground[i+1:]...)
	if err := saveDB(); err != nil {
		http.Error(w, "failed to save", http.StatusInternalServerError)
		return
	}
	w.WriteHeader(http.StatusNoContent)
}

// ---- DB I/O ----

func loadOrInitDB() error {
	mu.Lock()
	defer mu.Unlock()

	// ない場合は初期化
	if _, err := os.Stat(dbFile); errors.Is(err, os.ErrNotExist) {
		db = database{Campground: []Campground{}}
		nextID = 1
		return saveDB()
	}

	f, err := os.Open(dbFile)
	if err != nil {
		return err
	}
	defer f.Close()

	if err := json.NewDecoder(f).Decode(&db); err != nil {
		return err
	}

	// nextID を決定
	maxID := 0
	for _, cg := range db.Campground {
		if cg.Id > maxID {
			maxID = cg.Id
		}
	}
	nextID = maxID + 1
	return nil
}

func saveDB() error {
	tmp := filepath.Join(filepath.Dir(dbFile), "."+filepath.Base(dbFile)+".tmp")
	b, err := json.MarshalIndent(db, "", "  ")
	if err != nil {
		return err
	}
	if err := os.WriteFile(tmp, b, 0644); err != nil {
		return err
	}
	return os.Rename(tmp, dbFile)
}

// ---- Utils ----

func numberToInt(v interface{}) (int, bool) {
	switch n := v.(type) {
	case float64:
		return int(n), true
	case int:
		return n, true
	case json.Number:
		i, err := strconv.Atoi(n.String())
		if err != nil {
			return 0, false
		}
		return i, true
	default:
		return 0, false
	}
}

func indexByID(id int) int {
	for i, cg := range db.Campground {
		if cg.Id == id {
			return i
		}
	}
	return -1
}

func decodeJSON(r io.ReadCloser, v any) error {
	defer r.Close()
	dec := json.NewDecoder(r)
	dec.UseNumber()
	return dec.Decode(v)
}

func writeJSON(w http.ResponseWriter, status int, v any) {
	w.Header().Set("Content-Type", "application/json; charset=utf-8")
	w.WriteHeader(status)
	json.NewEncoder(w).Encode(v)
}

// シンプルな CORS ミドルウェア
func withCORS(h http.HandlerFunc) http.HandlerFunc {
	return func(w http.ResponseWriter, r *http.Request) {
		w.Header().Set("Access-Control-Allow-Origin", "*")
		w.Header().Set("Access-Control-Allow-Headers", "Content-Type, Authorization")
		w.Header().Set("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE, OPTIONS")
		// Preflight
		if r.Method == http.MethodOptions {
			w.WriteHeader(http.StatusNoContent)
			return
		}
		h.ServeHTTP(w, r)
	}
}

{
  "campground": [
    {
      "Id": 1,
      "Title": "エンシェント・ベイショア",
      "Price": 1424,
      "Description": "エンシェント・ベイショアの説明",
      "Location": "愛知県小牧市",
      "Author": "test",
      "Geometry": "{'type':'Point','coordinates':[136.933907,35.306753]}"
    },
    {
      "Id": 2,
      "Title": "ペトリファイド・ベイ",
      "Price": 2551,
      "Description": "ペトリファイド・ベイの説明",
      "Location": "埼玉県北本市",
      "Author": "test",
      "Geometry": "{'type':'Point','coordinates':[139.53513,36.032346]}"
    }
  ]
}

cd c:\MAMP\htdocs\YelpCampReact\backend
go run main.go

cd c:\MAMP\htdocs\YelpCampReact\frontend
npm i axios

'use client';

import { useState, useEffect } from "react";
import axios from "axios"

export default function Home() {
    const [campgrounds, setCampgrounds] = useState();

    useEffect(() => {
        const getCampground = async () => {
            const res = await axios.get('http://localhost:3003/campground')
            setCampgrounds(res.data);
        }
        getCampground();
    }, [])

    return (
        <>
            <h1>キャンプ場一覧</h1>
            {campgrounds?.map(campground => {
                return (
                    <div key={campground.Id}
                        style={{ border: '2px solid lightGray', margin: '5px'}}>
                        <p>名称：{campground.Title}</p>
                        <p>価格：￥{campground.Price}</p>
                        <p>詳細：{campground.Description}</p>
                        <p>場所：{campground.Location}</p>
                    </div>
                )
            })}
        </>
    );
}

src/
├─ app/
├─ components/
└─ lib/
     └─ CampgroundFormData.js ← キャンプグラウンドデータ定義

export default class CampgroundFormData {
        constructor({ Id = 0, Title = '', Price = 0, Description = '', Location = '', Author = '', Geometry = '' } = {}) {
        this.Id = Id;
        this.Title = Title;
        this.Price = Price;
        this.Description = Description;
        this.Location = Location;
        this.Author = Author;
        this.Geometry = Geometry;
    }

    updateField(field, value) {
        return new CampgroundFormData({
            ...this,
            [field]: value,
        });
    }

    toJSON() {
        return {
            Id: parseInt(this.Id, 10) || 0,
            Title: this.Title,
            Price: parseInt(this.Price, 10) || 0,
            Description: this.Description,
            Location: this.Location,
            Author: this.Author,
            Geometry: this.Geometry
        };
    }
}

'use client';

import axios from 'axios';
import React, { useState } from 'react';
import CampFormData from '@/lib/CampgroundFormData';

export default function CreateCampground() {
    const [title, setTitle] = useState('');
    const [price, setPrice] = useState('');
    const [description, setDescription] = useState('');
    const [location, setLocation] = useState('');
    const [response, setResponse] = useState(null);

    const handleSubmit = async (e) => {
        e.preventDefault();

        // 自前クラスでオブジェクト作成
        const camp = new CampFormData({
            Title: title,
            Price: price,
            Description: description,
            Location: location
        });

        try {
            const res = await axios.post('http://localhost:3003/campground', camp.toJSON());
            setResponse(res.data.message);
        } catch (error) {
            console.error(error);
            setResponse('エラーが発生しました');
        }
    };

    return (
        <>
            <h1>キャンプ場の新規登録</h1>

            <form onSubmit={handleSubmit}>
                <div>
                    <label>名称：</label>
                    <input type="text"
                        value={title}
                        onChange={(e) => setTitle(e.target.value)} required />
                </div>
                <div>
                    <label>価格：</label>
                    <input type="number"
                        value={price}
                        onChange={(e) => setPrice(e.target.value)} required />
                </div>
                <div>
                    <label>詳細：</label>
                    <textarea type="text"
                        value={description}
                        onChange={(e) => setDescription(e.target.value)} required />
                </div>
                <div>
                    <label>場所：</label>
                    <input type="text"
                        value={location}
                        onChange={(e) => setLocation(e.target.value)} required />
                </div>
                <button type="submit">登録</button>
            </form>
            {response && <p>サーバーからの応答: {response}</p>}
        </>
    );
}

'use client';

import axios from 'axios';
import React, { useState, useReducer } from 'react';
import CampFormData from '@/lib/CampgroundFormData';

// Reducer 関数
function formReducer(state, action) {
    switch (action.type) {
        case 'UPDATE_FIELD':
            return state.updateField(action.field, action.value);
        case 'RESET':
            return new CampFormData(); // 初期化
        default:
            return state;
    }
}

export default function Campgrounds() {
    const [formData, dispatch] = useReducer(formReducer, new CampFormData());
    const [response, setResponse] = useState(null);

    const handleChange = (e) => {
        const { name, value } = e.target;
        dispatch({ type: 'UPDATE_FIELD', field: name, value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const res = await axios.post('http://localhost:3003/campground', formData.toJSON());
            dispatch({ type: 'RESET' });
            setResponse(res.data.message);
        } catch (err) {
            console.error(err);
            setResponse('エラーが発生しました');
        }
    };

    return (
        <>
            <h1>キャンプ場の新規登録</h1>

            <form onSubmit={handleSubmit}>
                <div>
                    <label>名称：</label>
                    <input type="text"
                        name="Title" value={formData.Title}
                        onChange={handleChange} required />
                </div>
                <div>
                    <label>価格：</label>
                    <input type="number"
                        name="Price" value={formData.Price}
                        onChange={handleChange} required />
                </div>
                <div>
                    <label>詳細：</label>
                    <textarea type="text"
                        name="Description" value={formData.Description}
                        onChange={handleChange} required />
                </div>
                <div>
                    <label>場所：</label>
                    <input type="text"
                        name="Location" value={formData.Location}
                        onChange={handleChange} required />
                </div>
                <button type="submit">登録</button>
            </form>
            {response && <p>サーバーからの応答: {response}</p>}
        </>
    );
}

src/
└─ app/
    └─ (CommonLayout)/
        ├─ layout.js
        └─ campgrounds/
                ├─ [id]   ← 動的ルートセグメント
                │   └─ edit/
                │      └─ page.js
                ├─ new/
                │   └─ page.js
                └─ page.js

'use client';

import { useParams } from 'next/navigation';

export default function SubPage() {
    const { id } = useParams();
    return (<h1>{`サブページ ${id}`}</h1>);
}

export default async function SubPage({ params }) {
    const { id } = await params;
    return (<h1>{`サブページ ${id}`}</h1>);
}

'use client';

import { useParams, useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function Page() {
  const { id } = useParams(); // params.id は常に string
  const router = useRouter();

  useEffect(() => {
    // 数値でない場合はトップページにリダイレクト
    if (!/^\d+$/.test(id as string)) {
      router.replace('/'); 
    }
  }, [id, router]);

  return <h1>サブページ {id}</h1>;
}

// Reducer 定義
function formReducer(state, action) {
    switch (action.type) {
        case 'UPDATE_FIELD':
            return state.updateField(action.field, action.value);
        case 'SET_ALL':
            return action.payload; // 取得データで置き換え
        case 'RESET':
            return new CampFormData(); // 初期化
        default:
            return state;
    }
}

export default function ShowCampground() {
    const [formData, dispatch] = useReducer(formReducer, undefined, () => new CampFormData());
    const [response, setResponse] = useState(null);
    const router = useRouter();
    const { id } = useParams();

    useEffect(() => {
        const getCampground = async () => {
            try {

                const res = await axios.get(`http://localhost:3003/campground/${id}`);
                dispatch({
                    type: 'SET_ALL', payload: new CampFormData(res.data),
                });
            }
            catch (error) {
                console.error("キャンプ場データ取得エラー:", error);
            }
        };

        if (id) {
            getCampground();
        }
    }, [id]); // id が変わったら再取得

<button class="btn btn-danger" onClick={deleteCampground}>削除する</button>

const deleteCampground = async (e) => {
    e.preventDefault();

    try {
        const res = await axios.delete(`http://localhost:3003/campground/${formData.id}`);
        dispatch({ type: 'RESET' });
        setResponse(res.data.message);
        router.push('/campgrounds');
    } catch (err) {
        console.error(err);
        setResponse('エラーが発生しました');
    }
}

Go で Gin を使用した REST API (ルーティング) 機能を作成してください。

・以下の様にコントローラーを個別のファイルに分割してください。
controller/
├─ CampgroundsController.go
├─ ReviewsController.go
└─ UsersController.go

・以下は Laravel の例ですが、Gin の Group 関数を使用してエンドポイントを
　対応するコントローラーに振り分けてください。

Route::controller(CampgroundsController::class)->group(function () {
    Route::get('campgrounds', 'index')->name('campgrounds.index');
    Route::get('campgrounds/new', 'new')->middleware('auth');
    Route::post('campgrounds', 'createCampground')->middleware('auth');
    Route::get('campgrounds/{id}', 'show');
    Route::get('campgrounds/{id}/edit', 'edit')->middleware('isAuthor');
    Route::put('campgrounds/{id}', 'updateCampground')->middleware('isAuthor');
    Route::delete('campgrounds/{id}', 'deleteCampground')->middleware('isAuthor');
});

Route::controller(ReviewsController::class)->group(function () {
    Route::post('campgrounds/{id}/reviews', 'createReview')->middleware('auth');
    Route::delete('campgrounds/{id}/reviews/{review_id}', 'deleteReview')->middleware('isReviewAuthor');
});

Route::controller(UsersController::class)->group(function () {
    Route::get('login', 'index')->middleware('guest')->name('login');
    Route::post('login', 'login')->middleware('guest');
    Route::get('register', fn() => view('users.register'));
    Route::post('register', 'register');
    Route::get('logout', 'logout');
});

・router.go というファイルを作成して、グループの登録処理をその中にまとめてください。

・ミドルウェアのひな型は「middleware.go」というファイルに作成してください。

・グループ化はできるだけ長くマッチする部分を抜き出してください。

・コントローラ毎にグループを分けてください。

・それぞれのコントローラー内で、受け取った Json を以下のオブジェクトに変換するところまで実装してください。

type Campground struct {
	Id          int    
	Title       string 
	Price       int    
	Description string 
	Location    string 
	Author      string  
	Geometry    string 
}

type User struct {

    UserName    string  
    Email       string
    Password    string  
}

type Review struct {
    Id          int
    Body        string
    Rating      int     
    CampId      int     
    Author      string 
}

以上です。

backend/
├─ controller/
│  ├─ CampgroundsController.go
│  ├─ ReviewsController.go
│  └─ UsersController.go
├─ middleware/
│  └─ middleware.go
├─ models/
│  ├─ Campground.go
│  ├─ Review.go
│  └─ User.go
├─ router/
│  └─ router.go
├─ go.mod
└─ main.go

func SetupRoutes(r *gin.Engine) {
	api := r.Group("/api")
	{
		// ========== Campgrounds ==========
		camps := api.Group("/campgrounds")
		{
			camps.GET("", controller.CampgroundsIndex) // /campgrounds
			camps.GET("/new", middleware.AuthRequired(), controller.CampgroundsNew)
			camps.POST("", middleware.AuthRequired(), controller.CreateCampground)

			byID := camps.Group("/:id") // /campgrounds/:id ...
			{
				byID.GET("", controller.ShowCampground)
				byID.GET("/edit", middleware.IsAuthor(), controller.EditCampground)
				byID.PUT("", middleware.IsAuthor(), controller.UpdateCampground)
				byID.DELETE("", middleware.IsAuthor(), controller.DeleteCampground)
			}
		}

		// ========== Reviews ==========
		// Reviews は Campgrounds 配下の最長一致 (/campgrounds/:id/reviews) をグループ化
		reviews := api.Group("/campgrounds/:id/reviews")
		{
			reviews.POST("", middleware.AuthRequired(), controller.CreateReview)
			reviews.DELETE("/:review_id", middleware.IsReviewAuthor(), controller.DeleteReview)
		}

		// ========== Users ==========
		users := api.Group("/") // ルート直下で Users をまとめる
		{
			users.GET("/login", middleware.GuestOnly(), controller.LoginIndex)
			users.POST("/login", middleware.GuestOnly(), controller.Login)
			users.GET("/register", controller.RegisterIndex)
			users.POST("/register", controller.Register)
			users.GET("/logout", controller.Logout)
		}
	}
}

package main

import (
	"log"
	"yelpcampreact/router"

	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()
	router.SetupRoutes(r)

	if err := r.Run(":3003"); err != nil {
		log.Fatal(err)
	}
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "http://localhost:3003/api/:path*",
      },
    ];
  },
};

export default nextConfig;

    useEffect(() => {
        const getCampground = async () => {
            const res = await axios.get('/api/campgrounds')
            setCampgrounds(res.data);
        }
        getCampground();
    }, [])

cd c:\MAMP\htdocs\YelpCampReact\backend
go get -u github.com/gin-gonic/gin

C:\MAMP\bin\mysql\bin>mysql -uroot -proot
mysql: [Warning] Using a password on the command line interface can be insecure.
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.7.24 MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

create database yelpcampreact;
grant all privileges on yelpcampreact.* to yelpcampreact@'localhost' identified by 'password'; 
exit;

以下の条件でMySQLのSQL(CREATE TABLE)文を作成してください。

・各テーブルのデータ構造は以下の様になっています。

type Campground struct {
	Id          int    // 主キー、オートインクリメント
	Title       string 
	Price       int    
	Description string 
	Location    string 
	Author      string  // NULL許容
	Geometry    string 
}

type User struct {

    UserName    string  // ユニークキー
    Email       string
    Password    string  // パスワード　保存時にハッシュ化
}

type Image struct {
    Id          int     // 主キー、オートインクリメント
    Filename    string
    CampId      int     // Campground.Id の外部キー
    Thumbnail   string
}

type Review struct {
    Id          int
    Body        string
    Rating      int     // デフォルト値は 1
    CampId      int     // Campground.Id の外部キー
    Author      string  // NULL許容
}

・カスケ―ディング条件は記述しないでください。
・外部キーはインデックス化してください。
・大文字と小文字の比較は無効にしてください。

以上でお願いします。

-- データベース（任意）
CREATE DATABASE IF NOT EXISTS campapp
  DEFAULT CHARACTER SET utf8mb4
  DEFAULT COLLATE utf8mb4_0900_ai_ci;
USE campapp;

-- Users
CREATE TABLE IF NOT EXISTS users (
  UserName   VARCHAR(191) NOT NULL,         -- ユニークキー
  Email      VARCHAR(255) NOT NULL,
  Password   VARCHAR(255) NOT NULL,         -- ハッシュを保存
  PRIMARY KEY (UserName),
  UNIQUE KEY uq_users_username (UserName)
) ENGINE=InnoDB
  DEFAULT CHARSET = utf8mb4
  COLLATE = utf8mb4_0900_ai_ci;

-- Campgrounds
CREATE TABLE IF NOT EXISTS campgrounds (
  Id          INT NOT NULL AUTO_INCREMENT,  -- 主キー、オートインクリメント
  Title       VARCHAR(255) NOT NULL,
  Price       INT NOT NULL,
  Description TEXT,
  Location    VARCHAR(255) NOT NULL,
  Author      VARCHAR(191) NULL,            -- users(UserName) を参照、NULL許容
  Geometry    TEXT NOT NULL,                -- 文字列として保持（必要なら型変更可）
  PRIMARY KEY (Id),
  INDEX idx_campgrounds_author (Author),
  CONSTRAINT fk_campgrounds_author
    FOREIGN KEY (Author) REFERENCES users (UserName)
) ENGINE=InnoDB
  DEFAULT CHARSET = utf8mb4
  COLLATE = utf8mb4_0900_ai_ci;

-- Images
CREATE TABLE IF NOT EXISTS images (
  Id         INT NOT NULL AUTO_INCREMENT,   -- 主キー、オートインクリメント
  Filename   VARCHAR(255) NOT NULL,
  CampId     INT NOT NULL,                  -- Campground.Id の外部キー
  Thumbnail  VARCHAR(255) NOT NULL,
  PRIMARY KEY (Id),
  INDEX idx_images_campid (CampId),
  CONSTRAINT fk_images_campid
    FOREIGN KEY (CampId) REFERENCES campgrounds (Id)
) ENGINE=InnoDB
  DEFAULT CHARSET = utf8mb4
  COLLATE = utf8mb4_0900_ai_ci;

-- Reviews
CREATE TABLE IF NOT EXISTS reviews (
  Id      INT NOT NULL AUTO_INCREMENT,
  Body    TEXT NOT NULL,
  Rating  INT NOT NULL DEFAULT 1,           -- デフォルト値は 1
  CampId  INT NOT NULL,                     -- Campground.Id の外部キー
  Author  VARCHAR(191) NULL,                -- users(UserName) を参照、NULL許容
  PRIMARY KEY (Id),
  INDEX idx_reviews_campid (CampId),
  INDEX idx_reviews_author (Author),
  CONSTRAINT fk_reviews_campid
    FOREIGN KEY (CampId) REFERENCES campgrounds (Id),
  CONSTRAINT fk_reviews_author
    FOREIGN KEY (Author) REFERENCES users (UserName)
) ENGINE=InnoDB
  DEFAULT CHARSET = utf8mb4
  COLLATE = utf8mb4_0900_ai_ci;

このSQL文から Go で CRUD 操作できるコードを作成してください。

・外部ライブラリー(GORM)を使用してできるだけ簡単に
・マイグレーション機能も実装してください。
・テーブルごとに「campground.go」等のファイルに分割してください。
・バックエンド用途ですが、REST APIは実装しないでください。

campapp-gorm/
├─ internal/
│   ├─ database/
│   │   └─ db.go
│   └─ models/
│       ├─ campground.go
│       ├─ image.go
│       ├─ review.go
│       └─ user.go
├─ .env.example
├─ go.mod
├─ main.go
└─ README.md

go get -u gorm.io/gorm
go get -u gorm.io/driver/mysql

go get -u github.com/joho/godotenv
go mod tidy 

# user:pass@tcp(127.0.0.1:3306)/campapp?charset=utf8mb4&collation=utf8mb4_0900_ai_ci&parseTime=True&loc=Local
DSN=yelpcampreact:password@tcp(localhost:3306)/yelpcampreact?charset=utf8mb4&collation=utf8mb4_unicode_ci&parseTime=True&loc=Local

package main

import (
	"fmt"
	"log"
	"os"

	"example.com/campapp-gorm/internal/database"
	"example.com/campapp-gorm/internal/models"
	"github.com/joho/godotenv"
	"gorm.io/gorm"
)

func migrate(db *gorm.DB) {
	// テーブルオプション: 照合・文字セットを明示（大文字小文字を区別しない）
	db = db.Set("gorm:table_options", "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci")

	if err := db.AutoMigrate(
		&models.User{},
		&models.Campground{},
		&models.Image{},
		&models.Review{},
	); err != nil {
		log.Fatalf("auto migrate failed: %v", err)
	}
}

func main() {
	if err := godotenv.Load(); err != nil {
		log.Println("No .env file found")
	}

	dsn := os.Getenv("DSN")
	db := database.ConnectMySQL(dsn)

	migrate(db)
	fmt.Println("migrated successfully.")
}

PS C:\MAMP\htdocs\go-projects\src\campapp-gorm> go run main.go
migrated successfully.
PS C:\MAMP\htdocs\go-projects\src\campapp-gorm> 

package controller

import "gorm.io/gorm"

type Handlers struct {
	DB *gorm.DB
}

// GET /campgrounds
func (h *Handlers) CampgroundsIndex(c *gin.Context) {
	c.JSON(http.StatusOK, []string{})
}

func main() {
	if err := godotenv.Load(); err != nil {
		log.Println("No .env file found")
	}

	dsn := os.Getenv("DSN")
	db := database.ConnectMySQL(dsn)
	database.Migrate(db)
	fmt.Println("migrated successfully.")

	h := &controller.Handlers{DB: db}
	r := gin.Default()

	router.SetupRoutes(r, h)

	if err := r.Run(":3003"); err != nil {
		log.Fatal(err)
	}
}

func SetupRoutes(r *gin.Engine, h *controller.Handlers) {
	api := r.Group("/api")
	{
		// ========== Campgrounds ==========
		camps := api.Group("/campgrounds")
		{
			camps.GET("", h.CampgroundsIndex) // /campgrounds
			camps.POST("", middleware.AuthRequired(), h.CreateCampground)

			byID := camps.Group("/:id") // /campgrounds/:id ...
			{
				byID.PUT("", middleware.IsAuthor(), h.UpdateCampground)
				byID.DELETE("", middleware.IsAuthor(), h.DeleteCampground)
			}
		}

		// ========== Reviews ==========
		// Reviews は Campgrounds 配下の最長一致 (/campgrounds/:id/reviews) をグループ化
		reviews := api.Group("/campgrounds/:id/reviews")
		{
			reviews.POST("", middleware.AuthRequired(), h.CreateReview)
			reviews.DELETE("/:review_id", middleware.IsReviewAuthor(), h.DeleteReview)
		}

		// ========== Users ==========
		users := api.Group("/") // ルート直下で Users をまとめる
		{
			users.POST("/login", middleware.GuestOnly(), h.Login)
			users.POST("/register", h.Register)
			users.GET("/logout", h.Logout)
		}
	}
}

Go + GORM + Gin という構成で REST API サーバーを作成しています。 
以下の情報からクッキーを使用したログイン機構のコードを作成することは可能ですか？ 

【コントローラー】※この関数に追加したい 
// POST /login
func (h *Handlers) Login(c *gin.Context) {
	var u models.User
	if err := c.ShouldBindJSON(&u); err != nil {
		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
		return
	}

	// 認証処理の例: 成功したと仮定
	c.JSON(http.StatusOK, gin.H{"message": "logged in", "user": u.UserName})
}

【Handlers】
type Handlers struct {
	DB *gorm.DB
}

【モデル】※この関数群でデータベース(MySQL)を操作します 
package models

import (
	"errors"

	"gorm.io/gorm"
)

// User テーブル
type User struct {
	UserName string `gorm:"primaryKey;size:191;not null;uniqueIndex"` // ユニークキー
	Email    string `gorm:"size:255;not null"`
	Password string `gorm:"size:255;not null"` // ハッシュを保存
}

中略
・・・

【Usersコントローラー全体】 
package controller

import (
	"net/http"
	"yelpcampreact/models"

	"github.com/gin-gonic/gin"
	"golang.org/x/crypto/bcrypt"
)

// POST /login
func (h *Handlers) Login(c *gin.Context) {
	var u models.User
	if err := c.ShouldBindJSON(&u); err != nil {
		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
		return
	}

	// 認証処理の例: 成功したと仮定
	c.JSON(http.StatusOK, gin.H{"message": "logged in", "user": u.UserName})
}

中略
・・・

【ログイン手順】 
・Jsonで送られてきたデータから、ユーザー名でデータベース検索 
・送られてきたパスワードをハッシュ化して、保存されているパスワードと照合 
・パスワードが一致したらクッキー認証でログイン 
・フロントエンドでNext.jsのリバースプロキシを使用するのでCORSは使用しません。 
・セキュリティのため CSRF 機能も実装したい

以上の機能を持つサンプルコードを生成することは可能ですか？

package controller

import (
	"crypto/rand"
	"encoding/base64"
	"errors"
	"fmt"
	"net/http"
	"os"
	"time"

	"github.com/gin-gonic/gin"
	"github.com/gorilla/securecookie"
	"gorm.io/gorm"
)

const (
	sessionCookieName = "session"
	csrfCookieName    = "csrf_token"
	// SameSite=Lax なので GET での遷移では送信可。フォームやXHRはフロントからヘッダーを付ければOK
)

type Handlers struct {
	DB *gorm.DB
	sc *securecookie.SecureCookie
	// 任意: クッキーの有効期限
	SessionTTL time.Duration
}

func decodeMaybeBase64(s string) ([]byte, error) {
	// 標準の base64 を試す
	if b, err := base64.StdEncoding.DecodeString(s); err == nil {
		return b, nil
	}
	// padding なしの base64 も試す
	if b, err := base64.RawStdEncoding.DecodeString(s); err == nil {
		return b, nil
	}
	// どちらでもなければ「そのまま文字列をバイト列として扱う」
	return []byte(s), nil
}

// NewHandlers は初期化ヘルパー
func NewHandlers(db *gorm.DB) (*Handlers, error) {
	// --- HASH KEY（署名用）---
	hkEnv := os.Getenv("COOKIE_HASH_KEY")
	if hkEnv == "" {
		return nil, errors.New("COOKIE_HASH_KEY is required")
	}
	hashKey, err := decodeMaybeBase64(hkEnv)
	if err != nil {
		return nil, fmt.Errorf("invalid COOKIE_HASH_KEY: %w", err)
	}
	if len(hashKey) < 32 {
		return nil, fmt.Errorf("COOKIE_HASH_KEY should be >= 32 bytes, got %d", len(hashKey))
	}

	// --- BLOCK KEY（暗号化用・任意）---
	var blockKey []byte
	if bkEnv := os.Getenv("COOKIE_BLOCK_KEY"); bkEnv != "" {
		b, err := decodeMaybeBase64(bkEnv)
		if err != nil {
			return nil, fmt.Errorf("invalid COOKIE_BLOCK_KEY: %w", err)
		}
		if l := len(b); l != 16 && l != 24 && l != 32 {
			return nil, fmt.Errorf("COOKIE_BLOCK_KEY must be 16/24/32 bytes after decoding, got %d", l)
		}
		blockKey = b
	}

	var sc *securecookie.SecureCookie
	if len(blockKey) > 0 {
		sc = securecookie.New(hashKey, blockKey) // 署名 + 暗号化
	} else {
		sc = securecookie.New(hashKey, nil) // 署名のみ
	}
	sc.MaxAge(int((24 * time.Hour).Seconds()))

	return &Handlers{
		DB:         db,
		sc:         sc,
		SessionTTL: 24 * time.Hour,
	}, nil
}

// -------- CSRF（ダブルサブミット） --------

// CSRFMiddleware は非安全メソッド時にヘッダとクッキーの一致を確認
func CSRFMiddleware() gin.HandlerFunc {
	// 除外パス（prefixマッチでもOK）
	skip := map[string]struct{}{
		"/api/login":    {},
		"/api/register": {},
	}

	return func(c *gin.Context) {
		// 除外
		if _, ok := skip[c.FullPath()]; ok {
			c.Next()
			return
		}

		switch c.Request.Method {
		case http.MethodPost, http.MethodPut, http.MethodPatch, http.MethodDelete:
			h := c.GetHeader("X-CSRF-Token")
			csrfCookie, err := c.Cookie(csrfCookieName)
			if err != nil || csrfCookie == "" || h == "" || !secureCompare(h, csrfCookie) {
				c.AbortWithStatusJSON(http.StatusForbidden, gin.H{"error": "invalid csrf token"})
				return
			}
		}
		c.Next()
	}
}

// secureCompare は時間依存しない比較（短い定数時間）
// 簡易実装：長さが違ったら false、同じなら全バイト比較
func secureCompare(a, b string) bool {
	if len(a) != len(b) {
		return false
	}
	var v byte
	for i := 0; i < len(a); i++ {
		v |= a[i] ^ b[i]
	}
	return v == 0
}

func newRandomToken(n int) (string, error) {
	b := make([]byte, n)
	if _, err := rand.Read(b); err != nil {
		return "", err
	}
	return base64.RawURLEncoding.EncodeToString(b), nil
}

// -------- セッション（署名クッキー） --------

type sessionPayload struct {
	Sub string    `json:"sub"` // username
	Exp time.Time `json:"exp"`
}

func (h *Handlers) setSessionCookie(c *gin.Context, payload sessionPayload) error {
	if h.sc == nil {
		return errors.New("securecookie is not initialized; use controller.NewHandlers to construct Handlers")
	}
	value := map[string]string{
		"sub": payload.Sub,
		"exp": payload.Exp.UTC().Format(time.RFC3339),
	}
	encoded, err := h.sc.Encode(sessionCookieName, value)
	if err != nil {
		return err
	}
	http.SetCookie(c.Writer, &http.Cookie{
		Name:     sessionCookieName,
		Value:    encoded,
		Path:     "/",
		MaxAge:   int(time.Until(payload.Exp).Seconds()),
		HttpOnly: true,
		Secure:   true, // 本番は必ず true（HTTPS 前提）
		SameSite: http.SameSiteLaxMode,
	})
	return nil
}

func (h *Handlers) clearSessionCookie(c *gin.Context) {
	http.SetCookie(c.Writer, &http.Cookie{
		Name:     sessionCookieName,
		Value:    "",
		Path:     "/",
		MaxAge:   -1,
		HttpOnly: true,
		Secure:   true,
		SameSite: http.SameSiteLaxMode,
	})
}

func (h *Handlers) parseSession(c *gin.Context) (*sessionPayload, error) {
	raw, err := c.Cookie(sessionCookieName)
	if err != nil {
		return nil, errors.New("no session")
	}
	value := map[string]string{}
	if err := h.sc.Decode(sessionCookieName, raw, &value); err != nil {
		return nil, errors.New("invalid session signature")
	}
	exp, err := time.Parse(time.RFC3339, value["exp"])
	if err != nil || time.Now().After(exp) {
		return nil, errors.New("session expired")
	}
	return &sessionPayload{
		Sub: value["sub"],
		Exp: exp,
	}, nil
}

// AuthRequired は保護ルート用（有効なセッションのみ許可）
func (h *Handlers) AuthRequired() gin.HandlerFunc {
	return func(c *gin.Context) {
		sess, err := h.parseSession(c)
		if err != nil {
			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "unauthorized"})
			return
		}
		// コンテキストへ格納（必要なら後続で利用）
		c.Set("userName", sess.Sub)
		c.Next()
	}
}

// 未ログインのみ許可（ログイン済みなら 403）
func (h *Handlers) GuestOnly() gin.HandlerFunc {
	return func(c *gin.Context) {
		if _, err := h.parseSession(c); err == nil {
			c.AbortWithStatusJSON(http.StatusForbidden, gin.H{"error": "already logged in"})
			return
		}
		c.Next()
	}
}

// -------- CSRF クッキー設定 --------

func (h *Handlers) setCSRFCookie(c *gin.Context) (string, error) {
	token, err := newRandomToken(32)
	if err != nil {
		return "", err
	}
	// ダブルサブミットなので HttpOnly=false（フロントでヘッダーに載せる）
	http.SetCookie(c.Writer, &http.Cookie{
		Name:     csrfCookieName,
		Value:    token,
		Path:     "/",
		MaxAge:   int(h.SessionTTL.Seconds()),
		HttpOnly: false,
		Secure:   true,
		SameSite: http.SameSiteLaxMode,
	})
	return token, nil
}

func (h *Handlers) clearCSRFCookie(c *gin.Context) {
	http.SetCookie(c.Writer, &http.Cookie{
		Name:     csrfCookieName,
		Value:    "",
		Path:     "/",
		MaxAge:   -1,
		HttpOnly: false,
		Secure:   true,
		SameSite: http.SameSiteLaxMode,
	})
}

// POST /login
func (h *Handlers) Login(c *gin.Context) {
	// 受け取りスキーマ（モデル直バインドより明示的）
	type loginReq struct {
		UserName string `json:"userName" binding:"required"`
		Password string `json:"password" binding:"required"`
	}
	var in loginReq
	// var in models.User
	if err := c.ShouldBindJSON(&in); err != nil {
		c.JSON(http.StatusBadRequest, gin.H{"error": "userName and password are required"})
		return
	}

	// ユーザー名で検索
	u, err := models.GetUserByUserName(h.DB, in.UserName)
	if err != nil {
		// 存在をぼかす
		c.JSON(http.StatusUnauthorized, gin.H{"error": "invalid credentials"})
		return
	}

	// パスワード照合（送信されたプレーン vs 保存されたハッシュ）
	if bcrypt.CompareHashAndPassword([]byte(u.Password), []byte(in.Password)) != nil {
		c.JSON(http.StatusUnauthorized, gin.H{"error": "invalid credentials"})
		return
	}

	// セッションクッキー作成
	exp := time.Now().Add(h.SessionTTL)
	if err := h.setSessionCookie(c, sessionPayload{Sub: u.UserName, Exp: exp}); err != nil {
		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to set session"})
		return
	}

	// CSRF トークン配布（クッキー）: フロントは X-CSRF-Token ヘッダに載せて送る
	csrfToken, err := h.setCSRFCookie(c)
	if err != nil {
		// セッションは消す
		h.clearSessionCookie(c)
		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to set csrf token"})
		return
	}

	c.JSON(http.StatusOK, gin.H{
		"message":    "logged in",
		"user":       u.UserName,
		"csrfHeader": "X-CSRF-Token",
		// 初回のみ返してあげるとフロント実装が楽（以降はクッキーから読む）
		"csrfToken": csrfToken,
		"expiresAt": exp.UTC().Format(time.RFC3339),
	})
}

go get -u github.com/gorilla/securecookie
go get -u golang.org/x/crypto/bcrypt

DSN=yelpcampreact:password@tcp(localhost:3306)/yelpcampreact?charset=utf8mb4&collation=utf8mb4_unicode_ci&parseTime=True&loc=Local
COOKIE_HASH_KEY='WK9GHT9Dth9ZZKaOhuoQy7JiHH7jP2BrnUvJvCFl8no='
COOKIE_BLOCK_KEY='OrcW2MdM6lOXQksIeEIVivqWBbppDyuLzljmQLHDI0E='

openssl rand -base64 32

func SetupRoutes(r *gin.Engine, h *controller.Handlers) {

	r.Use(controller.CSRFMiddleware())

	api := r.Group("/api")
	{
		// ログイン状態確認
		api.GET("/me", h.AuthRequired(), h.Me)

		// ========== Campgrounds ==========
		camps := api.Group("/campgrounds")
		{

import Link from "next/link";
import { cookies } from "next/headers";

export default async function NavBar({ children }) {
    // ブラウザのCookieを取得して、そのままAPIに転送
    const cookieHeader = cookies().toString(); // "a=1; b=2" の形式
    const res = await fetch("http://localhost:3003/api/me", {
        cache: "no-store",
        headers: { Cookie: cookieHeader }, // ← 重要
    });
    const isLoggedIn = res.ok; // 200=ログイン中 / 401=未ログイン
    let user;
    if (isLoggedIn) {
        try { user = await res.json(); } catch { }
    }

    return (
        <nav className="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
            <div className="container-fluid">
                <a className="navbar-brand" href="/">YelpCamp</a>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                    aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div className="navbar-nav">
                        <a className="nav-link" href="/">ホーム</a>
                        <a className="nav-link" href="/campgrounds">キャンプ場</a>
                        <a className="nav-link" href="/campgrounds/new">新規登録</a>
                    </div>
                    <div className="navbar-nav ms-auto">
                        {!isLoggedIn ? (
                            <>
                                <a className="nav-link" href="/login">ログイン</a>
                                <a className="nav-link" href="/register">ユーザー登録</a>
                            </>
                        ) : (
                            <>
                                <a className="nav-link" href="/logout">ログアウト</a>
                            </>
                        )}
                    </div>
                </div>
            </div>
        </nav>
    );
}

"use client";

import { createContext, useCallback, useContext, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import api from "@/lib/axiosClient";

const AuthContext = createContext(null);

export function AuthProvider({ children, initialUser = null }) {
    const [user, setUser] = useState(initialUser);     // { user: "alice" } or null
    const [loading, setLoading] = useState(!initialUser);
    const router = useRouter();

    // 起動時/マウント時にログイン状態を確認（SSRでinitialUserがあればスキップ可）
    useEffect(() => {
        if (initialUser) return;
        let aborted = false;
        (async () => {
            try {
                const res = await fetch("/api/me", { cache: "no-store", credentials: "include" });
                if (!aborted) setUser(res.ok ? await res.json() : null);
            } finally {
                if (!aborted) setLoading(false);
            }
        })();
        return () => { aborted = true; };
    }, [initialUser]);

    // ログイン：成功したら user を即反映
    const login = useCallback(async (payload /* {UserName, Password} */) => {
        const res = await api.post("/api/login", payload);
        // ログイン後の最新ユーザーを取得
        const me = await fetch("/api/me", { cache: "no-store", credentials: "include" });
        setUser(me.ok ? await me.json() : null);
        router.refresh(); // サーバーコンポーネントも更新（NavBarなど）
        return res;
    }, [router]);

    // ログアウト：成功したら user を null に
    const logout = useCallback(async () => {
        const res = await api.post("/api/logout");
        setUser(null);
        router.refresh();
        return res;
    }, [router]);

    const value = { user, isLoggedIn: !!user, loading, login, logout };
    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export function useAuth() {
    const ctx = useContext(AuthContext);
    if (!ctx) throw new Error("useAuth must be used within <AuthProvider>");
    return ctx;
}

import { cookies } from "next/headers";
import { AuthProvider } from "./context/AuthContext";

async function fetchInitialUser() {
  // ブラウザのCookieをバックエンドに転送
  const cookieStore = await cookies();
  const cookieHeader = cookieStore.toString();
  const res = await fetch("http://localhost:3003/api/me", {
    headers: { Cookie: cookieHeader },
    cache: "no-store",
  });
  return res.ok ? await res.json() : null;
}

export default async function RootLayout({ children }) {
  const initialUser = await fetchInitialUser();
  return (
    <html lang="ja">
      <head>
        <title>YelpCamp デモ</title>
      </head>
      <body className='d-flex flex-column vh-100'>
        <AuthProvider initialUser={initialUser}>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

"use client";

import { useAuth } from "@/app/context/AuthContext";

export default function NavBar() {
    const { isLoggedIn, loading } = useAuth();

    return (
        <nav className="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
            <div className="container-fluid">
                <a className="navbar-brand" href="/">YelpCamp</a>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
                    aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div className="navbar-nav">
                        <a className="nav-link" href="/">ホーム</a>
                        <a className="nav-link" href="/campgrounds">キャンプ場</a>
                        <a className="nav-link" href="/campgrounds/new">新規登録</a>
                    </div>
                    <div className="navbar-nav ms-auto">
                        {loading ? (
                            <>
                                <span className="nav-link disabled">…</span>
                            </>
                        ) : !isLoggedIn ? (
                            <>
                                <a className="nav-link" href="/login">ログイン</a>
                                <a className="nav-link" href="/register">ユーザー登録</a>
                            </>
                        ) : (
                            <>
                                <a className="nav-link" href="/logout">ログアウト</a>
                            </>
                        )}
                    </div>
                </div>
            </div>
        </nav>
    );
}

export const FlashTypes = {
  INFO: 'INFO',
  ERROR: 'ERROR',
  DEBUG: 'DEBUG',
  PRIMARY: 'PRIMARY',
}

class FlashMessageService {
  constructor() {
    this.store = new Map()
    this.listeners = new Set()
  }

  push(type, message) {
    const arr = this.store.get(type) ?? []
    arr.push(message)
    this.store.set(type, arr)
    this.emit()
  }

  pushMany(type, messages) {
    const arr = this.store.get(type) ?? []
    this.store.set(type, [...arr, ...messages])
    this.emit()
  }

  has(type) {
    const arr = this.store.get(type)
    return !!arr && arr.length > 0
  }

  pop(type) {
    const arr = this.store.get(type) ?? []
    this.store.set(type, []) // clear after pop
    return arr
  }

  // 変更を通知する関数を登録します
  subscribe(listener) {
    this.listeners.add(listener)
    return () => this.listeners.delete(listener) // 解除用のクリーンアップ関数を返します
  }

  // 登録されているすべての関数を呼び出して、変更を通知します
  emit() {
    for (const l of this.listeners) l()
  }
}

export const flashService = new FlashMessageService()

'use client'

import { useEffect, useState } from 'react'
import { flashService, FlashTypes } from '@/lib/FlashMessageService'

export default function FlashMessage({ flashType = FlashTypes.PRIMARY }) {
  const [isVisible, setIsVisible] = useState(true)
  const [messages, setMessages] = useState([])

  useEffect(() => {
    const load = () => {
      if (flashService.has(flashType)) {
        const popped = flashService.pop(flashType)
        setMessages(popped)
        setIsVisible(true)
      }
    }

    load()
    const unsub = flashService.subscribe(load)
    return unsub // 終了時はコールバック関数を削除します
  }, [flashType])

  if (!isVisible || messages.length === 0) return null

  const color = (() => {
    switch (flashType) {
      case FlashTypes.INFO:
        return 'alert-success'
      case FlashTypes.ERROR:
        return 'alert-danger'
      case FlashTypes.DEBUG:
        return 'alert-secondary'
      default:
        return 'alert-primary'
    }
  })()

  return (
    <div className={`alert ${color} alert-dismissible fade show`} role="alert">
      {messages.map((m, i) => (
        <div key={i}>{m}</div>
      ))}
      <button
        onClick={() => setIsVisible(false)}
        type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close" />
    </div>
  )
}

'use client'

import FlashMessage from '@/components/FlashMessage'
import { FlashTypes } from '@/lib/FlashMessageService'

export default function FlashMessages() {
    return (
        <div className="space-y-2">
            <FlashMessage flashType={FlashTypes.PRIMARY} />
            <FlashMessage flashType={FlashTypes.INFO} />
            <FlashMessage flashType={FlashTypes.ERROR} />
            <FlashMessage flashType={FlashTypes.DEBUG} />
        </div>
    )
}

import 'bootstrap/dist/css/bootstrap.min.css';
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
import '@/styles/app.css'

import BodyClass from '@/components/BodyClass';
import FlashMessages from '@/components/FlashMessages'
import Navbar from '@/components/NavBar';
import Footer from '@/components/Footer';
import Scripts from './scripts';

export default function SubLayout({ children }) {
  return (
    <>
      <BodyClass classes="d-flex flex-column vh-100" />

      <Navbar />
      <main className="container mt-5">
        <FlashMessages />
        {children}
      </main>
      <Footer />

      <Scripts />
    </>
  );
}

'use client';

import { flashService, FlashTypes } from '@/lib/FlashMessageService'

export default function Register() {

    const handleSubmit = async (e) => {
        e.preventDefault();
        flashService.push(FlashTypes.INFO, '登録しました');
    };

    return (
        <form onSubmit={handleSubmit} className="validated-form" noValidate>
            <div className="d-grid">
                <button className="btn btn-success">登録する</button>
            </div>
        </form>
    );
}

import axios from 'axios';

// files: FileList or File[]
async function updateCampground(campId, payload, files, removeIds = []) {
  const fd = new FormData();
  fd.append('Title', payload.Title);
  fd.append('Price', String(payload.Price));
  fd.append('Description', payload.Description ?? '');
  fd.append('Location', payload.Location);

  // 新規画像(複数)
  for (const f of files) {
    fd.append('Images[]', f);
  }

  // 削除したい画像ID配列は JSON文字列 で
  if (removeIds.length > 0) {
    fd.append('RemoveIds', JSON.stringify(removeIds));
  }

  const res = await axios.put(`/api/campgrounds/${campId}`, fd, {
    headers: {
      'X-CSRF-Token': getCsrfFromCookie(), // ダブルサブミット
      // Content-Type は axios が自動で multipart にします。手動指定しないこと
    },
    withCredentials: true,
  });

  return res.data;
}

package main

import (
	"fmt"
	"io"
	"net/http"
	"os"
)

func uploadHandler(w http.ResponseWriter, r *http.Request) {
	// まず multipart/form-data をパース
	err := r.ParseMultipartForm(10 << 20) // 最大 10MB までメモリに保持
	if err != nil {
		http.Error(w, "ファイルの読み込みに失敗しました", http.StatusBadRequest)
		return
	}

	// フォームフィールド "username" を取得
	username := r.FormValue("username")
	fmt.Printf("username: %s\n", username)

	// フォームフィールド "file" のファイルを取得
	file, handler, err := r.FormFile("file")
	if err != nil {
		http.Error(w, "ファイルが見つかりません", http.StatusBadRequest)
		return
	}
	defer file.Close()

	fmt.Printf("アップロードされたファイル: %s (%d bytes)\n", handler.Filename, handler.Size)

	// 保存先を作成
	dst, err := os.Create("./uploads/" + handler.Filename)
	if err != nil {
		http.Error(w, "保存に失敗しました", http.StatusInternalServerError)
		return
	}
	defer dst.Close()

	// アップロードされた内容を保存先にコピー
	_, err = io.Copy(dst, file)
	if err != nil {
		http.Error(w, "保存に失敗しました", http.StatusInternalServerError)
		return
	}

	fmt.Fprintf(w, "アップロード成功！ユーザー: %s, ファイル: %s", username, handler.Filename)
}

func main() {
	http.HandleFunc("/upload", uploadHandler)

	fmt.Println("http://localhost:8080/upload で待ち受け中")
	http.ListenAndServe(":8080", nil)
}

func SetupRoutes(r *gin.Engine, h *controller.Handlers) {
	// ./uploads 配下を /uploads 配下で配信
	r.Static("/uploads", "./uploads")

	r.Use(controller.CSRFMiddleware())

	api := r.Group("/api")
	{

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "http://localhost:3003/api/:path*",
      },
      {
        source: "/uploads/:path*",
        destination: "http://localhost:3003/uploads/:path*",
      },
    ];
  }
};

export default nextConfig;

cd c:\MAMP\htdocs\YelpCampReact\frontend
npm run build

C:\MAMP\htdocs\YelpCampReact\frontend>npm run start

> frontend@0.1.0 start
> next start -p 3000

   ▲ Next.js 15.4.5
   - Local:        http://localhost:3000
   - Network:      http://192.168.11.42:3000

 ✓ Starting...
 ✓ Ready in 475ms

cd c:\MAMP\htdocs\YelpCampReact\backend
go build -o main.exe main.go

C:\MAMP\htdocs\YelpCampReact\backend>main.exe
migrated successfully.
[GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached.

[GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production.
 - using env:   export GIN_MODE=release
 - using code:  gin.SetMode(gin.ReleaseMode)

[GIN-debug] GET    /uploads/*filepath        --> github.com/gin-gonic/gin.(*RouterGroup).createStaticHandler.func1 (3 handlers)
[GIN-debug] HEAD   /uploads/*filepath        --> github.com/gin-gonic/gin.(*RouterGroup).createStaticHandler.func1 (3 handlers)
[GIN-debug] GET    /api/me                   --> yelpcampreact/controller.(*Handlers).Me-fm (5 handlers)
[GIN-debug] GET    /api/config               --> yelpcampreact/controller.(*Handlers).PublicConfig-fm (4 handlers)
[GIN-debug] POST   /api/seeds                --> yelpcampreact/controller.(*Handlers).SeedDB-fm (4 handlers)
[GIN-debug] GET    /api/campgrounds          --> yelpcampreact/controller.(*Handlers).CampgroundsIndex-fm (4 handlers)
[GIN-debug] POST   /api/campgrounds          --> yelpcampreact/controller.(*Handlers).CreateCampgroundMultipart-fm (5 handlers)
[GIN-debug] GET    /api/campgrounds/:id      --> yelpcampreact/controller.(*Handlers).ShowCampground-fm (4 handlers)
[GIN-debug] PUT    /api/campgrounds/:id      --> yelpcampreact/controller.(*Handlers).UpdateCampgroundMultipart-fm (6 handlers)
[GIN-debug] DELETE /api/campgrounds/:id      --> yelpcampreact/controller.(*Handlers).DeleteCampground-fm (6 handlers)
[GIN-debug] GET    /api/campgrounds/:id/reviews --> yelpcampreact/controller.(*Handlers).ListReviews-fm (4 handlers)
[GIN-debug] POST   /api/campgrounds/:id/reviews --> yelpcampreact/controller.(*Handlers).CreateReview-fm (5 handlers)
[GIN-debug] DELETE /api/campgrounds/:id/reviews/:review_id --> yelpcampreact/controller.(*Handlers).DeleteReview-fm (6 handlers)
[GIN-debug] POST   /api/login                --> yelpcampreact/controller.(*Handlers).Login-fm (5 handlers)
[GIN-debug] POST   /api/register             --> yelpcampreact/controller.(*Handlers).Register-fm (4 handlers)
[GIN-debug] POST   /api/logout               --> yelpcampreact/controller.(*Handlers).Logout-fm (5 handlers)
[GIN-debug] [WARNING] You trusted all proxies, this is NOT safe. We recommend you to set a value.
Please check https://pkg.go.dev/github.com/gin-gonic/gin#readme-don-t-trust-all-proxies for details.
[GIN-debug] Listening and serving HTTP on :3003

set GIN_MODE=release
main.exe

$env:GIN_MODE="release"
.\main

import "github.com/gin-gonic/gin"

func main() {
    gin.SetMode(gin.ReleaseMode) // ← ここで明示的に設定
    r := gin.Default()
    // ルーティングなど
    r.Run()
}

<IfModule mod_proxy.c>
    ProxyRequests Off
    ProxyPreserveHost On

    RequestHeader set X-Forwarded-Host "%{HTTP_HOST}s"
    RequestHeader set X-Forwarded-Proto "http"

    # HMR (WebSocket) – dev中に必要(ホットリロード用)。必ず ws:// で！
    ProxyPass        /YelpCampReact/_next/webpack-hmr  ws://127.0.0.1:3000/YelpCampReact/_next/webpack-hmr
    ProxyPassReverse /YelpCampReact/_next/webpack-hmr  ws://127.0.0.1:3000/YelpCampReact/_next/webpack-hmr

    # Next の静的など（具体的を先に）
    ProxyPass        /YelpCampReact/_next               http://127.0.0.1:3000/YelpCampReact/_next
    ProxyPassReverse /YelpCampReact/_next               http://127.0.0.1:3000/YelpCampReact/_next

    # アプリ本体（/YelpCampReact 配下を“剥がさず”丸ごと Next へ）
    ProxyPass        /YelpCampReact                     http://127.0.0.1:3000/YelpCampReact
    ProxyPassReverse /YelpCampReact                     http://127.0.0.1:3000/YelpCampReact
</IfModule>

NEXT_PUBLIC_BASE_PATH=/YelpCampReact

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
  async rewrites() {
    return [
      {
        source: "/api/:path*",
        destination: "http://localhost:3003/api/:path*",
      },
      {
        source: "/uploads/:path*",
        destination: "http://localhost:3003/uploads/:path*",
      },
    ];
  }
};

export default nextConfig;

const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? '';

export const baseUrl = (p = '') =>
  `${basePath}${p.startsWith('/') ? p : `/${p}`}`;

export const apiUrl = (p = '') =>
  `${basePath}/api${p.startsWith('/') ? p : `/${p}`}`;

export const uploadsUrl = (p = '') =>
  `${basePath}/uploads${p.startsWith('/') ? p : `/${p}`}`;

'use client';

import { baseUrl } from "@/lib/Url";
import { useAuth } from "@/app/context/AuthContext";

export default function MainNavBar() {
    const { isLoggedIn, loading } = useAuth();

    return (
        <header className="mb-auto">
            <div>
                <h3 className="float-md-start mb-0">YelpCamp</h3>
                <nav className="nav nav-masthead justify-content-center float-md-end">
                    <a href={baseUrl("/")} className="nav-link active">ホーム</a>
                    <a href={baseUrl("campgrounds")} className="nav-link">キャンプ場</a>
                    {loading ? (
                        <>
                            <span className="nav-link disabled">…</span>
                        </>
                    ) : !isLoggedIn ? (
                        <>
                            <a href={baseUrl("login")} className="nav-link">ログイン</a>
                            <a href={baseUrl("register")} className="nav-link">ユーザー登録</a>
                        </>
                    ) : (
                        <>
                            <a href={baseUrl("logout")} className="nav-link">ログアウト</a>
                        </>
                    )}
                </nav>
            </div>
        </header>
    );
}

cd c:\MAMP\htdocs\YelpCampReact\frontend
npm i

NEXT_PUBLIC_MAPBOX_TOKEN='pk.eyJ....'
NEXT_PUBLIC_BASE_PATH=/YelpCampReact