如何在本地使用Next.js开发构建调试Heroku部署项目？

一、启用Next.js本地开发构建 #

• 先确保项目根目录已安装所有依赖，未安装则执行：

  npm install
  # 或使用yarn
  yarn install
  

• 启动开发服务器，这会自动以未压缩的开发构建模式运行，包含完整的错误提示和调试警告：

  npm run dev
  # 或
  yarn dev
  

• 打开浏览器访问http://localhost:3000，此时React会输出完整的错误详情，而非压缩后的错误码。

二、修复组件显示切换功能问题 #

你的代码触发React错误#423的核心原因是：标记了'use client'的客户端组件，顶层不能是异步函数。同时组件的逻辑也需要调整，以下是修正后的代码：

'use client';

import React, { useState, useEffect } from 'react';
import channelsPool from "@/lib/channels";

export default function DB_ChanList() {
  const [listDisplay, setListDisplay] = useState(true);
  const [theChannels, setTheChannels] = useState<string[]>([]);

  // 用useEffect执行异步数据获取
  useEffect(() => {
    const fetchChannels = async () => {
      const channels = await channelsPool();
      setTheChannels(channels);
    };
    fetchChannels();
  }, []);

  const swapDisplay = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    setListDisplay(!listDisplay);
  };

  return (
    <div>
      {listDisplay && theChannels.length > 0 ? (
        theChannels.map(item => (
          <div key={item}>
            <button onClick={swapDisplay} value={item}>
              <b>{item}</b>
            </button>
          </div>
        ))
      ) : !listDisplay ? (
        <div>THE:unitID::</div>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
}

关键修正说明： #

• 移除了组件顶层的async关键字，客户端组件不允许顶层异步
• 用useState初始化theChannels为空数组，避免渲染时出现undefined.map报错
• 把异步数据获取逻辑放到useEffect中，确保仅在组件挂载时执行一次
• 增加了加载状态判断，优化用户体验

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