Also, look no further and grab the opportunity to start your Magento 2 React development<\/a> with the certified Magento 2 development company<\/a>.<\/p>\n\n\n\n Dexie is a JavaScript library that provides a higher-level API for working with IndexedDB.<\/p>\n\n\n\n It simplifies the process of interacting with IndexedDB by providing a more intuitive and developer-friendly interface.<\/p>\n\n\n\n Dexie uses Promises, which makes it easier to work with asynchronous operations.<\/p>\n\n\n\n <\/strong>It provides a clean and easy-to-use syntax for common operations like creating, reading, updating, and deleting data.<\/p>\n\n\n\n <\/strong>Dexie includes various methods with the help of these we can filter, and retrieve specific records.<\/p>\n\n\n\n This automatically updates the database and contributes to the schema version maintenance if we make any changes to our table.<\/p>\n\n\n\n Dexie abstracts transactions, making it easier to work with the IndexedDB transaction model.<\/p>\n\n\n\n <\/strong>Dexie can store more complex data types like arrays and objects.<\/p>\n\n\n\n <\/strong>It provides a consistent API across different browsers, handling any browser-specific quirks or inconsistencies.<\/p>\n\n\n\n Dexie provides offline support which is useful for building progressive web apps ( PWA ) and with the help of Step 1: Create a Next.js Project<\/strong> To set up, we can follow this setup next js project<\/a> blog that covers all about the setup.<\/p>\n\n\n\n Now our next app name is Step 2: Install Dependencies<\/strong> Our project – structure look like as mentioned below <\/strong><\/p>\n\n\n\n Step 3: DB model <\/strong> students is our table name which After initializing the Step 4: Create<\/strong>, update, and delete operations with students table <\/strong> there are three fields as you have seen in To perform create, update, and delete operations we’ve created a components directory in the root folder under it we’ve created Now let’s demystify Imported if you have added or updated the new data in Here And in likewise in need to notice that this update Now our last function related to Step 5: Importing into Route page : we’ve imported it into Conclusion<\/strong>: Integrating the Dexie<\/a> library into a Next.js application provides a powerful client-side database solution. <\/p>\n\n\n\n Dexie simplifies the process of managing data on the client side, allowing for efficient storage and retrieval operations. By leveraging Dixie’s intuitive API and seamless<\/p>\n\n\n\n Integration with Next.js, developers can create dynamic and responsive web applications with robust offline capabilities.<\/p>\n\n\n\nWhat is dexie?<\/strong><\/h2>\n\n\n\n
Here are some key features of Dexie:<\/strong><\/h2>\n\n\n\n
Promise-Based API:<\/strong><\/h3>\n\n\n\n
Simplified Syntax:<\/strong><\/h3>\n\n\n\n
Querying and Filtering:<\/strong><\/h3>\n\n\n\n
Dexie Version Control:<\/strong> <\/h3>\n\n\n\n
Transactions:<\/strong><\/h3>\n\n\n\n
Support for Complex Data Types:<\/strong><\/h3>\n\n\n\n
Cross-Browser Compatibility:<\/strong><\/h3>\n\n\n\n
Offline Support: <\/strong><\/h3>\n\n\n\n
Dexie<\/code> we can store data locally and synchronize it with a server later.<\/p>\n\n\n\nLet’s see the implementation –<\/strong><\/h2>\n\n\n\n
The Next.js project must be finished and configured in the first stage for us to use the dexie library to conduct create, update, and delete operations.<\/p>\n\n\n\n \"next-dexie-implementation<\/strong>\"<\/code>. The command below must be used to navigate the project directory after it has been established.<\/p>\n\n\n\ncd next-dexie-implementation<\/pre>\n\n\n\n
We would install the necessary dependencies for working with dexie in our Next.js project. Execute the subsequent command within your terminal.<\/p>\n\n\n\nnpm install dexie \/\/ dexie\nnpm install dexie-react-hooks \/\/ dexie hook<\/pre>\n\n\n\n
NEXT-DEXIE-IMPLEMENTATION\/\n\u2502\n\u251c\u2500\u2500 .next\/\n\u2502\n\u251c\u2500\u2500 components\/\n\u2502 \u2514\u2500\u2500 StudentMngmt.tsx\n\u2502\n\u251c\u2500\u2500 db\/\n\u2502 \u2514\u2500\u2500 db.model.ts\n\u2502\n\u251c\u2500\u2500 node_modules\/\n\u2502\n\u251c\u2500\u2500 pages\/\n\u2502 \u251c\u2500\u2500 api\/\n\u2502 \u2502 \u2514\u2500\u2500 hello.ts\n\u2502 \u2502\n\u2502 \u251c\u2500\u2500 _app.tsx\n\u2502 \u251c\u2500\u2500 _document.tsx\n\u2502 \u2514\u2500\u2500 index.tsx\n\u2502\n\u251c\u2500\u2500 public\/\n\u2502 \u251c\u2500\u2500 favicon.ico\n\u2502 \u251c\u2500\u2500 next.svg\n\u2502 \u2514\u2500\u2500 vercel.svg\n\u2502\n\u251c\u2500\u2500 styles\/\n\u2502 \u251c\u2500\u2500 globals.css\n\u2502 \u2514\u2500\u2500 Home.module.css\n\u2502\n\u251c\u2500\u2500 .eslintrc.json\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 next-env.d.ts\n\u251c\u2500\u2500 next.config.js\n\u251c\u2500\u2500 package-lock.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 README.md\n\u2514\u2500\u2500 tsconfig.json<\/pre>\n\n\n\n
Next, we’ll build the db.model.ts file and create a db subdirectory in the root directory.<\/p>\n\n\n\nimport Dexie, { Table } from 'dexie';\n\n\/\/ table inteface\nexport interface Student {\n id?: number;\n name: string;\n rollNumber: number;\n}\n\nexport class DB extends Dexie {\n\/\/ table name is student \n students!: Table<Student>; \n constructor() {\n super('myDatabase');\n this.version(1).stores({\n students: '++id, name, rollNumber' \n });\n }\n}\n\nexport const db = new DB(); \/\/ export the db<\/pre>\n\n\n\nname<\/code><\/strong> and rollNumber<\/code><\/strong> the key and primary key with id<\/code><\/strong> name <\/p>\n\n\n\nstudents<\/code><\/strong> <\/em>table <\/em>we’ve exported it as DB<\/code><\/strong> below so that whenever we need to access this DB<\/code><\/strong> we can access it. <\/p>\n\n\n\n
As we earlier discussed make create, update, and delete operations with student table data and <\/p>\n\n\n\nstudents<\/code><\/strong> that was name<\/strong><\/code>, rollNumber<\/strong><\/code>, and last is the primary key id<\/code>.<\/strong><\/p>\n\n\n\nStudentMngmt.tsx<\/code> <\/strong>and this file contains these code snippets.<\/p>\n\n\n\nimport React, { FC } from "react";\nimport { db } from "@\/db\/db.model";\nimport { useLiveQuery } from "dexie-react-hooks";\nconst StudentMngmt: FC = () => {\n const [students, setStudents] = React.useState({ name: '', rollNumber: '', id: null });\n \/\/ dexie hook to get live data \n const studentList = useLiveQuery(() => db.students.toArray());\n\n \/\/ add student \n const addStudent = React.useCallback(async () => {\n if (students?.name && students?.rollNumber) {\n await db.students.add({\n name: students?.name,\n rollNumber: Number(students?.rollNumber)\n });\n setStudents({ name: '', rollNumber: '', id: null });\n }\n }, [students])\n\n \/\/ update student \n const updateStudent = React.useCallback(async () => {\n if (students?.id && students?.name && students?.rollNumber) {\n await db.students.put({\n id: students?.id,\n name: students?.name,\n rollNumber: Number(students?.rollNumber)\n });\n setStudents({ name: '', rollNumber: '', id: null });\n }\n }, [students])\n\n \/\/ delete student \n const deleteStudent = React.useCallback(async (id: any) => {\n await db.students.delete(id);\n }, [])\n\n \/\/ Student list Component\n const StudentList = () => {\n return (\n <div className="">\n <table >\n <tr>\n\n <th>ID<\/th>\n <th>NAME<\/th>\n <th>ROLL NUMBER <\/th>\n <th>DELETE <\/th>\n <th>UPDATE <\/th>\n <\/tr>\n {\n studentList?.map((i: any, index: number) => {\n return (\n <tr key={index}>\n <td style={{ paddingTop: '10px' }} ><span style={{ paddingLeft: '10px', paddingRight: '10px' }}>{i.id}<\/span><\/td>\n <td style={{ paddingTop: '10px' }} ><span style={{ paddingLeft: '10px', paddingRight: '10px' }}>{i.name}<\/span><\/td>\n <td style={{ paddingTop: '10px' }} > <span style={{ paddingLeft: '10px', paddingRight: '10px' }}>{i.rollNumber}<\/span><\/td>\n <td style={{ paddingTop: '10px' }} > <button onClick={addStudent} style={{ paddingLeft: '10px', paddingRight: '10px', marginLeft: '10px' }} onClickCapture={() => deleteStudent(i.id)}>DELETE<\/button><\/td>\n <td style={{ paddingTop: '10px' }} ><button onClick={() => setStudents({ ...i })} style={{ paddingLeft: '10px', paddingRight: '10px', marginLeft: '10px' }}>UPDATE<\/button><\/td>\n <\/tr>\n )\n })\n }\n <\/table>\n <\/div>)\n }\n\n \/\/ Add and Update Form Component \n return (\n <div>\n <div style={{ paddingLeft: '30px' }} >\n <h2 style={{ marginBottom: '20px', marginTop: '20px' }}>{students?.id ? 'Update' : 'Add'} Student <\/h2>\n <div >\n <label htmlFor="Name" style={{ paddingRight: '10px' }}>Name<\/label>\n <input type="text" value={students?.name} onChange={(e) => setStudents({ ...students, name: e.target.value })} placeholder="Name" name="Name" style={{ marginRight: '30px' }} \/>\n <label htmlFor="roll" style={{ paddingRight: '10px' }}>Roll Number <\/label>\n <input type="number" value={students?.rollNumber} onChange={(e) => setStudents({ ...students, rollNumber: e.target.value })} placeholder="Roll Number" name="rollNumber" \/>\n {\n students?.id ? (\n <button onClick={updateStudent} style={{ paddingLeft: '10px', paddingRight: '10px', marginLeft: '10px' }}>SUBMIT<\/button>\n ) : (\n <button onClick={addStudent} style={{ paddingLeft: '10px', paddingRight: '10px', marginLeft: '10px' }}>ADD<\/button>\n )\n }\n <\/div>\n <h2 style={{ marginBottom: '20px', marginTop: '20px' }}>Student List<\/h2>\n <div><StudentList \/><\/div>\n <\/div>\n <\/div>\n );\n}\nexport default StudentMngmt<\/pre>\n\n\n\nStudentMngmt.tsx<\/code> <\/strong>code snippet, here db<\/code><\/strong> is our indexdDB database exported from db.model.ts<\/code> <\/strong>in which we’ve created students<\/code><\/strong> table after that we have also <\/p>\n\n\n\nimport { db } from "@\/db\/db.model";\nimport { useLiveQuery } from "dexie-react-hooks";<\/pre>\n\n\n\nuseLiveQuery<\/code><\/strong><\/h3>\n\n\n\nuseLiveQuery<\/code><\/strong> that is a hook that provides live Query data from the table means <\/p>\n\n\n\nstudents<\/code><\/strong> table or any table you don’t need to call the function or method again and again to get updated data.<\/p>\n\n\n\n const studentList = useLiveQuery(() => db.students.toArray());<\/pre>\n\n\n\n
studentList<\/code><\/strong> is student table data in array format which we’ve mapped in our StudentList<\/code><\/strong> component.<\/p>\n\n\n\naddStudent<\/code><\/strong> the function we’re using db.student.add({name:name , rollNumber:rollNumber})<\/code><\/strong><\/p>\n\n\n\nupdateStudent<\/code><\/strong> function, we’re using db.student.put({ id:id , name:name , rollNumber:rollNumber})<\/strong> <\/code><\/p>\n\n\n\nDexie <\/code>API takes an extra key that is id, basically on the basis of it’ll find out the particular table data and update those data.<\/p>\n\n\n\nDexie<\/code> operation is deleteStudent<\/code><\/strong> this Dexie<\/code> API db.student.delete(id)<\/code><\/strong> just takes id<\/code><\/strong> to perform deletion<\/code><\/strong>. <\/p>\n\n\n\n![\"dexie_webkul-1\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/11\/dexie_webkul-1-1200x638.gif\")
<\/figure>\n\n\n\n
<\/strong>At this moment we’re just at the curve toward finish so in our last step, import StudentMngmt.tsx <\/code><\/strong>the component into the route page here <\/p>\n\n\n\nindex.tsx<\/strong> <\/code>but it is your wish in which page you want to import. so the final result you can see below.<\/p>\n\n\n\n