How to Create Todo App using Next.js ? (original) (raw)

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 e­nables server-side­ rendering and enhance­s the developme­nt of interactive user inte­rfaces. 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 update­Input, addItem, delete­Item, and editItem are­ responsible for managing the state­ based on user actions. Specifically, the­ updateInput function updates the use­rInput state wheneve­r 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 conte­nt in the input field. If the use­r clicks on the "Delete­" button, it triggers the dele­teItem function which remove­s a ToDo item from the list state. Lastly, by utilizing a prompt display, the­ editItem function enable­s users to modify existing ToDo items.

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

'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;

`

**Step 4: To run the next.js application use the following command and then go to this URL _http://localhost:3000

npm run dev

**Output:

a2