i18n `next-intl` by pettinarip · Pull Request #14906 · ethereum/ethereum-org-website

pettinarip · 2025-02-14T14:32:25Z

Description

This PR implements next-intl replacing the previous i18n library next-i18next. This is the initial step towards the use of the app router.

Changes for this transition

Removed the built-in i18n mechanism from nextjs. This is all handled by next-intl and by the page components using getStaticPaths. The load of namespaces logic is now in our control, created a loadNamespaces function.
All pages are located in the folder [locale]
All translation related hooks were migrated to the exported versions from next-intl. These are useTranslation, useRouter, usePathname, useLocale
Current limitation: 404 page can't be translated in this transition.
Changed the env var BUILD_LOCALES to NEXT_PUBLIC_BUILD_LOCALES since we need to use it to get all locales used in client components.
Updated the Link component to use the i18n navigation components

Things to test

Netlify support (bundles sizes, redirects, compression, default locale redirect)
Static files urls (pdfs, images in md files)
Edit paths (docs & md pages)
RTL support
Missing translations defaults to English or the searched key
Storybook support

Preview link

https://deploy-preview-14906--ethereumorg.netlify.app/

netlify · 2025-02-14T14:32:40Z

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	`c16b424`
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/67b5c9b0c9c811000833cef0
😎 Deploy Preview	https://deploy-preview-14906--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 50 (🔴 down 3 from production) Accessibility: 92 (🔴 down 3 from production) Best Practices: 87 (🔴 down 9 from production) SEO: 98 (no change from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

pettinarip · 2025-02-18T13:35:32Z


      return config
    },
-    i18n,


Important change. This is not supported in the app router, removing now and building the pages using getStaticPaths

pettinarip · 2025-02-18T13:36:18Z

-          href={imgSrc}
-          onClick={matomoHandler}
-          target="_blank"
-          locale={false}


Modified the Link component to handle this case.

pettinarip · 2025-02-18T13:47:25Z

Im leaving this for this transition. Should be fixed once we moved to the app router.

For context, the main purpose of this was to remove the query params from the url once the page loads.

pettinarip · 2025-02-18T13:50:04Z

Important change. Adaptation of the Translation component. It changes a bit the API.

pettinarip · 2025-02-18T13:50:45Z

Important change.

pettinarip · 2025-02-18T13:51:41Z

-  if (isInternalPdf) {
-    href = getRelativePath(asPath, href)
+  if (isInternalFile && !href.startsWith("/")) {
+    href = "/" + getRelativePath(pathname, href)


Convert relative paths into absolute paths

pettinarip · 2025-02-18T13:52:35Z

  }

-  if (isInternalPdf) {
+  if (isInternalFile) {


Uses this strat for all files, not just pdfs. This adds support for opening md images and assets in /assets.

pettinarip · 2025-02-18T13:55:31Z

Created this abstraction to add backwards compatibility with the args that we could handle, making the transition easier.

pettinarip · 2025-02-18T13:57:45Z

Loading the namespace is not handled by the i18n library.

This logic tries to mimic what we were doing before:

tries to load the namespace for the locale + the default locale, and merges both to default to english in missing translations

if the namespace doesn't exist, it loads the default one

pettinarip · 2025-02-18T13:58:15Z

Can be ignored. Not important at this point since this is used for app router pages.

pettinarip · 2025-02-18T14:00:20Z

We don't need to handle the default locale scenario.

pettinarip · 2025-02-18T14:01:33Z

 )

-export const getStaticProps = (async ({ locale }) => {
+export async function getStaticPaths() {


All pages now needs to export the expected paths

pettinarip · 2025-02-18T14:01:59Z

+}
+
+export const getStaticProps = (async ({ params }) => {
+  const { locale = DEFAULT_LOCALE } = params || {}


The locale is now passed as a param as its not part of the context anymore.

pettinarip · 2025-02-18T14:04:05Z

+        // Suppress errors by default, enable if needed to debug
+        // console.error(error)


Once we fix all our missing translations, we could enable this and let the build failed. For now, we are suppressing them as we are doing currently.

pettinarip · 2025-02-18T14:04:40Z

+      }}
+      getMessageFallback={({ key }) => {
+        const keyOnly = key.split(".").pop()
+        return keyOnly || key


If a missing translation, output just the key without the namespace.

pettinarip added 10 commits February 12, 2025 14:51

setup next-intl files

133e5ca

move pages one level deeper to handle dynamic [locale] route

abdc67f

create custom abstractions for t, Translation, and load namespaces

b176281

adapt pages for next-intl

6d0030b

migrate hooks and translations

563a65b

change BUILD_LOCALES env var to be public

00dbb0e

fix href for internal pdfs

1e40746

switch locale as recommended

5298969

default tz to server for now

ac72a0e

Merge branch 'dev' into i18n-next-intl

531a9a9

pettinarip added 8 commits February 17, 2025 15:15

Merge branch 'dev' into i18n-next-intl

de5fdd4

fix links for static internal files

1a1ab4b

set getMessageFallback for missing translations

f0d4913

fix infinite loop with router.query

83f808d

integrate next-intl with storybook

3492cfa

set custom displayName for the switch component to fix storybook issue

bcce87b

remove i18next related deps

247e318

Merge branch 'dev' into i18n-next-intl

d1ab379

pettinarip marked this pull request as ready for review February 18, 2025 10:44

pettinarip requested review from corwintines, minimalsm and wackerow as code owners February 18, 2025 10:44

handle pathname and router support in sb

5ce82af

commented out interactive tests based on i18n strings

3c4b0bc

pettinarip changed the title ~~i18n next-intl~~ i18n next-intl Feb 18, 2025

pettinarip commented Feb 18, 2025

View reviewed changes

Comment thread src/components/ui/Link.tsx

Copy link
Copy Markdown

Member Author

pettinarip Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important change.

pettinarip commented Feb 18, 2025

View reviewed changes

Comment thread src/middleware.ts

Copy link
Copy Markdown

Member Author

pettinarip Feb 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to handle the default locale scenario.

pettinarip commented Feb 18, 2025

View reviewed changes

pettinarip added 3 commits February 19, 2025 08:28

align the intl message fallback with previous implementation

7b6c07e

Merge branch 'dev' into i18n-next-intl

b7dfd28

update BUILD_LOCALES var to NEXT_PUBLIC_BUILD_LOCALES

c16b424

corwintines approved these changes Feb 21, 2025

View reviewed changes

pettinarip merged commit 2626732 into dev Feb 21, 2025

pettinarip deleted the i18n-next-intl branch February 21, 2025 15:34

This was referenced Feb 25, 2025

Release candidate v9.6.0 #14975

Merged

Deploy v9.6.0 #14976

Merged

		// Suppress errors by default, enable if needed to debug
		// console.error(error)

Conversation

pettinarip commented Feb 14, 2025 • edited by wackerow Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes for this transition

Things to test

Preview link

Uh oh!

netlify Bot commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ethereumorg ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pettinarip commented Feb 14, 2025 •

edited by wackerow

Loading

netlify Bot commented Feb 14, 2025 •

edited

Loading