Next.js Discord

Discord Forum

A small issue with my translation

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
Hey, quick question, I have an issue with the translation (I'm using next-intl).

{/* Unconfirmed Email Error */}
{unconfirmedEmailError && (
  <>
    <div
      style={{
        backgroundColor: "#6C3B3C",
        borderColor: "#C97070",
        padding: "8px 16px",
        marginTop: "8px",
        width: "340px",
        borderRadius: "4px",
      }}
    >
      <p style={{ color: "#FFFFFF" }}>
        {t("unconfirmedEmailError")}{" "}
        <Link href="/account-recovery" className="text-white underline">
          {t("unconfirmedEmailLink")}
        </Link>
      </p>
    </div>
    <p>Unconfirmed Email Error is visible</p>
  </>
)}


And I have the translation like this in the dictionary:

//en
 "unconfirmedEmailError": "Oops, it looks like your email hasn't been confirmed yet. If you need help {unconfirmedEmailLink}.",
  "unconfirmedEmailLink": "click here"
//ro
      "unconfirmedEmailError": "Opss, se pare că adresa dvs. de e-mail nu a fost confirmată încă. Dacă aveți nevoie de ajutor {unconfirmedEmailLink}.",
      "unconfirmedEmailLink": "faceți clic aici"


Umm.. what am I doing wrong ?
Image
As you can see only part of the string is getting translated
Answered by American Crow
t("unconfirmedEmailError",{unconfirmedEmailLink:""})
View full answer

105 Replies

American Crow
You forgot to pass a variable in to unconfirmedEmailLink. You did it one line above for unconfirmedEmailError but forgot it for EmailLink

Sorry on mobile no formatting
Wait no you never passed any variables in
In both cases
I'm not a programmer by the way
(I'm using AI)
American Crow
export default function UserProfile({user}) {
  const t = useTranslations('UserProfile');
 
  return (
    <section>
      <h1>{t('title', {firstName: user.firstName})}</h1>
      <p>{t('membership', {memberSince: user.memberSince})}</p>
      <p>{t('followers', {count: user.numFollowers})}</p>
    </section>
  );
You see what I mean ? Pass the variable in
American Crow
t('messagekey', variable)
In the t function
Sun bearOP
I'm sorry I have no idea what you mean
American Crow
t("unconfirmedEmailError","abc@abc.com")
Sun bearOP
In my dictionaries ?
American Crow
No your Jax
Jsx
Your first screenshot jsx
Sun bearOP
Here ?
American Crow
Yes
Line Where it says oops, ..
Sun bearOP
{t("unconfirmedEmailError")}{" "}
Do I have to change this line to something else ?
American Crow
Yes
t("unconfirmedEmailError",{unconfirmedEmailError:"abc@abc.com"})
Sun bearOP
why abc@abc.com though ?
I don't understand
What does that have to do with my error message ?
American Crow
Its an example I don't know what you want to fill in
Sun bearOP
Ohhhh.
For the moment I want it to be empty because normally that should lead to a page from my documentation (which is not ready yet)
Like the link needs to lead nowhere at the moment, like a clickable link but which doesn't do anything when clicked
American Crow
t("unconfirmedEmailError",{unconfirmedEmailLink:""})
Answer
American Crow
You expecting the placeholder in your translation dictionary so you have to pass it when calling the t function
Sun bearOP
American Crow
You are in jsx you forgot the outter {}
Sun bearOP
Hmm, what's up with that . and , before the last string ?
The . needs to appear at the end
And there should be no comma
American Crow
Never will I try to answer from mobile haha typing all the special characters here is so stupid :lolsob:
The comma is in your translation dictionary
American Crow
No my fault for being on mobile
Sun bearOP
      "unconfirmedEmailError": "Opss, se pare că adresa dvs. de e-mail nu a fost confirmată încă. Dacă aveți nevoie de ajutor {unconfirmedEmailLink}.",
      "unconfirmedEmailLink": "faceți clic aici"
So that is from my dictionary, as you can see I don't have a comma before the {unconfirmedEmailLink}
And you can also see there should be a . at the end.
Did I did something wrong here ?
American Crow
At your cursor is a comma
Sun bearOP
Ohh I see okay that got rid of one of them
And now I also need that period to be at the end
American Crow
Your translation dictionary
It ends with faceti clic aici
Not with a .
Sun bearOP
Hmm, this is a bit confusing. Isn't the { } part supposed to contain the "Faceti click aici" part ?
American Crow
I don't speak the language so it's hard for me to order it correctly
No
Sun bearOP
Therefore, the period after the { } would be after the "faceti click aici" ?
Then why even use the { } part if it doesn't do that ? I'm confused
Like what's the purpose of that elseway ?
American Crow
      "unconfirmedEmailError": "Opss, se pare că adresa dvs. de e-mail nu a fost confirmată încă. Dacă aveți nevoie de ajutor {unconfirmedEmailLink}.",
      "unconfirmedEmailLink": "faceți clic aici"


You don't need the last part:

      "unconfirmedEmailError": "Opss, se pare că adresa dvs. de e-mail nu a fost confirmată încă. Dacă aveți nevoie de ajutor {unconfirmedEmailLink}."
Sun bearOP
I don't need "unconfirmedEmailLink": "faceți clic aici" this part ?
American Crow
Yes
Sun bearOP
then how will it know that "faceți clic aici" needs to be a hyperlink ?
American Crow
Split it in it's own message key and use <Link> t("emailLink")</Link>
Sun bearOP
Wait isn't that what I'm already doing ?
As in "unconfirmedEmailLink" is the key for the link
American Crow
Tell me what faceti clic auci means . Does it mean click here ?
American Crow
Ok then you do it already my apologies
Sun bearOP
No worries, I just wanted to make sure that's how it works
So this is why I am confuseed
I thought that {uncofirmedLink} inherits from the key
And that it would put the period normally after the key
Instead it seems like it doesn't do that, and instead the other key is literally used like a separate key even though we already invoke it using { }
So then why even invoke it in the first place
American Crow
It's correct from the screenshot when you posted it as code the intention was fucked
Translation file is correct
Sun bearOP
Then why does it put the period before the {key}
American Crow
If you want the . Behind the link you have to delete the . from the translation file and add it to the jsx
Sun bearOP
No no, I want it after the link
Not behind it
Like, at the end
Like this
American Crow
Yea thats what I meant
Sun bearOP
Oh I see
 {t("unconfirmedEmailError",{unconfirmedEmailLink:""})}
So how does this line need to look instead
American Crow
The same no changes
Sun bearOP
Hmm, but now it's missing the period.
American Crow
Add a . in jsx before your closing </Link>
Sun bearOP
 {t("unconfirmedEmailError",{unconfirmedEmailLink:""})}
              <Link href="/account-recovery" className="text-white underline">
                {t("unconfirmedEmailLink")}
              .</Link>
Like that ?
American Crow
Yes
Sun bearOP
Now the period is also hyperlinked.
I don't want it to be hyperlinked.
American Crow
Dude are you trolling ? Well add it after the closing Link
Sun bearOP
I'm not trolling, just asking. I just said I don't know programming.
Okay that fixed it.
Thank you very much for your help @American Crow 🙏🏻
American Crow
How did you set all this up without knowing programming wtf
Sun bearOP
Magic 🪄