Build App with Next 14 App Router and Convex

Prerequisite:

1. Next 14 App Router
2. TailwindCSS
3. Convex

Installation:

Before installation create new account Convex and after done install this prerequisite by run this command

// Next App
npx create-next-app@latest

// Convex
npm i convex

Initialize Convex:

This will prompt you to log in with GitHub, create a project, and save your production and deployment URLs, create new folder /convex and update your .env.local by adding CONVEX_DEPLOYMENT and NEXT_PUBLIC_CONVEX_URL

npx convex dev

Step 1 — Create UI

1. Component Add and List Todo

This component contain input for create todo, list item todo with action button to delete and completed todo item. To create this component create new file on /components/todo.tsx and follow this code below

"use client"

import { CheckCircledIcon, PlusCircledIcon, TrashIcon } from "@radix-ui/react-icons"

function Add() {
  return (
    <div className="flex gap-2">
      <input type="text" 
        className="rounded-md bg-slate-800 outline-none text-slate-200 px-3 py-1" 
        placeholder="Enter…