Menu
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.
525
asked Dec 11 '25 16:12
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:
export const metadata = {
title: {
template: '%s — Showcasething'
}
}
And within a page, such as app/page.tsx, I can do the following:
export const metadata = {
title: 'Page Title'
}
What Next.js does is merge these exported metadata objects (or generated metadata from generateMetadata) 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:
// app/layout.tsx
export const metadata = {
title: 'Home'
}
// app/nested/page.tsx
export const metadata = {
title: 'Nested'
}
This configuration will make the title of /nested be "Nested."
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
