+ About
+
+ {JSON.stringify(data, null, 4)}
+ {JSON.stringify(tData, null, 4)}
+
+ );
+}
diff --git a/examples/nextjs-todo-app/client/pages/index.tsx b/examples/nextjs-todo-app/client/pages/index.tsx
new file mode 100644
index 0000000..81834b1
--- /dev/null
+++ b/examples/nextjs-todo-app/client/pages/index.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { TodoAdd } from "../components/moleculs/TodoAdd";
+import { TodoList } from "../components/organisms/TodoList";
+import { Layout } from "../components/templates/Layout";
+import { useUserContext } from "../lib/userProvider";
+import { useJsonFetch } from "../lib/useJsonFetch";
+
+export default function Index() {
+ const [todoItems, setTodoItems] = useState([]);
+ const [currentUser] = useUserContext();
+ const { error, loading, fetchData } = useJsonFetch(`http://localhost:8080`);
+
+ useEffect(() => {
+ if (!currentUser.username) return;
+
+ loadTodos();
+ }, []);
+
+ async function loadTodos() {
+ return fetchData(`todos/${currentUser.username}`)
+ .then((data) => {
+ return Object.keys(data).map((x) => ({
+ id: x,
+ desc: x,
+ state: data[x],
+ }));
+ })
+ .then((data) => setTodoItems(data));
+ }
+
+ return (
+