I created a next 13 project with manny subpages.
In next 13 i found the soloutin to do this with folders in the app folder like app/contact/page.tsx
I tried it and it worked so i can open the route with localhost:3000/contact
Now i am at the point where i want to change the meta title for the subpage but there is the Problem…
I cant add:
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Home | Sakura Hagen',
description: 'Home Page of Sakura Hagen',
}
because iam using "use client" in my subpage so this is what i tried else.
First i tried importing head like this:
import Head from 'next/head';
return (
<>
<Head>
<title>Contact - Page </title>
<meta name="description" content="Willkommen zu meinem Blog" />
</Head>....
but it changed nothing. It resultet with the title before.
Next i tried to
npm i next-seo
then i tried to import it like this
import { NextSeo } from 'next-seo';
<NextSeo
title="Contact - Page"
description="description"
/>
but nothing changed again…
last i tried to create a layout.tsx, where i add the meta like this:
import { Footer, Navbar, ScrollToTop, Tel } from '@/components'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'contact - page',
description: 'description',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="de" className='scroll-smooth'>
<body className="relative">
<Navbar />
{children}
<Footer />
<Tel />
<ScrollToTop />
</body>
</html>
)
}
it worked a little bit, if i open my homepage and click on contact i go to …/contact with the new title. But if i try to jump back to main page the error looks like this.
Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
2
Answers
I already found an answer while formulating it, I hope it helps others
Its pretty simple...
Just use:
inside of the page.tsx
should look like this
Since you are using the App Router, there is no need to use the
<title>
element manually. If you check the Next.js documentation on Metadata, you will notice that there is merging in place along the segments.For example, in my root layout at
app/layout.tsx
, I declare the following:And within a page, such as
app/page.tsx
, I can do the following:What Next.js does is merge these exported
metadata
objects (or generated metadata fromgenerateMetadata
) to build the final metadata and, thus, the title. In my example, navigating to the root path at/
will take the template of the root layout and slot in the page-specific title "Page Title" into it, resulting in "Page Title – Showcasething".Of course, the same works without a template by using just a
title
along the segments to override them where applicable. Another example for this:This configuration will make the title of
/nested
be "Nested."