Next.js 13.5.5构建报错：Property 'MyApp'与索引签名不兼容

错误信息 #

执行npm run build时触发TypeScript错误：

./build/types/app/layout.ts:8:13
Type error: Type 'OmitWithTag<typeof import("D:/nodeprogs/br-books-frontend/src/app/layout"), "metadata" | "default" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | "preferredRegion" | "runtime" | "maxDuration" | "generateMetadata", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'MyApp' is incompatible with index signature.
    Type '({ children }: { children: React.ReactNode; }) => React.JSX.Element' is not assignable to type 'never'.

问题原因 #

Next.js App Router对app/layout.ts文件的导出有严格约定：该文件仅允许导出框架指定的标识符（如default根布局组件、metadata、generateMetadata、revalidate等），不能导出额外的命名组件或变量。

你在layout.ts中导出了MyApp组件，这违反了框架的类型校验规则——构建时TypeScript会检查该文件的导出是否符合“除允许的标识符外无其他属性”的约束，而MyApp作为额外导出被判定为不兼容。

解决方法 #

方法1：将MyApp移至单独组件文件 #

把MyApp组件提取到独立的组件文件中，再在layout.ts中导入使用：

// app/components/MyApp.tsx
export default function MyApp({ children }: { children: React.ReactNode }) {
  return <div className="app-container">{children}</div>;
}

// app/layout.tsx
import MyApp from './components/MyApp';

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

方法2：将MyApp定义为根布局内部组件 #

如果MyApp仅在根布局中使用，可直接将其定义在RootLayout函数内部，避免顶层导出：

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // 内部定义MyApp组件，无需顶层导出
  const MyApp = ({ children }: { children: React.ReactNode }) => {
    return <div className="app-container">{children}</div>;
  };

  return (
    <html lang="zh-CN">
      <body>
        <MyApp>{children}</MyApp>
      </body>
    </html>
  );
}

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