Merge pull request ethereum#12134 from ethereum/default-local-prefix

Default locale prefix in url

next-i18next.config.js

@@ -9,9 +9,12 @@ const locales = BUILD_LOCALES
 /** @type {import('next-i18next').UserConfig} */
 module.exports = {
   i18n: {
-    defaultLocale: "en",
+    // "default" locale is a hack to always display the locale prefix in the
+    // url. Ref: https://nextjs.org/docs/pages/building-your-application/routing/internationalization#prefixing-the-default-locale
+    defaultLocale: "default",
     // supported locales defined in `i18n.config.json`
-    locales,
+    locales: ["default", ...locales],
+    localeDetection: false,
   },
   // define custom location for intl files, otherwise default to public/locales (https://github.com/i18next/next-i18next#2-translation-content)
   localePath: "./src/intl",

next.config.js

@@ -34,6 +34,7 @@ module.exports = (phase, { defaultConfig }) => {
       return config
     },
     i18n,
+    trailingSlash: true,
     images: {
       deviceSizes: [640, 750, 828, 1080, 1200, 1504, 1920],
     },

public/_redirects

@@ -1,5 +1,3 @@
-/en/ / 301!
-
 /discord https://discord.gg/ethereum-org 301!
 
 /*/discord https://discord.gg/ethereum-org 301!
@@ -175,5 +173,3 @@
 /*/staking/withdraws /:splat/staking/withdrawals/ 301!
 
 /*/guides/how-to-register-an-ethereum-account /:splat/guides/how-to-create-an-ethereum-account/ 301!
-
-/en/stablecoins /stablecoins 301!

src/components/Breadcrumbs/index.tsx

@@ -36,17 +36,12 @@ type Crumb = {
 //   { fullPath: "/en/eth2/", text: "ETH2" },
 //   { fullPath: "/en/eth2/proof-of-stake/", text: "PROOF OF STAKE" },
 // ]
-const Breadcrumbs = ({
-  slug: originalSlug,
-  startDepth = 0,
-  ...props
-}: BreadcrumbsProps) => {
+const Breadcrumbs = ({ slug, startDepth = 0, ...props }: BreadcrumbsProps) => {
   const { t } = useTranslation("common")
   const { locale, asPath } = useRouter()
   const dir = isLangRightToLeft(locale! as Lang) ? "rtl" : "ltr"
 
   const hasHome = asPath !== "/"
-  const slug = originalSlug.replace(`/${locale}/`, "/")
   const slugChunk = slug.split("/")
   const sliced = slugChunk.filter((item) => !!item)
 

src/components/FeedbackWidget.tsx

@@ -91,7 +91,7 @@ const FeedbackWidget = () => {
   const surveyUrl = useSurvey(feedbackSubmitted)
 
   const bottomOffset = useMemo(() => {
-    const pathsWithBottomNav = ["/staking", "/dao", "/defi", "/nft"]
+    const pathsWithBottomNav = ["/staking/", "/dao/", "/defi/", "/nft/"]
     const CONDITIONAL_OFFSET = 6.75
     let offset = 0
     pathsWithBottomNav.forEach((path) => {

src/components/LanguagePicker/useLanguagePicker.tsx

@@ -11,7 +11,7 @@ import type {
 } from "@/lib/types"
 
 import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
-import { languages } from "@/lib/utils/translations"
+import { filterRealLocales, languages } from "@/lib/utils/translations"
 
 import progressDataJson from "@/data/translationProgress.json"
 
@@ -24,7 +24,7 @@ export const useLanguagePicker = (
   menuState?: UseDisclosureReturn
 ) => {
   const { t } = useTranslation("page-languages")
-  const { locale, locales } = useRouter()
+  const { locale, locales: rawLocales } = useRouter()
   const refs = {
     inputRef: useRef<HTMLInputElement>(null),
     firstItemRef: useRef<HTMLAnchorElement>(null),
@@ -37,6 +37,8 @@ export const useLanguagePicker = (
 
   // perform all the filtering and mapping when the filter value change
   useEffect(() => {
+    const locales = filterRealLocales(rawLocales)
+
     // Get the preferred languages for the users browser
     const navLangs = typeof navigator !== "undefined" ? navigator.languages : []
 
@@ -149,7 +151,7 @@ export const useLanguagePicker = (
             .includes(filterValue.toLowerCase())
       )
     )
-  }, [filterValue, locale, locales, t])
+  }, [filterValue, locale, rawLocales, t])
 
   const { isOpen, ...menu } = useDisclosure()
 

src/components/PageMetadata.tsx

@@ -44,17 +44,8 @@ const PageMetadata = ({
   const path = asPath.replace(/[\?\#].*/, "")
   const slug = path.split("/")
 
-  /**
-   * Set canonical URL w/ language path to avoid duplicate content
-   * If English, remove language path
-   * Remove trailing slash
-   * @example ethereum.org/about/ -> ethereum.org/about
-   * @example ethereum.org/pt-br/web3/ -> ethereum.org/pt-br/web3
-   */
-  const url = new URL(
-    join(locale === DEFAULT_LOCALE ? "" : locale!, path),
-    SITE_URL
-  ).href.replace(/\/$/, "")
+  // Set canonical URL w/ language path to avoid duplicate content
+  const url = new URL(join(locale!, path), SITE_URL).href
   const canonical = canonicalUrl || url
 
   /* Set fallback ogImage based on path */