NextJS部署GitHub Pages编译失败：组件导出类型错误求助

• 核心问题：你将Button组件放在了app/components/Button/page.tsx，在Next.js的App Router规则中，app/目录下的page.tsx会被识别为路由页面组件，这类组件的默认导出必须符合页面组件规范（无需接收onClick、children这类自定义props），因此触发编译错误。

• 解决步骤：

  1. 调整文件结构：在项目根目录创建独立的components文件夹（不要嵌套在app目录内），将Button组件文件重命名为Button.tsx并移入该文件夹，最终路径为components/Button.tsx。
  2. （可选但推荐）为组件添加TypeScript类型定义，避免后续类型问题：

修改后的Button组件代码示例：

// components/Button.tsx
// 若使用styled-components，需确保已安装并导入
import styled from 'styled-components';

const StyledButton = styled.button`
  // 此处添加你的按钮样式
`;

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

const StylizedButton = ({ onClick, children }: ButtonProps) => {
  return (
    <StyledButton onClick={onClick}>
      {children}
    </StyledButton>
  );
};

export default StylizedButton;

在页面中使用Button组件时，按如下方式导入：

// 示例：app/page.tsx
import StylizedButton from '@/components/Button';

export default function Home() {
  return (
    <main>
      <StylizedButton onClick={() => alert('按钮被点击')}>
        测试按钮
      </StylizedButton>
    </main>
  );
}

调整完成后重新执行构建部署流程即可解决该错误。

内容的提问来源于stack exchange，提问作者Mariano Cerdá