問題

在使用import { useState } from "react";時報錯：You're importing a component that needs useState. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the “use client” directive.

import TodoFilter from "./components/TodoFilter";
import TodoList from "./components/TodoList";
import AddTodo from "./components/AddTodo";
import TodoItem from "./components/TodoItem";
import { useState } from "react";export default function Home() {const [todos, setTodos] = useState([]);return (<div><h1>TodoList</h1><AddTodo /><TodoList />  <TodoFilter /></div>)
}

分析

這個錯誤是因為在 Next.js 13+ 的 App Router 中，默認情況下所有組件都是服務器組件（Server Components），而 useState 等 React Hooks 只能在客戶端組件（Client Components）中使用。

解決方案很簡單，需要在文件頂部添加 "use client" 指令，將這個組件標記為客戶端組件。應修改 page.tsx 文件為：

"use client";import TodoFilter from "./components/TodoFilter";
import TodoList from "./components/TodoList";
import AddTodo from "./components/AddTodo";
import TodoItem from "./components/TodoItem";
import { useState } from "react";// ... 其余代碼保持不變 ...