How to set page title and description if page is "use client" ? #50872
-
|
Hi, The only solution I find actually is to have a "dump" Is the new Thanks ! |
Beta Was this translation helpful? Give feedback.
Replies: 19 comments 31 replies
-
|
Yeah, refactoring seems be the way to go. Keep the page a server component, add the metadata there, and import the client component to it. Makes you miss how flexible the Head component was, but at the same time, it sort of makes sense to separate these... at least if the general design pattern is to push client components to the leaves of the React tree. |
Beta Was this translation helpful? Give feedback.
-
|
But what if, for example, the page title and description is set based on a client's context. Is there any workaround for this? |
Beta Was this translation helpful? Give feedback.
-
|
Start with a server side default, and then, inside the client component, use an effect to modify the |
Beta Was this translation helpful? Give feedback.
-
Is this actually an acceptable solution? Feels like that might not get you an accurate result when Google etc indexes the pages. |
Beta Was this translation helpful? Give feedback.
-
|
In my Next.js React app I found a work around by getting the document.title and using a useEffect hook to stop it instantly changing back: Someone feel free to add to this if this has any side effects? |
Beta Was this translation helpful? Give feedback.
-
I am getting issue like this in this case. |
Beta Was this translation helpful? Give feedback.
-
|
Put the metadata in nested layouts, details here: Nesting Layouts Works for me. |
Beta Was this translation helpful? Give feedback.
-
|
The bad part of this solution is that you can't create titles that depend on search params, after all, layouts don't receive searchParams as a prop. You need to use the useSearchParams hook, but then only with use client. |
Beta Was this translation helpful? Give feedback.
-
|
My layout renders on the client side, for route info needs, and I just used the tag after. and it worked just fine. |
Beta Was this translation helpful? Give feedback.
-
|
Guys, WTF |
Beta Was this translation helpful? Give feedback.
-
|
All this SSR/CSR aside, changing the page title is a utterly basic requirement of web development—if I have to bend over backwards to do something as rudimentary as this, I’m sorry, @vercel you folks have lost the plot. |
Beta Was this translation helpful? Give feedback.
-
|
😢 |
Beta Was this translation helpful? Give feedback.
-
|
I got you Omar ;) : #50872 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
@jserrao 😄🍻 |
Beta Was this translation helpful? Give feedback.
-
|
so true @sujan-s whatever Rocket Science they add but I will also move away from the vercel now |
Beta Was this translation helpful? Give feedback.
-
|
In my case I multi languages titles, I ended creating hook to change title. mounted state to be sure that the code running in client side. usage |
Beta Was this translation helpful? Give feedback.
-
|
It’s unthinkable that we have to resort to such antics to do a basic task of changing the document title. |
Beta Was this translation helpful? Give feedback.
-
|
Changing the page title in the client is not good for SEO. In addition to scoring less in search engines, I've had strange experiences with Google Analytics registering pages with an undefined title, for example. |
Beta Was this translation helpful? Give feedback.
-
My usecase for nextjs was a dashboard behind login portal, so true that wont do well for SEO based websites |
Beta Was this translation helpful? Give feedback.
-
Not every website has to be SEO optimized. For most SaaS apps, where things happen after the user logs in, you don't need SEO for these pages but still need to change the document title! |
Beta Was this translation helpful? Give feedback.
-
|
Something so trivial, they managed to make it complex and had to implement. |
Beta Was this translation helpful? Give feedback.
-
|
WTF. The |
Beta Was this translation helpful? Give feedback.
-
|
word of wisdom |
Beta Was this translation helpful? Give feedback.
-
|
Sometimes we will need to build "absolute" client components (account page, edit profile, orders list...). It will be very bad if you cannot at least change the title of these pages. I know somebody will say that don't use nextjs for that situation... I'm fine! |
Beta Was this translation helpful? Give feedback.
-
|
They just made a crap out of nowhere. I love the old page router, much more client friendly !! |
Beta Was this translation helpful? Give feedback.
-
|
You can pass the client component inside server component and use the same |
Beta Was this translation helpful? Give feedback.
-
|
Just create a <title> </title> tag in the component if all you need is the title to change :) |
Beta Was this translation helpful? Give feedback.
-
|
I agree, in some contexts it is better not to insert the metadata on the layout and to insert the title/description for each page |
Beta Was this translation helpful? Give feedback.
-
|
Yeah this is pretty ridiculous. For page titles in client components, you can use a <title></title> tag within the component. For descriptions....yeah there doesn't seem to be a way to do this besides the whacky work-around of nesting a client component in a server component. Dropping the ball daily @vercel , great stuff. |
Beta Was this translation helpful? Give feedback.
-
|
Definitions complicate things that are actually easy |
Beta Was this translation helpful? Give feedback.
-
|
I think they've now added in a solution to getting searchParams paramThere's now a searchParams param you can add into your generateMetadata function but it has to be done in a server component: generateMetadata({ params, searchParams }) {}One gotcha is that it works differently than the client side searchParams in that you don't get the full web API to look through params. So if you had a route like: Example UsageMy scenario is that I have a digest of articles accessible under one path, so my data payload for a month edition of my magazine is like 4-5 articles that require client navigation. My paths are like export async function generateMetadata({ params, searchParams }) {
// Dynamic data fetch
const metadata = await getArticlesMetadata(params);
// Pulling apart my issue and article responses
const { allArticles, issue } = metadata;
// Getting current post metadata
const currentSlug = searchParams.post;
let currentArticle;
// Filter my article to find the matching slug (note how I did fallbacks, might not work for you)
const filtered = allArticles.filter((article) => article.slug === currentSlug);
if (filtered.length > 0) {
currentArticle = filtered[0];
} else {
currentArticle = allArticles[0];
}
return {
title: `${currentArticle.title} - Mag Name HERE`,
description: currentArticle.intro,
generator: 'Next.js 14 / React',
applicationName: 'Mag Name HERE',
referrer: 'origin-when-cross-origin',
keywords: [
'whatever',
'you',
'need',
],
publisher: 'ABCXYZ',
metadataBase: new URL('https://www.example.com'),
openGraph: {
title: `${currentArticle.title} - Mag Name HERE`,
description: currentArticle.intro,
url: `https://www.example.com/category/${issue.slug}?post=${currentArticle.slug}`,
siteName: 'Example Mag',
images: [
{
url: currentArticle.mainImageUrl,
width: 1200,
height: 630,
alt: 'Example Mag Image',
},
],
locale: 'en_US',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: `${currentArticle.title} - Mag Name HERE`,
description: currentArticle.intro,
creator: '@yourhandle',
creatorId: '########',
siteId: '########',
images: [currentArticle.mainImageUrl],
},
robots: {
index: true,
},
icons: {
icon: '/images/favicon/Favicon_64x64.png',
apple: '/images/favicon/Fav_Green_180x180.png',
},
appLinks: {
web: {
url: 'https://www.example.com',
should_fallback: true,
},
},
};
} |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
In my Next.js React app I found a work around by getting the document.title and using a useEffect hook to stop it instantly changing back: Someone feel free to add to this if this has any side effects? |
Beta Was this translation helpful? Give feedback.
-
|
Does it work for you??? It is throwing |
Beta Was this translation helpful? Give feedback.
-
|
This causes an error that the document isn't defined, but why does it work? When I put a string directly in the Then if I conditionally render the title tag depending on if the window is defined or not to remove the error, the title doesn't persist. For some reason it only persists when it's allowed to run on the server, but this doesn't make sense. |
Beta Was this translation helpful? Give feedback.
-
|
I want to change document.title based on searchParams, how to achieve this? |
Beta Was this translation helpful? Give feedback.
-
|
Its very simple to add title description and also the OG images without using metadata export and without using the nested layouts. Example : this is very simple way i also checked the description by sending the page link to whatsapp the whatsapp showing the description. |
Beta Was this translation helpful? Give feedback.
-
|
@aayush-khatrii not sure if this is safe. i and follow it back to useeffect with document.title but i feel since next is totally focusing on ssr. its going to make more complex to implement for csr. react helmet can be used also |
Beta Was this translation helpful? Give feedback.
-
|
its not this simple some random build issues come which is unable to find
and fix
…On Wed, 24 Jul 2024 at 7:18 PM, Aayush Khatri ***@***.***> wrote:
Its very simple to add title description and also the OG images without
using metadata export and without using the nested layouts.
Example :
`
'use client'
export default function page({params}) {
return (
// this is your main div wrapping all the content of your page
<title>This is title</title>
// your all content
</div>
)
}
`
this is very simple way i also checked the description by sending the page
link to whatsapp the whatsapp showing the description.
—
Reply to this email directly, view it on GitHub
<#50872 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BH74LE7OVJT3NGAZWAVWJCLZN6WBJAVCNFSM6AAAAAAY47QJTWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMJTHAYDINA>
.
You are receiving this because you commented.Message ID: <vercel/next.
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Why are we forced to jump through hoops to get a simple thing like this working on the client-side? I feel like @vercel pushes that there are no SSR and CSR use cases, but that SSR is good, and CSR is bad. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
But then there will be at least 2 <title> into tag of the page, one is the original and another is we add into out component JSX body. Will this cause SEO confuse? |
Beta Was this translation helpful? Give feedback.
-
|
To dynamically change the title tag in a “use client” component based on custom hook logic, I implemented a simple context-based solution. src/components/head-title/provider.tsx "use client";
import { createContext, useState } from "react";
export const HeadTitleContext = createContext<{
title: string;
setTitle: (title: string) => void;
}>({
title: "",
setTitle: () => {},
});
export const HeadTitleProvider = ({
children,
}: {
children: React.ReactNode;
}) => {
const [title, setTitle] = useState<string>("");
return (
<HeadTitleContext.Provider value={{ title, setTitle }}>
{children}
</HeadTitleContext.Provider>
);
};With this context, I created a HeadTitle component and a custom hook to manage the title. src/components/head-title/index.tsx "use client";
import { useContext } from "react";
import { HeadTitleContext } from "./provider";
export { HeadTitleProvider } from "./provider";
export const useHeadTitle = () => useContext(HeadTitleContext);
export const HeadTitle = () => {
const { title } = useContext(HeadTitleContext);
if (!title) return null;
return <title>{title}</title>;
};Then, I integrated the context provider and HeadTitle component within the layout. src/app/layout.tsx import { HeadTitle, HeadTitleProvider } from "@/components/head-title";
export { metadata } from "./metadata";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<HeadTitleProvider>
<html lang="en">
<head>
<HeadTitle />
</head>
<body>{children}</body>
</html>
</HeadTitleProvider>
);
}With this setup, the HeadTitle component displays the title only if it’s set in the context, preserving default metadata or generateMetadata settings otherwise. This approach can be extended to other meta tags dynamically. Example usage: "use client";
import { useHeadTitle } from "@/components/head-title";
import { useTimer } from "@/components/timer/use-timer";
import { useEffect } from "react";
export const HeadTitleController = () => {
const { setTitle } = useHeadTitle();
const { time, status } = useTimer();
useEffect(() => {
if (status === "running") {
setTitle(`${time.mm}:${time.ss} - Web Timer`);
} else {
setTitle("");
}
}, [status, time.mm, time.ss, setTitle]);
return null;
};Resetting to the default title is as simple as calling setTitle(""). |
Beta Was this translation helpful? Give feedback.
-
|
Wow, look at the antics we’re having to resort to. |
Beta Was this translation helpful? Give feedback.
-
|
Still no basic solution? Quite unbelievable really. |
Beta Was this translation helpful? Give feedback.
-
|
use <title></title> component |
Beta Was this translation helpful? Give feedback.
-
|
A common pattern is to see some realtime data in the title, such as a notification count. How can this be done in Next without removing the main title from the exported metadata object? Ideally we would have a static title for SEO that is updatable on the client. For example, let's say you have "Page Title" as your title for search results, but you want "(NotificationCount) - Page Title" on the same route for logged in users. I can render a There doesn't seem to be any way to get the updated title to override that original title tag. I can overwrite document.title in an effect, but it appears for a split second and then reverts back to the title from the exported metadata. |
Beta Was this translation helpful? Give feedback.
-
|
This is still not resolved? 😐 |
Beta Was this translation helpful? Give feedback.
and others
Yeah, refactoring seems be the way to go. Keep the page a server component, add the metadata there, and import the client component to it. Makes you miss how flexible the Head component was, but at the same time, it sort of makes sense to separate these... at least if the general design pattern is to push client components to the leaves of the React tree.