'NextJS Dynamic favicon and title

Greetins, I'm trying to build a webconstructor. Right now my application works like that:

  1. I check the url the user is on (for example localhost:3000)
  2. I get his project name on my webconstructor (localhost:3000 -> projectName: project1)
  3. I fetch the user's website data (for example favicon and title) (project1: {favicon: 'url', ...} Is it possible to render the favicon and title before the user enters the page so that it shows the right favicon and title in the browser. Right now I can only get it via useEffect in the main App component (but it's not good for seo). I have tried with getInitialProps but it doesn't seemd to do the job.

Thank you in advance

javascripthtmlcssnext.jsseo


Solution 1:[1]

Yeah it is possible to render dynamic favicon and title. Using the Head component from next/head. You can also create a GenericHead component that you can use whenever you want. Something like:

import Head from 'next/head'

const GenericHead: FC<{ title?: string; favicon?: string }> = (props) => {
  const { title, favicon } = props
  return (
    <Head>
      {title ? <title>{title}</title> : <title>Document</title>}
      <meta
        name='description'
        content='your description'
      />
      <link rel='icon' href={favicon ? favicon : '/favicon.ico'} />
    </Head>
  )
}

You can add more things to this GenericHead, like OpenGraph meta tags. And use it whenever you want

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AmilcarMunoz

Related Questions