How it works

Every folder under src/app is a URL segment. A page.tsx in that folder renders a page; a route.ts makes it an API endpoint instead. Pages are React Server Components by default — they run on the server, can be async, and ship no JavaScript to the browser. Anything interactive (the new task form, the status dropdown) is marked "use client".

File map

  • src/app/page.tsxthe / route
  • src/app/about/page.tsxthe /about route (this page)
  • src/app/tasks/(list)/page.tsxthe /tasks list, reads ?status from the URL
  • src/app/tasks/(list)/loading.tsxskeleton shown while /tasks loads
  • src/app/tasks/[id]/page.tsxa dynamic /tasks/:id route
  • src/app/api/health/route.tsGET /api/health
  • src/app/api/tasks/route.tsGET and POST /api/tasks
  • src/app/api/tasks/[id]/route.tsGET, PATCH and DELETE /api/tasks/:id
  • src/lib/tasks.tsin-memory data store

Try the API

curl localhost:3000/api/tasks

curl -X POST localhost:3000/api/tasks \
  -H 'Content-Type: application/json' \
  -d '{"title":"Read the docs","notes":"nextjs.org/docs"}'

curl -X PATCH localhost:3000/api/tasks/1 \
  -H 'Content-Type: application/json' \
  -d '{"status":"done"}'

curl -X DELETE localhost:3000/api/tasks/1 -i