Next.js Discord

Discord Forum

[bug]: Metadata templates are not being applied

Answered
Gecco posted this in #help-forum
Open in Discord
GeccoOP
The templates as defined in layout.tsx are not being applied to the title defined by a given page.tsx. I created a fresh project and tested with and without turbopack for verification. Here is the example code I was working with for reference.

layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: {
    template: "%s / Apple",
    default: "Apple",
  },
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

page.tsx
import Image from "next/image";
import styles from "./page.module.css";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Home",
};

export default function Home() {
  return <div className={styles.page}>Page content</div>;
}


When loading the page it only displays Home rather than applying the page.tsx title to the defined template in layout.tsx. I tested both on Node.js and Bun. My node version is v22.20.0 and Bun version is v1.3.1. I used React version 19.2.0 and Next.js version 16.0.0 with Typescript enabled. Thank you.

Regards,
Gecco
Answered by Gecco
I discovered you need to use a group or child subdir in order for the title to be applied, apologies
View full answer

1 Reply

GeccoOP
I discovered you need to use a group or child subdir in order for the title to be applied, apologies
Answer