Next.js Discord

Discord Forum

Next-intl - internationalisation - markup not working

Answered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
I'm trying to get the markup to work with internationalisation. I manage to retrieve the text but it doesn't apply the markup. Anyone able to tell me how it's done?

// en.json 

  {
     congratulate: {
       person1: "<b>happy birth day</b>"
       person2: "<i>happy birth day</i>"
     }
  }

// page.tsx

  const Page = () => {
     const t = useTranslations("congratulate");

     return(
       <> 
         <div>{t.markup("person1")}</div>
         <div>{t.markup("person2")}</div>
       <>   
     )
   }
==> doesn't apply bold / italic right now.
Answered by American Fuzzy Lop
When I was doing this I used dangerously set html
View full answer

4 Replies

American Fuzzy Lop
When I was doing this I used dangerously set html
Answer
@American Fuzzy Lop https://blog.logrocket.com/using-dangerouslysetinnerhtml-in-a-react-application/
Northeast Congo LionOP
This solution works. Thanks man! Is that the way to go generally? It does say it's dangerous after all 😅
@Northeast Congo Lion This solution works. Thanks man! Is that the way to go generally? It does say it's dangerous after all 😅
joulev
Yes. dangerouslySetInnerHtml is what to use when you want to render an html string. It is dangerous because with a malicious html string you can XSS yourself, so only use it for trusted strings