Here’s a step-by-step guide and learn how to build todo app using nextjs creating a todo app with fetch and saving data to excel in a Next.js application:
There are following step to build a todo.
Step 1: Set up your Next.js application Create a new Next.js project by running the following command in your terminal:
npx create-next-app todo-app
check more docs of Next.js on https://nextjs.org/
Step 2: Create a component for the todo list Create a new file called TodoList.js
in the components
folder. In this file, we will define the component that will display the list of todos.
import React from "react";
const TodoList = ({ todos }) => {
return (
<div>
<h2>Todo List</h2>
{todos.map((todo) => (
<div key={todo.id}>
<input type="checkbox" checked={todo.completed} />
{todo.title}
</div>
))}
</div>
);
};
export default TodoList;
Step 3: Create a component for the add todo form Create a new file called AddTodo.js
in the components
folder. In this file, we will define the component that will display the form to add new todos (functionality step add).
import React, { useState } from "react";
const AddTodo = ({ addTodo }) => {
const [title, setTitle] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
addTodo({
id: Date.now(),
title,
completed: false,
});
setTitle("");
};
return (
<div>
<h2>Add Todo</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<button type="submit">Add</button>
</form>
</div>
);
};
export default AddTodo;
Step 4: Create a page for the todo app Create a new file called index.js
in the pages
folder. In this file, we will define the page that will display the todo list and the add todo form.
import React, { useState } from "react";
import TodoList from "../components/TodoList";
import AddTodo from "../components/AddTodo";
const IndexPage = () => {
const [todos, setTodos] = useState([]);
const addTodo = (todo) => {
setTodos([...todos, todo]);
};
return (
<div>
<AddTodo addTodo={addTodo} />
<TodoList todos={todos} />
</div>
);
};
export default IndexPage;
Step 5: Fetch data from an API In order to fetch data from an API, we will use the useEffect
hook to make a request to the API when the component mounts. In this example, we will use the jsonplaceholder
API to fetch a list of todos.
Build Todo App
Add the following code to the IndexPage
component:
import React, { useState, useEffect } from "react";
import TodoList from "../components/TodoList";
import AddTodo from "../components/AddTodo";
import XLSX from "xlsx";
const IndexPage = () => {
const [todos, setTodos] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((response) => response.json())
.then((data) => setTodos(data));
}, []);
const addTodo = (todo) => {
setTodos([...todos, todo]);
};
const handleSaveToExcel = () => {
const worksheet = XLSX.utils.json_to_sheet(todos);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "todos");
XLSX.writeFile(workbook, "todos.xlsx");
};
return (
<div>
<AddTodo addTodo={addTodo} />
<TodoList todos={todos} />
<button onClick={handleSaveToExcel}>Save to Excel</button>
</div>
);
};
export default IndexPage;
In this code, we use the XLSX
library to convert the todos
array to a worksheet and create a new Excel workbook. We then add the worksheet to the workbook and save the file to the user’s device when the “Save to Excel” button is clicked.
Note that the XLSX
library needs to be installed as a dependency in your project for this code to work. You can do this by running the following command in your terminal:
npm install xlsx
That’s it! Your todo app is now able to fetch data from an API and save the todo list to an Excel file.
run npm run dev and open http://localhost:3000/