Build a Simple ToDo App with NextJS and Bootstrap

In this article, we are going to build a NextJS based Todo application. For simplicity, we are not using any database or API calls.

ToDo app is an application that shows you a list of items to be completed. You can add new items, remove any item or edit any item. To make it simple, we will only develop adding and removing parts. It looks something like this.

Here is the tech stack for the project:

React: For functional style component and state management.

NextJS: React-based framework for SSR and making it SEO friendly.

React-bootstrap: React-based bootstrap framework for UI components. You can use plain bootstrap but its react variant is more convenient and does the same job.

Project Setup

Below are the steps to create the project.

Create NextJS app

Run the following command to create a NextJS based project.

npx create-next-app todo-app

Within a few seconds, your NextJS todo app project will be created. Go inside the project folder and install bootstrap.

Install bootstrap

npm i react-bootstrap bootstrap

This will install the bootstrap dependency.

Write the code

Now open the index.js file and write the following code.

import React, {useState} from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Form from "react-bootstrap/Form";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import {useRouter} from "next/router";

export default function Home() {
  const [items, setItems] = useState([])
  const [item, setItem] = useState('')
  const router = useRouter();

  function add() {
    setItems([...items, item])
    setItem('')
  }

  function remove(value) {
    const newarr = items.filter(value1 => value1 !== value)
    setItems(newarr)
  }

  return <Container>
    <Row>
      <h1>Todo App</h1>
      <Col>
        <Form.Control type='text' placeholder='Enter item' value={item}
                      onChange={event => setItem(event.target.value)}/>
      </Col>
      <Col>
        <Button onClick={() => add()}>Add Item</Button>
      </Col>
    </Row>
    {items.map((value, index) =>
        <Row key={index} className='mt-2'>
          <Col>{value}</Col>
          <Col><Button variant={"danger"} onClick={() => remove(value)}>Remove</Button></Col>
        </Row>)}
  </Container>
}

As you can see, we have created a react functional component. Then we used useState hook to maintain items state.

The items variable contains all the items in an array.

The item variable represents an item being added. The 2 functions called add() and remove() are used to add and remove an item to/from the items array. They are called on the click of the button Add and Remove respectively.

Run the application

Go inside the project folder and run the following command to run the application in dev mode.

npm run dev

Now your project will start on port 3000 (default) and you can access it at localhost:3000. If the port 3000 is not available then NextJS will launch the application on 3001.

Adding an item

Whenever you add an item, the item gets added to the items array whose state is being managed by React. So, when its state gets modified, the component re-renders and you see the updated list.

Removing an item

When an item is removed, it gets removed from the items array. It means that the state of items is modified, hence the component re-renders and you see the modified list.

You can see that you can easily add and remove the items in the app.

Conclusion

ToDo application works on the concept of state management. Whenever items are added or removed, they modify the state of the underlying variable that stores the items hence the component re-renders and you see the list being updated dynamically. You can also save these items into database via REST APIs or some other mechanism but that is out of scope of this article.