yarn build时Next.js布局组件出现TypeScript类型推断错误

app目录下的layout.ts/layout.tsx是Next.js的路由布局文件，仅允许导出官方指定的标识符（如default布局组件、metadata、config等），不能额外导出自定义组件（比如你这里的AuthLayoutWrapper），否则会触发Next.js的类型校验规则，导致build失败。

方法一：将自定义组件移到单独文件 #

如果AuthLayoutWrapper需要在其他地方复用，建议把它抽离到独立组件文件中：

1. 在(dashboard)目录下新建AuthLayoutWrapper.tsx文件
2. 把组件代码迁移到新文件：

import { Suspense } from 'react';
import Loader from './Loader';
import DefaultLayout from './DefaultLayout';

interface Props {
  children: React.ReactNode;
}

export const AuthLayoutWrapper = ({ children }: Props) => {
  return (
    <Suspense fallback={<Loader />}>
      <DefaultLayout>
        {children}
      </DefaultLayout>
    </Suspense>
  );
};

3. 在原layout.tsx中导入并使用：

import { AuthLayoutWrapper } from './AuthLayoutWrapper';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <AuthLayoutWrapper>{children}</AuthLayoutWrapper>;
}

方法二：改为局部组件（不导出） #

如果AuthLayoutWrapper仅在当前布局文件中使用，直接去掉export关键字，作为局部组件使用：

import { Suspense } from 'react';
import Loader from './Loader';
import DefaultLayout from './DefaultLayout';

interface Props {
  children: React.ReactNode;
}

// 去掉export，转为局部组件
const AuthLayoutWrapper = ({ children }: Props) => {
  return (
    <Suspense fallback={<Loader />}>
      <DefaultLayout>
        {children}
      </DefaultLayout>
    </Suspense>
  );
};

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <AuthLayoutWrapper>{children}</AuthLayoutWrapper>;
}

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