next.js apiサーバで仮想DBを作り操作（追加や削除、更新）したい

前提・実現したいこと

・apiサーバで仮想DBを作り操作（追加や削除、更新）したいです。

【階層】各ファイルの主な役割と質問内容

pages
  |
  |__api
  |    |
  |    |__todos.js (仮想DB：DB：todos  = [{ id: 1, task: "aaa" }, { id: 2, task: "bbb" }, { id: 3, task: "ccc" }])
  |
  |__todo
  |    |
  |    |__[todo].js (index.jsから受け取った{ id: 1, task: "aaa" }を表示。todosの{ id: 1, task: "aaa" }を操作。)※質問箇所
  |
  |__index.js（todos.jsからtodosを取得。[todo].jsに{ id: 1, task: "aaa" }を渡す）※質問箇所

【質問内容】
①index.js
[todo].jsに{ id: 1, task: "aaa" }を渡したいです。

②[todo].js
todos.jsの{ id: 1, task: "aaa" }を更新したいです。
また、todos.jsのtodosを操作（削除、編集）したい

api/todos.js

javascript
1const todos = [{ id: 1, task: "aaa" }, { id: 2, task: "bbb" }, { id: 3, task: "ccc" }]
2
3export default function handler(req, res) {
4  // Get data from your database
5  res.status(200).json(todos)
6}

index.js

javascript
1import useSwr from 'swr'
2import Link from 'next/link'
3
4const fetcher = (url) => fetch(url).then((res) => res.json())
5
6export default function Index() {
7  //todos.jsの配列(todos)を取得
8  const { data, error } = useSwr('/api/todos', fetcher)
9
10  if (error) return <div>Failed to load users</div>
11  if (!data) return <div>Loading...</div>
12
13  return (
14    <ul>
15      {data.map((todo) => (
16        //質問①[todo.js]にtodo：[id:0, task: "aaa"]を渡したい。todo.idであれば可能
17        <li key={todo.id}>
18          <Link href="/todo/[todo]" as={`/todo/${todo}`}>
19            <a>{`todo ${todo.id}`}</a>
20          </Link>
21        </li >
22      ))
23      }
24    </ul >
25  )
26}

todo/[todo].js

javascript
1import { useRouter } from 'next/router'
2
3//質問③ todo/todos.jsのtodosの中身を追加、削除、更新する方法がしりたい
4
5export default function Todo() {
6  const router = useRouter()
7  //質問①todo：[id:0, task: "aaa"]を格納したいができない。
8  const { todo } = router.query
9
10  return (
11    <>
12      <p>Post: {todo.id}</p>
13      <p>Post: {todo.task}</p>
14    </>
15  )
16}