Build a Library Management System Using Next.js
Last Updated :
23 Jul, 2025
A Library Management System (LMS) allows users to manage library books, members, and borrowing history. In this article, we'll build a basic LMS using Next.js, which will include functionalities for managing books, members, and viewing borrowing history.
Prerequisites:
Approach to Create Library Management System Using Next.js:
- Create Components Directory:
- Navbar.js: Navigation bar for the application.
- manage-book.js: Form to add or edit books.
- issue-book.js: Form to issue books.
- view-issued.js: Component to view issued books.
- Display a form to add books and a list of existing books which will have functionality to edit and delete books.
- Display a form to issue books to members where admin will select students name and book details to issue.
- Display a table of issued books with details like student name, book title, author, and issue date.
Steps to Create Library Management System
Step 1: Create a application of NextJS using the following command.
npx create-next-app lms
Step 2: It will ask you some questions, so choose as the following.
√ 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 to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
Step 3: Navigate to project directory
cd lms
Step 4: Install the necessary package in your project using the following command.
npm install bootstrap
Step 5: Create the folder structure as shown below and create the files in respective folders.
Project Structure
.png)
Folder StructureDependencies
"dependencies": {
"bootstrap": "^5.3.3",
"next": "14.1.3",
"react": "^18",
"react-dom": "^18",
}Example: Create the required files and write the following code.
JavaScript
// Page.js
import LibraryManagement from './components/LibraryManagement';
function App() {
return (
<>
<LibraryManagement/ >
</>
);
}
export default LibraryManagement;
// Navbar.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Link from 'next/link';
function Navbar() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light shadow top-0">
<div className="container">
<a className="navbar-brand text-success" href="#">
GFG Estate
</a>
<button className="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link"
href="/">
Add Book
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" href="/issue-book">Issue Book</Link>
</li>
<li className="nav-item">
<Link className="nav-link"
href="/view-issued">
View Issued Books
</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;
// components/LibraryManagament.js
'use client'
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';
const ManageBooks = () => {
const [bookTitle, setBookTitle] = useState('');
const [author, setAuthor] = useState('');
const [publishedDate, setPublishedDate] = useState('');
const [quantity, setQuantity] = useState('');
const [books, setBooks] = useState([]);
const [editingBookId, setEditingBookId] = useState(null);
useEffect(() => {
const savedBooks = JSON.parse(localStorage.getItem('books')) || [];
setBooks(savedBooks);
}, []);
const handleAddBook = () => {
if (editingBookId) {
const updatedBooks = books.map((book) =>
book.id === editingBookId
? { ...book, title: bookTitle, author, publishedDate, quantity }
: book
);
localStorage.setItem('books', JSON.stringify(updatedBooks));
setBooks(updatedBooks);
setEditingBookId(null);
} else {
const newBook = {
id: Math.floor(Math.random() * 1000),
title: bookTitle,
author,
publishedDate,
quantity,
};
const updatedBooks = [...books, newBook];
localStorage.setItem('books', JSON.stringify(updatedBooks));
setBooks(updatedBooks);
}
setBookTitle('');
setAuthor('');
setPublishedDate('');
setQuantity('');
};
const handleEdit = (book) => {
setBookTitle(book.title);
setAuthor(book.author);
setPublishedDate(book.publishedDate);
setQuantity(book.quantity);
setEditingBookId(book.id);
};
const handleDelete = (id) => {
const updatedBooks = books.filter((book) => book.id !== id);
localStorage.setItem('books', JSON.stringify(updatedBooks));
setBooks(updatedBooks);
};
return (
<>
<Navbar />
<div className="container mt-5">
<div className="card">
<div className="card-body">
<h2 className="card-title">Manage Books</h2>
<form>
<div className="form-group">
<label htmlFor="bookTitle">Book Title</label>
<input
type="text"
className="form-control"
id="bookTitle"
value={bookTitle}
onChange={(e) => setBookTitle(e.target.value)}
/>
</div>
<div className="form-group mt-3">
<label htmlFor="author">Author</label>
<input
type="text"
className="form-control"
id="author"
value={author}
onChange={(e) => setAuthor(e.target.value)}
/>
</div>
<div className="form-group mt-3">
<label htmlFor="publishedDate">Published Date</label>
<input
type="date"
className="form-control"
id="publishedDate"
value={publishedDate}
onChange={(e) => setPublishedDate(e.target.value)}
/>
</div>
<div className="form-group mt-3">
<label htmlFor="quantity">Quantity</label>
<input
type="number"
className="form-control"
id="quantity"
value={quantity}
onChange={(e) => setQuantity(e.target.value)}
/>
</div>
<button type="button" className="btn btn-primary mt-3"
\onClick={handleAddBook}>
{editingBookId ? 'Update Book' : 'Add Book'}
</button>
</form>
<h3 className="mt-4">Book List</h3>
<ul className="list-group">
{books.map((book) => (
<li key={book.id} className="list-group-item d-flex
justify-content-between align-items-center">
<div>
<h5>{book.title}</h5>
<p>Author: {book.author}</p>
<p>Published Date: {book.publishedDate}</p>
<p>Quantity: {book.quantity}</p>
</div>
<div>
<button className="btn btn-warning btn-sm
me-2" onClick={() => handleEdit(book)}>Edit</button>
<button className="btn btn-danger btn-sm"
onClick={() => handleDelete(book.id)}>Delete</button>
</div>
</li>
))}
</ul>
</div>
</div>
</div>
</>
);
};
export default ManageBooks;
// pages/issue-book.js
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';
const IssueBook = () => {
const [students, setStudents] = useState([
{ name: 'Aarav Sharma' },
{ name: 'Vivaan Patel' },
{ name: 'Aditya Verma' },
{ name: 'Vihaan Kumar' },
{ name: 'Reyansh Gupta' },
{ name: 'Aanya Singh' },
{ name: 'Isha Reddy' },
{ name: 'Mira Nair' },
{ name: 'Saanvi Joshi' },
]);
const [books, setBooks] = useState([]);
const [selectedStudent, setSelectedStudent] = useState('');
const [selectedBookId, setSelectedBookId] = useState('');
const [issueDate, setIssueDate] = useState('');
useEffect(() => {
const savedBooks = JSON.parse(localStorage.getItem('books')) || [];
setBooks(savedBooks);
}, []);
const handleSelectedStudentChange = (e) => {
setSelectedStudent(e.target.value);
};
const handleSelectedBookChange = (e) => {
setSelectedBookId(e.target.value);
};
const handleIssueDateChange = (e) => {
setIssueDate(e.target.value);
};
const handleIssueBook = () => {
if (!selectedStudent || !selectedBookId || !issueDate) {
alert('Please fill in all fields.');
return;
}
const book = books.find(b => b.id === parseInt(selectedBookId)) || {};
const issuedBook = {
student: selectedStudent,
bookTitle: book.title || 'Unknown Title',
author: book.author || 'Unknown Author',
issueDate: issueDate,
};
const existingIssues = JSON.parse(localStorage.getItem('issuedBooks')) || [];
const updatedIssues = [...existingIssues, issuedBook];
localStorage.setItem('issuedBooks', JSON.stringify(updatedIssues));
setSelectedStudent('');
setSelectedBookId('');
setIssueDate('');
};
return (
<>
<Navbar />
<div className="container mt-5">
<div className="card">
<div className="card-body">
<h2 className="card-title">Issue Book</h2>
<form>
<div className="form-group">
<label htmlFor="student">Select Student</label>
<select
id="student"
className="form-select"
value={selectedStudent}
onChange={handleSelectedStudentChange}
>
<option value="">Select Student</option>
{students.map((student, index) => (
<option key={index} value={student.name}>
{student.name}
</option>
))}
</select>
</div>
<div className="form-group mt-3">
<label htmlFor="book">Select Book</label>
<select
id="book"
className="form-select"
value={selectedBookId}
onChange={handleSelectedBookChange}
>
<option value="">Select Book</option>
{books.map((book) => (
<option key={book.id} value={book.id}>
{book.title} - {book.author}
</option>
))}
</select>
</div>
<div className="form-group mt-3">
<label htmlFor="issueDate">Issue Date</label>
<input
type="date"
className="form-control"
id="issueDate"
value={issueDate}
onChange={handleIssueDateChange}
/>
</div>
<button
type="button"
className="btn btn-primary mt-3"
onClick={handleIssueBook}
>
Issue Book
</button>
</form>
</div>
</div>
</div>
</>
);
};
export default IssueBook;
// pages/view-issued.js
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';
const ViewIssuedBooks = () => {
const [issuedBooks, setIssuedBooks] = useState([]);
useEffect(() => {
// Fetch issued books from localStorage
const savedIssuedBooks = JSON.parse
(localStorage.getItem('issuedBooks')) || [];
setIssuedBooks(savedIssuedBooks);
}, []);
return (
<>
<Navbar />
<div className="container mt-5">
<div className="card">
<div className="card-body">
<h2 className="card-title">Issued Books</h2>
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th>Student</th>
<th>Book Title</th>
<th>Author</th>
<th>Issue Date</th>
</tr>
</thead>
<tbody>
{issuedBooks.length > 0 ? (
issuedBooks.map((issue, index) => (
<tr key={index}>
<td>{issue.student}</td>
<td>{issue.bookTitle}</td>
<td>{issue.author}</td>
<td>{issue.issueDate}</td>
</tr>
))
) : (
<tr>
<td colSpan="4" className="text-center">
No issued books</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</>
);
};
export default ViewIssuedBooks;
Start your application using the following command
npm run dev
Output
Build a Library Management System Using Next.js
Similar Reads
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
React Fundamentals
React IntroductionReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability. "Hello, World!" Program in ReactJavaScriptimport React from 'react'; function App() {
6 min read
React Environment SetupTo run any React application, we need to first setup a ReactJS Development Environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment.Pre-requisite:We must have Nodejs installed on our PC. So, the very first step will be
3 min read
React JS ReactDOMReactDOM is a core React package that provides DOM-specific methods to interact with and manipulate the Document Object Model (DOM), enabling efficient rendering and management of web page elements. ReactDOM is used for: Rendering Components: Displays React components in the DOM.DOM Manipulation: Al
2 min read
React JSXJSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to create UI components more efficiently. Although JSX looks like regular HTML, it’s actually a syntax extensi
5 min read
ReactJS Rendering ElementsIn this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered.What are React Elements?React elements are the smallest building blocks of a React application. They are different from DOM elements
3 min read
React ListsIn lists, React makes it easier to render multiple elements dynamically from arrays or objects, ensuring efficient and reusable code. Since nearly 85% of React projects involve displaying data collections—like user profiles, product catalogs, or tasks—understanding how to work with lists.To render a
4 min read
React FormsForms are an essential part of any application used for collecting user data, processing payments, or handling authentication. React Forms are the components used to collect and manage the user inputs. These components include the input elements like text field, check box, date input, dropdowns etc.
5 min read
ReactJS KeysA key serves as a unique identifier in React, helping to track which items in a list have changed, been updated, or removed. It is particularly useful when dynamically creating components or when users modify the list. When rendering a list, you need to assign a unique key prop to each element in th
4 min read
Components in React
React Lifecycle In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo
7 min read
React Hooks
Routing in React
Advanced React Concepts
React Projects