i18n `next-intl` #14906

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

next.config.js

@@ -59,7 +61,6 @@ module.exports = (phase, { defaultConfig }) => {

      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

src/components/AssetDownload/index.tsx

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


Modified the Link component to handle this case.

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

src/components/ProductTable/index.tsx

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

src/components/Translation.tsx

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

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

src/components/ui/Link.tsx

Important change.

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

src/components/ui/Link.tsx

-  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

src/components/ui/Link.tsx

@@ -112,15 +113,11 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
    )
  }

-  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

src/hooks/useTranslation.ts

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

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

src/i18n/loadNamespaces.ts

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

src/i18n/request.ts

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

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

src/middleware.ts

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

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

src/pages/[locale]/assets.tsx

@@ -96,7 +98,16 @@ const H3 = (props: ChildOnlyProp) => (
  <h3 className="mb-0 mt-10 leading-xs" {...props} />
 )

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


All pages now needs to export the expected paths

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

src/pages/[locale]/assets.tsx

+}
+
+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

src/pages/_app.tsx

+        // 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

src/pages/_app.tsx

+      }}
+      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 wackerow, corwintines and minimalsm 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

src/components/ui/Link.tsx

Copy link

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

src/i18n/request.ts Outdated

Copy link

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.

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

pettinarip commented Feb 18, 2025

View reviewed changes

src/middleware.ts Outdated

Copy link

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
8 of 10 checks passed

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)

i18n next-intl #14906

i18n next-intl #14906

Uh oh!

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!

Uh oh!

Uh oh!

i18n `next-intl` #14906

i18n `next-intl` #14906

pettinarip commented Feb 14, 2025 •

edited by wackerow

Loading

netlify bot commented Feb 14, 2025 •

edited

Loading