Question

0

149

Views

NextJS Dynamic favicon and title

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

I check the url the user is on (for example localhost:3000)
I get his project name on my webconstructor (localhost:3000 -> projectName: project1)
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

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T18:43:35.824Z

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

0

149

NextJS Dynamic favicon and title

1 answers

0

Find remote jobs

Andres GPT