Beginner~3 hours

Build a Todo App

The classic first project. Learn components, props, state, and forms by building a working todo list with add, toggle, and delete.

StateFormsComponents
⑂ Fork starter codeView live demo ↗
1

Scaffold the project

Create a fresh Next.js app and start the dev server. We'll build everything inside the `app/` directory.

code
npx create-next-app@latest todo-app
cd todo-app
npm run dev
2

Create the TodoItem component

Make a presentational component that receives a todo's text and completed state via props and renders a single row.

code
// components/TodoItem.tsx
export function TodoItem({ text, completed }: { text: string; completed: boolean }) {
  return (
    <li className={completed ? 'line-through opacity-60' : ''}>
      {text}
    </li>
  )
}
3

Hold the list in state

Mark the page as a Client Component and use `useState` to store an array of todos. Map over it to render a `TodoItem` for each entry.

code
'use client'
import { useState } from 'react'

const [todos, setTodos] = useState<{ id: number; text: string; done: boolean }[]>([])
4

Add a form to create todos

Add a controlled input and a submit handler that appends a new todo to state. Clear the input afterward.

5

Toggle and delete

Wire up click handlers to flip a todo's `done` flag and to remove it from the array. Congratulations — you've built a full CRUD UI!

Finished building?

Ship it and share it in a community challenge — or move on to the next project.

Enter a challengeMore Next.js projects