Building a Booking System with Next.js

Introduction

A booking system is a crucial part of many businesses, allowing customers to reserve services or products online. In this tutorial, we will guide you through the process of creating a booking system using Next.js. We'll cover the basics of setting up the project, managing bookings, and displaying availability.

Setting Up the Project

Before we begin, make sure you have Node.js and npm installed on your system. If not, download and install them from the official website.

Create a new Next.js project using the following commands:

        npx create-next-app booking-system
cd booking-system
            

Creating the Booking Form

We'll start by creating a booking form that allows users to select a date and time for their reservation. We'll use a simple HTML form for this purpose.

        <!-- pages/index.js -->
import React, { useState } from 'react';
export default function Home() {
    const [selectedDate, setSelectedDate] = useState('');
    const [selectedTime, setSelectedTime] = useState('');
    const handleBooking = () => {
        // Implement booking logic here, e.g., send data to a server.
        console.log('Booking request:', selectedDate, selectedTime);
    };
    return (
        <div>
            <h2>Booking System</h2>
            <form>
                <label htmlFor="date">Select Date:</label>
                <input
type="date"
id="date"
value={selectedDate}
onChange={(e) => setSelectedDate(e.target.value)}
                />
                <br />
                <label htmlFor="time">Select Time:</label>
                <input
type="time"
id="time"
value={selectedTime}
onChange={(e) => setSelectedTime(e.target.value)}
                />
                <br />
                <button type="button" onClick={handleBooking}>Book</button>
            </form>
        </div>
    );
}
            

Managing Bookings

To manage bookings, you can implement server-side logic to store and retrieve reservations. In this example, we log the booking request to the console, but in a real-world scenario, you would save it to a database or perform other actions as needed.

Displaying Availability

You can also display available dates and times for bookings. This can be achieved by fetching data from a server or using a static JSON file to represent availability.

        // Create a JSON file for availability, e.g., availability.json
[
    { "date": "2023-10-25", "times": ["09:00", "11:00", "14:00"] },
    { "date": "2023-10-26", "times": ["10:00", "13:00", "15:00"] },
    // Add more availability data
]
            

        <!-- pages/index.js -->
import React, { useState, useEffect } from 'react';
// Load availability data from a JSON file (replace with your actual data source).
import availabilityData from '../data/availability.json';
export default function Home() {
    const [selectedDate, setSelectedDate] = useState('');
    const [selectedTime, setSelectedTime] = useState('');
    const [availableTimes, setAvailableTimes] = useState([]);
    useEffect(() => {
        // Fetch available times based on the selected date.
        const selectedDateData = availabilityData.find((entry) => entry.date === selectedDate);
        if (selectedDateData) {
            setAvailableTimes(selectedDateData.times);
        } else {
            setAvailableTimes([]);
        }
    }, [selectedDate]);
    // Rest of the code remains the same
    // ...
}
            

Conclusion

You've learned the basics of building a booking system with Next.js. In a real-world application, you would need to implement server-side functionality to handle bookings, integrate a database, and secure the system. Additionally, you can enhance the user interface and add features like user authentication and notifications to make the system more user-friendly.