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 code View live demo ↗

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

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>
  )
}

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 }[]>([])

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.

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 challenge More Next.js projects