Next.js 13开发环境表单事件无法触发的问题求助

一、表单事件未注册（开发模式专属） #

1. 确认组件为客户端组件 #

Next.js 13 App Router默认组件是服务器组件，无法绑定客户端事件。必须在ExampleForm.tsx文件最顶部添加客户端指令：

'use client';

import { useState } from 'react';

export default function ExampleForm() {
  // 组件逻辑
}

注意：父组件如果是服务器组件，子组件的'use client'指令不能省略，也无法通过父组件传递生效。

2. 规范表单事件绑定写法 #

确保onSubmit直接绑定到处理函数，且函数内必须调用e.preventDefault()阻止默认刷新：

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  console.log('表单提交触发');
  // 后续业务逻辑
};

// 表单元素示例
<form onSubmit={handleSubmit}>
  <input type="text" onChange={handleInputChange} />
  <button type="submit">提交</button>
</form>

避免用箭头函数包裹（如onSubmit={() => handleSubmit()}），这种写法在开发模式下可能因HMR或渲染逻辑导致绑定失效。

3. 修复依赖版本冲突 #

• 锁定Next.js到稳定版（如13.4.19），避免beta/rc版本的bug：

  npm install next@13.4.19
  

• 检查React/ReactDOM版本是否与Next.js兼容：运行npm ls react react-dom，确保版本统一。若有冲突，执行以下操作重置依赖：

  rm -rf node_modules package-lock.json
  npm install
  

二、"invariant expected app router to be mounted" 报错 #

1. 检查API使用范围 #

useRouter、usePathname等App Router钩子只能在客户端组件中使用，若在服务器组件中调用会触发该报错。确保所有使用这些钩子的组件都添加了'use client'指令。

2. 临时禁用Fast Refresh验证 #

在next.config.js中添加配置禁用Fast Refresh，验证是否为该功能的bug：

/** @type {import('next').NextConfig} */
const nextConfig = {
  fastRefresh: false,
};

module.exports = nextConfig;

若禁用后报错消失，升级Next.js到最新稳定版即可解决。

3. 排查自定义Layout/Page组件 #

如果自定义了app/layout.tsx或app/page.tsx，避免在服务器组件中直接渲染需要客户端交互的子组件——此类子组件必须标记'use client'。

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