CODEWITHSUNDEEP
next.jslayoutmetadatanext.js13
JonathanXD12
JonathanXD12

Reputation: 61

How can I add a separate layout for special pages like "not-found" in Next.js 13

I'm currently working on a personal project using Next.js 13. For each route, I have set up a separate folder that contains a layout, CSS, and page file. However, I've run into an issue for special routes like "not-found". Those need to be specified directly in the "app" folder for them to work correctly.

As a workaround, I first tried to use Route Groups, but that didn't work. So I tried importing the layout and CSS file separately into the not-found page. This approach works for the CSS file, but not for the layout, since the metadata of the global layout is rendered. This is probably because the page is not nested, how I wanted it to be originally.

Is there a way I can fix this? To add some context, I need a unique layout for each page because the metadata varies across pages. Normally, I believe you just use a global layout, but that's not the case for my project.

Thank you for your help.

Upvotes: 2

Views: 1086

Answers (1)

OnixFang
OnixFang

Reputation: 26

If the metadata is your problem, try using the Next.js Metadata API. That is how we are managing those metadata tags in our project.

For example:

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
}

Upvotes: 1

Related Questions