How to update the favicon and title dynamically with the App Router

[lucasbasquerotto]

We are migrating from pages router to app router. Most things are working, and we liked some of the flexibility of the app directory files.

One thing we couldn't make work is to update the favicon and title dynamically depending on the user having new messages, similar to how Slack does.

It's currently working using the pages directory: we use a selector that retrieves the number of unread messages from a redux state, and if there's one or more messages we show a different favicon with a red circle and the title becomes {# of new messages} {title} (for example, (3) Dashboard).

How to do that using the app directory pages? It seems to ignore the metadata defined in the components.

I see that you can define metadata with export const metadata and generateMetadata, but they are static, in the sense that you can't change them dynamically as the user receives new messages without changing the page.

How to achieve this?

Thanks.

[lucasbasquerotto]

I was able to make it work in an imperative way using useEffect in our PageWrapper component that wraps the content of every page:

const useCustomHead = ({ title }: { title: string }) => {

	// selectors that retrieve the amount of unread messages and notifications...

	React.useEffect(() => {
		document.title = fullTitle;

		// Update favicon
		const link: HTMLLinkElement =
			document.querySelector("link[rel~='icon']") ||
			document.createElement('link');
		link.rel = 'icon';
		link.type =
			hasTalkUnviewed || hasNotificationUnviewed
				? 'image/svg+xml'
				: 'image/x-icon';
		link.href = hasTalkUnviewed
			? '/static/main-icons/message.svg'
			: hasNotificationUnviewed
				? '/static/main-icons/notification.svg'
				: '/favicon.ico';
		document.head.appendChild(link);
	}, [fullTitle, hasTalkUnviewed, hasNotificationUnviewed]);
};