NextJSテンプレート

Back4App、Next.js、Vercelを使用した会議室予約アプリのチュートリアル

23min

このチュートリアルでは、 Bookitという会議室予約システムを構築します。フロントエンドフレームワークとして Next.js を使用し、バックエンドサービスとして Back4App を使用します。ユーザー認証、部屋管理、予約機能を実装し、アプリを Vercel にデプロイします。
1. 前提条件
このチュートリアルを完了するには、次のものが必要です：
Back4Appアカウント（ Back4App にサインアップ）
Back4Appプロジェクト（ このガイド に従ってください）
ローカルマシンにNode.jsがインストールされていること（インストールガイド）
JavaScript、Next.js、およびREST APIの基本的な知識（必要に応じて、 JavaScriptの基礎 を参照してください）
2. Back4Appの設定
Back4Appアカウントにログインし、プロジェクトダッシュボードに移動します。
左のサイドバーで、 データベース をクリックしてデータブラウザにアクセスします。
データをモデル化するために、次のクラスを作成する必要があります：
2.1. ユーザー クラスを作成する
デフォルトでは、Parseはユーザー認証を処理するため、このクラスを手動で作成する必要はありません。Parseは次のフィールドを自動的に管理します：
email: ログイン用のメールアドレス
password: パスワード（ハッシュ化）
username: オプションのユーザー名
2.2. ルーム クラスを作成する
「データブラウザ」をクリックし、「クラスを作成」を選択し、「カスタム」を選択し、クラスの名前を「ルーム」とします。
次の列を追加します:
列名
タイプ
説明
名前
文字列
部屋の名前
説明
文字列
部屋の説明
容量
番号
部屋が収容できる人数
アメニティ
配列
アメニティのリスト（テレビ、WiFiなど）
価格
番号
時間あたりの価格
画像
ファイル
画像のURL
オーナー
ポインター
ポイントは ユーザー クラスを指します
2.3. 次の作成 Booking クラス
別のカスタムクラスを作成 Booking.
次の列を追加:
列名
タイプ
説明
部屋
ポインタ
次の Room クラスを指します
ユーザー
ポインタ
次の User クラスを指します
チェックイン
日付
予約の開始日時
チェックアウト
日付
予約の終了日時
3. Next.js と Parse SDK の設定
新しい Next.js プロジェクトを作成します:
Bash
npx create-next-app bookit-app
cd bookit-app
npx create-next-app bookit-app
cd bookit-app
﻿
Parse JS SDK をインストールします:
Bash
npm install parse
npm install parse
﻿
次の pages/_app.js ファイルで、Back4App の資格情報を使って Parse を初期化します:
JS
import Parse from 'parse';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;
import Parse from 'parse';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;
﻿
次の 'YOUR_APP_ID' と 'YOUR_JAVASCRIPT_KEY' を Back4App のアプリ資格情報に置き換えます。
4. ユーザー認証の実装
4.1. ユーザー登録
登録フォームを持つ新しいページ pages/signup.js を作成します:
JS
import { useState } from 'react';
import Parse from 'parse';

export default function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignup = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', email);
    user.set('email', email);
    user.set('password', password);

    try {
      await user.signUp();
      alert('Signup successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignup}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Sign Up</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function Signup() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignup = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', email);
    user.set('email', email);
    user.set('password', password);

    try {
      await user.signUp();
      alert('Signup successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignup}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Sign Up</button>
    </form>
  );
}
﻿
4.2. ユーザーログイン
ユーザーログインのために pages/login.js を作成します:
JS
import { useState } from 'react';
import Parse from 'parse';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await Parse.User.logIn(email, password);
      alert('Login successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await Parse.User.logIn(email, password);
      alert('Login successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}
﻿
4.3. 保護されたルート
保護されたルートには、Next.js API ルートを使用し、ユーザーが認証されているかどうかを確認できます:
JS
import Parse from 'parse';

export default async function handler(req, res) {
  const user = Parse.User.current();
  if (!user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  // Proceed with the request
}
import Parse from 'parse';

export default async function handler(req, res) {
  const user = Parse.User.current();
  if (!user) {
    return res.status(401).json({ message: 'Unauthorized' });
  }
  // Proceed with the request
}
﻿
5. ルーム管理
5.1. 利用可能な部屋の表示
利用可能な部屋をリストするために pages/index.js を作成します:
JS
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function Home() {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const fetchRooms = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      const results = await query.find();
      setRooms(results);
    };
    fetchRooms();
  }, []);

  return (
    <div>
      <h1>Available Rooms</h1>
      {rooms.map(room => (
        <div key={room.id}>
          <h2>{room.get('name')}</h2>
          <img src={room.get('image').url()} alt={room.get('name')} />
          <p>Capacity: {room.get('capacity')}</p>
          <p>Price: ${room.get('price')} per hour</p>
        </div>
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function Home() {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const fetchRooms = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      const results = await query.find();
      setRooms(results);
    };
    fetchRooms();
  }, []);

  return (
    <div>
      <h1>Available Rooms</h1>
      {rooms.map(room => (
        <div key={room.id}>
          <h2>{room.get('name')}</h2>
          <img src={room.get('image').url()} alt={room.get('name')} />
          <p>Capacity: {room.get('capacity')}</p>
          <p>Price: ${room.get('price')} per hour</p>
        </div>
      ))}
    </div>
  );
}
﻿
5.2. 部屋の追加
新しい部屋を追加するために pages/add-room.js を作成します（認可されたユーザー用）：
JS
import { useState } from 'react';
import Parse from 'parse';

export default function AddRoom() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [capacity, setCapacity] = useState(0);
  const [price, setPrice] = useState(0);

  const handleAddRoom = async (e) => {
    e.preventDefault();
    const Room = Parse.Object.extend('Room');
    const room = new Room();
    room.set('name', name);
    room.set('description', description);
    room.set('capacity', capacity);
    room.set('price', price);

    try {
      await room.save();
      alert('Room added successfully!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleAddRoom}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Room Name" />
      <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description"></textarea>
      <input type="number" value={capacity} onChange={(e) => setCapacity(parseInt(e.target.value))} placeholder="Capacity" />
      <input type="number" value={price} onChange={(e) => setPrice(parseInt(e.target.value))} placeholder="Price" />
      <button type="submit">Add Room</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function AddRoom() {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [capacity, setCapacity] = useState(0);
  const [price, setPrice] = useState(0);

  const handleAddRoom = async (e) => {
    e.preventDefault();
    const Room = Parse.Object.extend('Room');
    const room = new Room();
    room.set('name', name);
    room.set('description', description);
    room.set('capacity', capacity);
    room.set('price', price);

    try {
      await room.save();
      alert('Room added successfully!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleAddRoom}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Room Name" />
      <textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Description"></textarea>
      <input type="number" value={capacity} onChange={(e) => setCapacity(parseInt(e.target.value))} placeholder="Capacity" />
      <input type="number" value={price} onChange={(e) => setPrice(parseInt(e.target.value))} placeholder="Price" />
      <button type="submit">Add Room</button>
    </form>
  );
}
﻿
5.3. 部屋の詳細
部屋の詳細情報を表示するために pages/rooms/[id].js を作成します：
JS
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function RoomDetails() {
  const router = useRouter();
  const { id } = router.query;
  const

 [room, setRoom] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchRoom = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      query.equalTo('objectId', id);
      const result = await query.first();
      setRoom(result);
    };
    fetchRoom();
  }, [id]);

  if (!room) return <div>Loading...</div>;

  return (
    <div>
      <h1>{room.get('name')}</h1>
      <img src={room.get('image').url()} alt={room.get('name')} />
      <p>{room.get('description')}</p>
      <p>Capacity: {room.get('capacity')}</p>
      <p>Price: ${room.get('price')} per hour</p>
    </div>
  );
}
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function RoomDetails() {
  const router = useRouter();
  const { id } = router.query;
  const

 [room, setRoom] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchRoom = async () => {
      const Room = Parse.Object.extend('Room');
      const query = new Parse.Query(Room);
      query.equalTo('objectId', id);
      const result = await query.first();
      setRoom(result);
    };
    fetchRoom();
  }, [id]);

  if (!room) return <div>Loading...</div>;

  return (
    <div>
      <h1>{room.get('name')}</h1>
      <img src={room.get('image').url()} alt={room.get('name')} />
      <p>{room.get('description')}</p>
      <p>Capacity: {room.get('capacity')}</p>
      <p>Price: ${room.get('price')} per hour</p>
    </div>
  );
}
﻿
6. 予約システム
6.1. 部屋の予約
予約フォームを追加することで pages/rooms/[id].js に予約機能を追加します:
JS
const [checkIn, setCheckIn] = useState('');
const [checkOut, setCheckOut] = useState('');

const handleBooking = async () => {
  const Booking = Parse.Object.extend('Booking');
  const booking = new Booking();
  booking.set('room', room);
  booking.set('user', Parse.User.current());
  booking.set('checkIn', new Date(checkIn));
  booking.set('checkOut', new Date(checkOut));

  // Check for double booking (example logic)
  const query = new Parse.Query(Booking);
  query.equalTo('room', room);
  query.greaterThanOrEqualTo('checkIn', new Date(checkIn));
  query.lessThanOrEqualTo('checkOut', new Date(checkOut));
  const overlap = await query.first();

  if (!overlap) {
    try {
      await booking.save();
      alert('Booking successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  } else {
    alert('Room is already booked for the selected time range.');
  }
};
const [checkIn, setCheckIn] = useState('');
const [checkOut, setCheckOut] = useState('');

const handleBooking = async () => {
  const Booking = Parse.Object.extend('Booking');
  const booking = new Booking();
  booking.set('room', room);
  booking.set('user', Parse.User.current());
  booking.set('checkIn', new Date(checkIn));
  booking.set('checkOut', new Date(checkOut));

  // Check for double booking (example logic)
  const query = new Parse.Query(Booking);
  query.equalTo('room', room);
  query.greaterThanOrEqualTo('checkIn', new Date(checkIn));
  query.lessThanOrEqualTo('checkOut', new Date(checkOut));
  const overlap = await query.first();

  if (!overlap) {
    try {
      await booking.save();
      alert('Booking successful!');
    } catch (error) {
      alert('Error: ' + error.message);
    }
  } else {
    alert('Room is already booked for the selected time range.');
  }
};
﻿
6.2. 予約の確認とキャンセル
予約を確認しキャンセルするために pages/my-bookings.js を作成します:
JS
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function MyBookings() {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchBookings = async () => {
      const Booking = Parse.Object.extend('Booking');
      const query = new Parse.Query(Booking);
      query.equalTo('user', Parse.User.current());
      const results = await query.find();
      setBookings(results);
    };
    fetchBookings();
  }, []);

  const handleCancel = async (id) => {
    const booking = bookings.find(b => b.id === id);
    if (booking) {
      await booking.destroy();
      setBookings(bookings.filter(b => b.id !== id));
    }
  };

  return (
    <div>
      <h1>My Bookings</h1>
      {bookings.map(booking => (
        <div key={booking.id}>
          <p>Room: {booking.get('room').get('name')}</p>
          <p>Check-In: {new Date(booking.get('checkIn')).toLocaleString()}</p>
          <p>Check-Out: {new Date(booking.get('checkOut')).toLocaleString()}</p>
          <button onClick={() => handleCancel(booking.id)}>Cancel Booking</button>
        </div>
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function MyBookings() {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    const fetchBookings = async () => {
      const Booking = Parse.Object.extend('Booking');
      const query = new Parse.Query(Booking);
      query.equalTo('user', Parse.User.current());
      const results = await query.find();
      setBookings(results);
    };
    fetchBookings();
  }, []);

  const handleCancel = async (id) => {
    const booking = bookings.find(b => b.id === id);
    if (booking) {
      await booking.destroy();
      setBookings(bookings.filter(b => b.id !== id));
    }
  };

  return (
    <div>
      <h1>My Bookings</h1>
      {bookings.map(booking => (
        <div key={booking.id}>
          <p>Room: {booking.get('room').get('name')}</p>
          <p>Check-In: {new Date(booking.get('checkIn')).toLocaleString()}</p>
          <p>Check-Out: {new Date(booking.get('checkOut')).toLocaleString()}</p>
          <button onClick={() => handleCancel(booking.id)}>Cancel Booking</button>
        </div>
      ))}
    </div>
  );
}
﻿
7. Vercelへのデプロイ
Vercel CLIをインストールします:
Bash
npm install -g vercel
npm install -g vercel
﻿
次のコマンドでNext.jsアプリをデプロイします:
Bash
vercel
vercel
﻿
プロンプトに従ってアプリをVercelにデプロイします。デプロイが完了すると、アプリは公開URLでライブになります。
8. 結論
このチュートリアルでは、BookitアプリをNext.jsをフロントエンドに、Back4Appをバックエンドに使用して構築しました。ユーザー認証、ルーム管理、予約機能を実装しました。最後に、アプリをVercelにデプロイしました。これで、検索、支払い統合、通知などの追加機能でアプリを拡張できます。

列名	タイプ	説明
名前	文字列	部屋の名前
説明	文字列	部屋の説明
容量	番号	部屋が収容できる人数
アメニティ	配列	アメニティのリスト（テレビ、WiFiなど）
価格	番号	時間あたりの価格
画像	ファイル	画像のURL
オーナー	ポインター	ポイントはユーザークラスを指します

列名	タイプ	説明
部屋	ポインタ	次の Room クラスを指します
ユーザー	ポインタ	次の User クラスを指します
チェックイン	日付	予約の開始日時
チェックアウト	日付	予約の終了日時

更新日 24 Jan 2025

このページは役に立ちましたか？

Next.js、Vercel、および Back4app を使った請求書アプリのチュートリアル

Flutter と Back4app を使用したマルチプラットフォームゲームの構築

Back4App、Next.js、Vercelを使用した会議室予約アプリのチュートリアル

1. 前提条件

2. Back4Appの設定

2.1. ユーザークラスを作成する

2.2. ルームクラスを作成する

2.3. 次の作成 Booking クラス

3. Next.js と Parse SDK の設定

4. ユーザー認証の実装

4.1. ユーザー登録

4.2. ユーザーログイン

4.3. 保護されたルート

5. ルーム管理

5.1. 利用可能な部屋の表示

5.2. 部屋の追加

5.3. 部屋の詳細

6. 予約システム

6.1. 部屋の予約

6.2. 予約の確認とキャンセル

7. Vercelへのデプロイ

8. 結論

Back4App、Next.js、Vercelを使用した会議室予約アプリのチュートリアル

1. 前提条件

2. Back4Appの設定

2.1. ユーザー クラスを作成する

2.2. ルーム クラスを作成する

2.3. 次の作成 Booking クラス

3. Next.js と Parse SDK の設定

4. ユーザー認証の実装

4.1. ユーザー登録

4.2. ユーザーログイン

4.3. 保護されたルート

5. ルーム管理

5.1. 利用可能な部屋の表示

5.2. 部屋の追加

5.3. 部屋の詳細

6. 予約システム

6.1. 部屋の予約

6.2. 予約の確認とキャンセル

7. Vercelへのデプロイ

8. 結論

2.1. ユーザークラスを作成する

2.2. ルームクラスを作成する