Next.js项目反复出现RangeError: Array buffer allocation failed错误求助

这种反复出现的内存相关错误确实挺闹心的，尤其是明明硬件配置足够、朋友同环境下没问题的情况。结合你提到的「JSX出错时会触发这个错误」，还有你已经排查过的步骤，给你几个具体的方向试试：

1. 把原生DOM操作换成React状态管理（优先试试这个） #

你现在用document.querySelector和classList.toggle来控制菜单显示，虽然useEffect里做了事件清理，但直接操作DOM容易和React的虚拟DOM渲染逻辑冲突，可能间接引发内存异常。建议换成React的useState来管理状态，完全用React的方式实现：

'use client';

import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';

export default function Navbar() {
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

    return (
        <div>
            <nav className="bg-primary-50">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex items-center justify-between h-16">
                        <div className="flex items-center">
                            <Link className="text-xl font-semibold" href="/">
                                TimovC
                            </Link>
                        </div>
                        <div className="hidden md:block">
                            <div className="ml-10 flex items-baseline space-x-4">
                                <Link href="/portfolio">Portfolio</Link>
                                <Link href="/contact">Contact</Link>
                                <Link href="/klanten">Voor klanten</Link>
                            </div>
                        </div>
                        <div className="-mr-2 flex md:hidden">
                            <button
                                type="button"
                                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"
                                aria-controls="mobile-menu"
                                aria-expanded={isMobileMenuOpen}
                                onClick={() => setIsMobileMenuOpen(prev => !prev)}
                            >
                                <span className="sr-only">Open menu</span>
                                <Image src="/mobileMenu.svg" alt="mobile menu" width={24} height={24} />
                            </button>
                        </div>
                    </div>
                </div>
                <div className={`md:hidden ${isMobileMenuOpen ? '' : 'hidden'}`} id="mobile-menu">
                    <div className="px-2 pt-2 pb-3 space-y-1 space-x-4 sm:px-3">
                        <Link href="/portfolio">Portfolio</Link>
                        <Link href="/contact">Contact</Link>
                        <Link href="/klanten">Voor klanten</Link>
                    </div>
                </div>
            </nav>
        </div>
    );
};

这种方式既符合React的最佳实践，也能避免直接操作DOM带来的潜在冲突问题。

2. 调整Node.js的内存限制 #

开发模式下Next.js的打包工具（Webpack/Rspack）可能会占用较多内存，虽然你有16G内存，但Node.js默认给单个进程的内存上限可能不够。启动项目时可以手动指定内存限制：

next dev --max-old-space-size=8192

这个命令会给Node.js分配8G的老年代内存，足够覆盖开发时的内存需求了。

3. 彻底清理项目缓存与依赖 #

有时候残留的缓存文件会导致各种奇怪的问题，试试以下步骤：

• 删除项目根目录的.next文件夹
• 删除node_modules文件夹和package-lock.json（如果用yarn就删yarn.lock）
• 重新运行npm install或yarn install
• 再次启动项目

4. 检查Image组件的使用 #

你用到了Next.js的Image组件加载本地的/mobileMenu.svg，先确认这个文件确实在项目的public目录下，而且文件没有损坏。也可以临时换成普通的<img>标签测试，看看是不是Image组件的开发模式优化逻辑导致的内存异常。

5. 尝试降级Node.js版本 #

有时候最新版Node.js和Next.js的开发服务器可能存在兼容性问题，你可以暂时降级到LTS版本（比如v20.x系列），再观察错误是否消失。

备注：内容来源于stack exchange，提问作者Timo van Campen