Next.js Discord

Discord Forum

How do I set the title tag?

Unanswered
Orinoco Crocodile posted this in #help-forum
Open in Discord
Orinoco CrocodileOP
I am using a context provider wrapped around my elements (in order to set theme) and when I try to set the title using metadata - it doesnt always work

11 Replies

Orinoco CrocodileOP
    <html lang="en">
      <head>
        <link
        <link rel="shortcut icon" href="/favicon.svg" />
        <title>{formatTitle("404")}</title>
      </head>
      <Provider>{children}</Provider>
    </html>
This is my layout.tsx file
"use client";

import classNames from "classnames";
import { createContext, useState } from "react";
import s from "./theme.module.scss";
import Script from "next/script";
import { Navbar } from "../navbar/navbar";
import { DM_Sans } from "next/font/google";
import { Loader } from "../loader/loader";
import localFont from "next/font/local";

export const ThemeContext = createContext<
  Partial<{
    theme: string;
    setTheme: (e: string) => void;
  }>
>({});

const DMSans = DM_Sans({ subsets: ["latin"], variable: "--font-primary" });

const MontBlanc = localFont({
  variable: "--font-mont",
  src: [
    {
      path: "./fonts/MontBlanc-Bold.ttf",
      weight: "800",
    },
    {
      path: "./fonts/MontBlanc-SemiBold.ttf",
      weight: "700",
    },
    {
      path: "./fonts/MontBlanc-Regular.ttf",
      weight: "600",
    },
    {
      path: "./fonts/MontBlanc-Light.ttf",
      weight: "300",
    },
  ],
});
export const Provider = ({ children }: { children?: React.ReactNode }) => {
  const [theme, setTheme] = useState("");

  const state = {
    theme: theme,
    setTheme: (e: string) => setTheme(e),
  };

  const height = typeof window === "undefined" ? "100vh" : window.innerHeight;

  return (
    <ThemeContext.Provider value={state}>
      <body
        className={classNames(DMSans.variable, MontBlanc.variable, {
          [s.blue]: theme === "blue",
        })}
        style={{ minHeight: height }}
      >
        <Loader />
        <Navbar />
        <main>{children}</main>
      </body>
    </ThemeContext.Provider>
  );
};
and this is the provider file
@Orinoco Crocodile ts "use client"; import classNames from "classnames"; import { createContext, useState } from "react"; import s from "./theme.module.scss"; import Script from "next/script"; import { Navbar } from "../navbar/navbar"; import { DM_Sans } from "next/font/google"; import { Loader } from "../loader/loader"; import localFont from "next/font/local"; export const ThemeContext = createContext< Partial<{ theme: string; setTheme: (e: string) => void; }> >({}); const DMSans = DM_Sans({ subsets: ["latin"], variable: "--font-primary" }); const MontBlanc = localFont({ variable: "--font-mont", src: [ { path: "./fonts/MontBlanc-Bold.ttf", weight: "800", }, { path: "./fonts/MontBlanc-SemiBold.ttf", weight: "700", }, { path: "./fonts/MontBlanc-Regular.ttf", weight: "600", }, { path: "./fonts/MontBlanc-Light.ttf", weight: "300", }, ], }); export const Provider = ({ children }: { children?: React.ReactNode }) => { const [theme, setTheme] = useState(""); const state = { theme: theme, setTheme: (e: string) => setTheme(e), }; const height = typeof window === "undefined" ? "100vh" : window.innerHeight; return ( <ThemeContext.Provider value={state}> <body className={classNames(DMSans.variable, MontBlanc.variable, { [s.blue]: theme === "blue", })} style={{ minHeight: height }} > <Loader /> <Navbar /> <main>{children}</main> </body> </ThemeContext.Provider> ); }; and this is the provider file
Dayo
not sure that’s how metadata is done. check here - https://nextjs.org/docs/app/building-your-application/optimizing/metadata
Orinoco CrocodileOP
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
I'm using this inside my page.tsx files
It's not loading it though
Dayo
so why do you have a head tag inside the layout?
Orinoco CrocodileOP
As a fallback
Orinoco CrocodileOP
Otherwise on 404 pages it wasnt setting title
@Orinoco Crocodile Otherwise on 404 pages it wasnt setting title
Dayo
i think you should try removing the one in the layout. it's possible it's overriding the ones in the page files
Orinoco CrocodileOP
got it thanks!