How to Create Todo App using Next.js ?

Last Updated : 05 Aug, 2024

In this article, we will create a to-do application and understand the basics of Next.js. This to-do list can add new tasks we can also delete the tasks by clicking on them.

Next.js is a widely recognized React framework that enables server-side rendering and enhances the development of interactive user interfaces. With its powerful capabilities for creating performant and SEO-friendly applications, Next.js has become an ideal choice for our ToDo app.

Prerequisites:

Let’s have a look at what the completed application will look like:

Create-Todo-Next

Steps to create the NextJS Application

Step 1: Create a new Next.js project using the following command

NPX: It is a package runner tool that comes with npm 5.2+, npx is easy to use CLI tool. The npx is used for executing Node packages.

npx create-next-app todo-app

Step 2: Change to the project directory:

cd todo-app

Project Structure:

Next-js-Project-Structure

Approach

The functions updateInput, addItem, deleteItem, and editItem are responsible for managing the state based on user actions. Specifically, the updateInput function updates the userInput state whenever the user types in the input field. On the other hand, the addItem function adds a new ToDo item to the list state if there’s content in the input field. If the user clicks on the “Delete” button, it triggers the deleteItem function which removes a ToDo item from the list state. Lastly, by utilizing a prompt display, the editItem function enables users to modify existing ToDo items.

Example: In this example, we will see the ToDo App using Next.js

index.js

JavaScript

'use client';
import React, { useState } from 'react';

const App = () => {
    const [userInput, setUserInput] = useState('');
    const [list, setList] = useState([]);
    const [editIndex, setEditIndex] = useState(null); // Track index of item to edit

    // Set a user input value
    const updateInput = (value) => {
        setUserInput(value);
    };

    // Add or edit item
    const handleAction = () => {
        if (userInput.trim() === '') return; // Avoid adding empty items

        if (editIndex !== null) {
            // Edit existing item
            const updatedList = list.map((item, index) =>
                index === editIndex ? { ...item, value: userInput } : item
            );
            setList(updatedList);
            setEditIndex(null); // Reset edit mode
        } else {
            // Add new item
            const newItem = {
                id: Math.random(), // Consider using a more reliable ID generator
                value: userInput,
            };
            setList([...list, newItem]);
        }

        setUserInput(''); // Clear input field
    };

    // Function to delete item from list using id to delete
    const deleteItem = (id) => {
        const updatedList = list.filter((item) => item.id !== id);
        setList(updatedList);
    };

    // Function to enable editing mode
    const startEdit = (index) => {
        setUserInput(list[index].value);
        setEditIndex(index); // Set the index of the item to be edited
    };

    return (
        <div
            style={{
                fontFamily: 'Arial, sans-serif',
                maxWidth: '600px',
                margin: '0 auto',
                padding: '20px',
            }}
        >
            <div
                style={{
                    textAlign: 'center',
                    fontSize: '2.5rem',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                    color: 'green',
                }}
            >
                Geeksforgeeks
            </div>
            <div
                style={{
                    textAlign: 'center',
                    fontSize: '1.5rem',
                    fontWeight: 'bold',
                    marginBottom: '20px',
                }}
            >
                TODO LIST
            </div>
            <div
                style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}
            >
                <input
                    style={{
                        fontSize: '1.2rem',
                        padding: '10px',
                        marginRight: '10px',
                        flexGrow: '1',
                        borderRadius: '4px',
                        border: '1px solid #ccc',
                    }}
                    placeholder={editIndex !== null ? "Edit item..." : "Add item..."}
                    value={userInput}
                    onChange={(e) => updateInput(e.target.value)}
                />
                <button
                    style={{
                        fontSize: '1.2rem',
                        padding: '10px 20px',
                        backgroundColor: '#4caf50',
                        color: 'white',
                        border: 'none',
                        borderRadius: '8px',
                        cursor: 'pointer',
                    }}
                    onClick={handleAction}
                >
                    {editIndex !== null ? 'Update' : 'ADD'}
                </button>
            </div>
            <div
                style={{ background: '#f9f9f9', padding: '20px', borderRadius: '8px' }}
            >
                {list.length > 0 ? (
                    list.map((item, index) => (
                        <div
                            key={item.id} // Use the unique id as the key
                            style={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                marginBottom: '10px',
                            }}
                        >
                            <span style={{ fontSize: '1.2rem', flexGrow: '1' }}>
                                {item.value}
                            </span>
                            <span>
                                <button
                                    style={{
                                        padding: '10px',
                                        backgroundColor: '#f44336',
                                        color: 'white',
                                        border: 'none',
                                        borderRadius: '8px',
                                        marginRight: '10px',
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => deleteItem(item.id)}
                                >
                                    Delete
                                </button>
                                <button
                                    style={{
                                        padding: '10px',
                                        backgroundColor: '#2196f3',
                                        color: 'white',
                                        border: 'none',
                                        borderRadius: '8px',
                                        cursor: 'pointer',
                                    }}
                                    onClick={() => startEdit(index)}
                                >
                                    Edit
                                </button>
                            </span>
                        </div>
                    ))
                ) : (
                    <div
                        style={{ textAlign: 'center', fontSize: '1.2rem', color: '#777' }}
                    >
                        No items in the list
                    </div>
                )}
            </div>
        </div>
    );
};

export default App;