Umemura Farm Website – Devlog #40: Fixing i18n Text Styling Issues and Final Touches on My Project

Today's Work: Fixing i18n Text Styling with Dynamic Emphasis

When implementing i18n support, I encountered an issue where parts of the text wrapped in <span> tags for color emphasis did not render correctly. Instead, the raw HTML code appeared on the page.

The Problem

For example, the JSON data looked like this:

{
  "text": "10月以降のお申し込みは",
  "emphasis": "翌年発送",
  "textAfter": "のご予約となります。"
}

But the emphasized part wrapped in tags was not interpreted as HTML and showed literally.

The Solution
By using the translation hook's raw output combined with conditional rendering, I updated the component as follows:

{t.raw('section5.items').map(
  (
    item: string | { text: string; emphasis: string; textAfter?: string },
    i: number
  ) => (
    <li key={i}>
      {typeof item === 'string' ? (
        item
      ) : (
        <>
          {item.text}
          <span className="text-red-500">{item.emphasis}</span>
          {item.textAfter ?? null}
        </>
      )}
    </li>
  )
)}

This way, the emphasis part is properly wrapped in a with the desired styling, and the text renders correctly.

Other Work
Made small refinements to some English expressions throughout the site for better clarity and naturalness.

No major code or design changes were needed—mostly iterative polishing.

Wrapping Up
With this fix and minor touch-ups complete, I consider the main development phase of this project finished. This blog series will conclude here.

Thank you for following along with my journey on this project!

---

tags: nextjs, i18n, react, localization, frontend, portfolio