import Head from 'next/head' import { Layout, Text, Page, Input, Button } from '@vercel/examples-ui' import useSWR from 'swr' import cn from 'clsx' import type { Todo } from '../lib/db' import { tid } from '../lib/data-testid' const fetcher = (url: string) => fetch(url).then((res) => res.json()) function Home() { const { data, error, mutate } = useSWR('/api/todo', fetcher) const todos = data?.todos return ( {/* https://swr.vercel.app/docs/prefetching#top-level-page-data */} Testing Example You can now start adding Todos:
{ e.preventDefault() const form = e.currentTarget const data = Object.fromEntries(new FormData(form)) const res = await fetch('/api/todo', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ title: data.title }), }) const { todos } = await res.json() form.reset() await mutate({ todos }, { revalidate: false }) }} >
{todos ? ( todos.length ? ( ) : null ) : error ? (

Failed to load todos

) : null}
) } Home.Layout = Layout export default Home