Next.js应用中console.log与alert失效问题求助

问题核心 #

在Next.js 13.5.4 + TypeScript 5的项目中，src/app/addteam/page.tsx（已声明"use client"）存在以下异常：

• 组件内的console.log无输出、alert不弹出
• 浏览器控制台报错：invariant expected app router to be mounted
• 相同代码在其他Next.js项目可正常运行，排除代码本身问题，锁定项目配置或依赖层面的问题

排查与修复步骤 #

1. 检查根layout.tsx的正确性 #

App Router必须依赖根布局组件完成路由挂载，确保src/app/layout.tsx存在且结构正确：

• 必须导出默认组件
• 组件需包含<html>、<body>标签，并通过{children}渲染子页面

示例正确的根layout：

import './globals.css';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Moon Education Center',
  description: '...',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

若缺失根layout或结构错误，会直接导致路由无法挂载，触发目标报错。

2. 清理并重新安装依赖 #

依赖冲突或损坏可能导致App Router运行异常：

1. 删除node_modules和锁文件：

   rm -rf node_modules package-lock.json # npm用户
   # 或 rm -rf node_modules yarn.lock # yarn用户
   

2. 重新安装依赖：

   npm install # 或 yarn install
   

3. 检查next.config.js配置 #

避免启用冲突或废弃的实验性功能，确保配置符合Next.js 13.5.x要求：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 移除不必要的experimental配置，appDir在13.4+已默认启用
  // experimental: { appDir: true },
};

module.exports = nextConfig;

4. 排查第三方插件/自定义Provider干扰 #

暂时移除项目中的自定义全局Provider（如状态管理、路由拦截插件），重启开发服务器后测试是否恢复正常。若恢复，逐步排查具体是哪个插件导致的冲突。

5. 验证路由目录结构 #

确保addteam目录在src/app下，文件夹命名符合App Router规则（无特殊字符、不是保留字），避免嵌套错误的路由组或无效目录。

验证方法 #

每完成一项修改后，重启开发服务器（npm run dev），访问/addteam页面：

• 检查浏览器控制台是否还有invariant expected app router to be mounted报错
• 测试输入框为空时提交，是否弹出alert提示
• 查看控制台是否输出## This is console message ##

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