Next.js中useState完全失效问题求助

问题分析 #

你的计数器代码逻辑本身无错误，但从package.json能看到几处依赖配置问题，这是导致状态更新异常的核心原因：

• 无效的@types/react版本："@types/react": "^" 是非法版本号，会导致类型依赖安装失败或运行异常
• react-dom版本不匹配：react-dom指定为"18"，需和react的"^18"保持一致范围
• JSON语法错误：next依赖末尾多了多余逗号，会导致配置解析失败

修复步骤 #

1. 修正package.json配置

将依赖部分修改为：

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "13.5.4"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^20",
    "autoprefixer": "^10",
    "postcss": "^8",
    "tailwindcss": "^3",
    "eslint": "^8",
    "eslint-config-next": "13.5.4"
  }
}

2. 重新安装依赖

删除node_modules和对应锁文件（package-lock.json/yarn.lock），执行安装命令：

npm install
# 或 yarn install / pnpm install

3. 验证组件与缓存

• 确保组件文件为app/page.tsx（符合Next.js App Router路由约定）
• 重启next dev服务，清除浏览器缓存（Ctrl+Shift+R / Cmd+Shift+R）

完成以上操作后，点击按钮即可正常更新count值。

内容的提问来源于stack exchange，提问作者Ved Recharla