如何为 Next.js 13 中的“未找到”等特殊页面添加单独的布局

Question

我目前正在使用 Next.js 13 开发一个个人项目。对于每条路线，我都设置了一个单独的文件夹，其中包含布局、CSS 和页面文件。但是，我遇到了“未找到”等特殊路线的问题。这些需要直接在“app”文件夹中指定才能正常工作。

作为解决方法，我首先尝试使用路由组，但这不起作用。所以我尝试将布局和CSS文件分别导入到未找到的页面中。此方法适用于 CSS 文件，但不适用于布局，因为渲染了全局布局的元数据。这可能是因为页面没有嵌套，这是我最初想要的。

有什么办法可以解决这个问题吗？为了添加一些上下文，我需要为每个页面使用唯一的布局，因为元数据因页面而异。通常，我相信您只是使用全局布局，但我的项目并非如此。

谢谢您的帮助。

Answer 1

我是 next.js 的新手，我希望这有帮助！

如果元数据是您的问题，您是否尝试过使用元数据 API？这就是我们在项目中管理这些元数据标签的方式。例如：

import type { Metadata } from 'next'; // Import Metadata from next

export const metadata: Metadata = {   // Export a metadata variable
  title: 'Home | My Cool Site',       // Add all your metadata for this page
};

export default function Page() {      // And finally, add your page's code as
  return <h1>Wellcome</h1>;            // you would normally do
}

以下是解释其工作原理的文档： 优化：元数据 | Next.js