javascript 覆盖next.js中的应用程序(文件夹)组件13

7cwmlq89 于 2023-11-15 发布在 Java

关注(0)|答案(1)|浏览(142)

假设我有这样的文件夹结构：

的数据
有没有办法加载app文件夹中默认的组件，而不是自定义文件夹中的组件？如果自定义文件夹中没有**，则使用app文件夹中的默认组件。

的
只要所有组件具有相同的文件夹结构，这对所有组件都适用吗？

的
我想我将不得不覆盖一些默认功能

1条答案

在深入研究了文档之后，我发现了一个可能的解决方案，那就是使用pageExtensions。
https://nextjs.org/docs/app/api-reference/next-config-js/pageExtensions
通过将扩展名custom.tsx添加到pageExtensions数组，其中顺序很重要。

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["custom.tsx", "tsx"],
};

module.exports = nextConfig;

字符串
如果我现在在文件page.custom.tsx中创建About组件，内容如下：

export default function About() {
  return (
    <main>
      <h1>About custom</h1>
    </main>
  );
}

型
这将加载page.custom.tsx而不是page.tsx组件。
但我在控制台中收到一条警告消息，这是有道理的，有什么要担心的吗？：

Duplicate page detected. src/app/about/page.custom.tsx and src/app/about/page.tsx resolve to /about

型