feat: ✨ configure i18n with next-international

enable rewrite strategy to default language, move pages under /[locale], configure middleware and client/server utils
3 weeks ago · a02c53a99d
parent e424ae8d0d
commit a02c53a99d
29 changed files with 268 additions and 89 deletions
--- a/next.config.mjs
+++ b/next.config.mjs
@ -1,8 +1,8 @@
-import { withPayload } from '@payloadcms/next/withPayload'
+import { withPayload } from "@payloadcms/next/withPayload";

 /** @type {import('next').NextConfig} */
 const nextConfig = {
  // Your Next.js config here
-}
+};

-export default withPayload(nextConfig)
+export default withPayload(nextConfig);
--- a/package.json
+++ b/package.json
@ -29,6 +29,7 @@
    "localbites": "file:",
    "lucide-react": "^0.436.0",
    "next": "15.0.0-canary.104",
+    "next-international": "^1.2.4",
    "payload": "beta",
    "react": "19.0.0-rc-06d0b89e-20240801",
    "react-dom": "19.0.0-rc-06d0b89e-20240801",
--- a/src/api/about.ts
+++ b/src/api/about.ts
@ -0,0 +1,6 @@
+import { getPayload } from "@/utils/payload";
+
+export const getAbout = async () => {
+  const payload = await getPayload();
+  return await payload.findGlobal({ slug: "about" });
+};
--- a/src/api/contact.ts
+++ b/src/api/contact.ts
@ -0,0 +1,6 @@
+import { getPayload } from "@/utils/payload";
+
+export const getContact = async () => {
+  const payload = await getPayload();
+  return await payload.findGlobal({ slug: "contact" });
+};
--- a/src/api/gallery.ts
+++ b/src/api/gallery.ts
@ -0,0 +1,6 @@
+import { getPayload } from "@/utils/payload";
+
+export const getGallery = async () => {
+  const payload = await getPayload();
+  return await payload.findGlobal({ slug: "gallery" });
+};
--- a/src/api/home.ts
+++ b/src/api/home.ts
@ -0,0 +1,6 @@
+import { getPayload } from "@/utils/payload";
+
+export const getHome = async () => {
+  const payload = await getPayload();
+  return await payload.findGlobal({ slug: "home" });
+};
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -0,0 +1,4 @@
+export * from "./about";
+export * from "./contact";
+export * from "./gallery";
+export * from "./home";
--- a/src/app/(frontend)/[locale]/Moderustic-VariableFont_wght.ttf
+++ b/src/app/(frontend)/[locale]/Moderustic-VariableFont_wght.ttf
--- a/src/app/(frontend)/[locale]/about/page.tsx
+++ b/src/app/(frontend)/[locale]/about/page.tsx
@ -0,0 +1,24 @@
+import { Box, styled } from "@styled-system/jsx";
+
+import { Metadata } from "next";
+import RichText from "@/components/rich-text";
+import { getAbout } from "@/api";
+
+export default async function About() {
+  const about = await getAbout();
+
+  return (
+    <Box>
+      <styled.h1></styled.h1>
+      <RichText content={about.text!} />
+    </Box>
+  );
+}
+
+export async function generateMetadata(): Promise<Metadata> {
+  const about = await getAbout();
+
+  return {
+    title: about.name,
+  };
+}
--- a/src/app/(frontend)/[locale]/contact/page.tsx
+++ b/src/app/(frontend)/[locale]/contact/page.tsx
--- a/src/app/(frontend)/[locale]/gallery.tsx
+++ b/src/app/(frontend)/[locale]/gallery.tsx
@ -1,10 +1,9 @@
 import Carousel from "@/components/ui/carousel";
 import { Media } from "@/payload-types";
-import { getPayload } from "@/utils/payload";
+import { getGallery } from "@/api";

 export default async function Gallery() {
-  const payload = await getPayload();
-  const { images } = await payload.findGlobal({ slug: "gallery" });
+  const { images } = await getGallery();

  return <Carousel images={images.map(({ image }) => image as Media)} w="100%" />;
 }
--- a/src/app/(frontend)/[locale]/layout.tsx
+++ b/src/app/(frontend)/[locale]/layout.tsx
@ -0,0 +1,47 @@
+import "../../globals.css";
+
+import Footer from "@/components/layout/footer";
+import { I18nProviderClient } from "@/i18n/client";
+import { Metadata } from "next";
+import Navbar from "@/components/layout/navbar";
+import { getAbout } from "@/api";
+import localFont from "next/font/local";
+import { locales } from "@/i18n/settings";
+import { styled } from "@styled-system/jsx";
+
+const moderustic = localFont({
+  src: "./Moderustic-VariableFont_wght.ttf",
+  display: "swap",
+});
+
+export default async function RootLayout({
+  params: { locale },
+  children,
+}: {
+  params: { locale: string };
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang={locale}>
+      <styled.body className={moderustic.className}>
+        <Navbar />
+        <styled.main mt={20} pb={20}>
+          <I18nProviderClient locale={locale}>{children}</I18nProviderClient>{" "}
+        </styled.main>
+        <Footer />
+      </styled.body>
+    </html>
+  );
+}
+
+export async function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata(): Promise<Metadata> {
+  const about = await getAbout();
+
+  return {
+    title: about.name,
+  };
+}
--- a/src/app/(frontend)/[locale]/menu/page.tsx
+++ b/src/app/(frontend)/[locale]/menu/page.tsx
--- a/src/app/(frontend)/[locale]/page.tsx
+++ b/src/app/(frontend)/[locale]/page.tsx
@ -1,4 +1,5 @@
 import { Box, Container, Stack } from "@styled-system/jsx";
+import { getAbout, getHome } from "@/api";

 import Gallery from "./gallery";
 import Image from "next/image";
@ -6,13 +7,11 @@ import { Media } from "@/payload-types";
 import { Metadata } from "next";
 import RichText from "@/components/rich-text";
 import { css } from "@styled-system/css";
-import { getPayload } from "@/utils/payload";
 import { styled } from "@styled-system/jsx";

 export default async function Home() {
-  const payload = await getPayload();
-  const home = await payload.findGlobal({ slug: "home" });
-  const about = await payload.findGlobal({ slug: "about" });
+  const home = await getHome();
+  const about = await getAbout();

  return (
    <Stack gap={10} align="center">
@ -43,12 +42,3 @@ export default async function Home() {
    </Stack>
  );
 }
-
-export async function generateMetadata(): Promise<Metadata> {
-  const payload = await getPayload();
-  const about = await payload.findGlobal({ slug: "about" });
-
-  return {
-    title: about.name,
-  };
-}
--- a/src/app/(frontend)/about/page.tsx
+++ b/src/app/(frontend)/about/page.tsx
@ -1 +0,0 @@
-export default async function About() {}
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@ -1,29 +0,0 @@
-import "../globals.css";
-
-import Footer from "@/components/layout/footer";
-import Navbar from "@/components/layout/navbar";
-import localFont from "next/font/local";
-import { styled } from "@styled-system/jsx";
-
-const moderustic = localFont({
-  src: "./Moderustic-VariableFont_wght.ttf",
-  display: "swap",
-});
-export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <styled.body className={moderustic.className}>
-        <Navbar />
-        <styled.main mt={20} pb={20}>
-          {children}
-        </styled.main>
-        <Footer />
-      </styled.body>
-    </html>
-  );
-}
--- a/src/app/(payload)/admin/custom.scss
+++ b/src/app/(payload)/admin/custom.scss
--- a/src/app/(payload)/admin/layout.tsx
+++ b/src/app/(payload)/admin/layout.tsx
@ -1,12 +1,12 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import configPromise from "@payload-config";
 import "@payloadcms/next/css";
-import { RootLayout } from "@payloadcms/next/layouts";
+import "./custom.scss";
+
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from "react";
-
-import "./custom.scss";
-import { importMap } from "./admin/importMap";
+import { RootLayout } from "@payloadcms/next/layouts";
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from "@payload-config";
+import { importMap } from "./importMap";

 type Args = {
  children: React.ReactNode;
--- a/src/app/my-route/route.ts
+++ b/src/app/my-route/route.ts
@ -1,14 +0,0 @@
-import configPromise from "@payload-config";
-import { getPayload } from "payload";
-
-export const GET = async () => {
-  const payload = await getPayload({
-    config: configPromise,
-  });
-
-  const data = await payload.find({
-    collection: "users",
-  });
-
-  return Response.json(data);
-};
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@ -1,17 +1,16 @@
 import { Box, HStack, Stack, styled } from "@styled-system/jsx";
+import { getAbout, getContact } from "@/api";

 import { IconButton } from "@/components/ui/icon-button";
 import { SiFacebook } from "@icons-pack/react-simple-icons";
-import { getPayload } from "@/utils/payload";
 import { stack } from "@styled-system/patterns";

 export default async function Footer() {
-  const payload = await getPayload();
-  const about = await payload.findGlobal({ slug: "about" });
-  const contact = await payload.findGlobal({ slug: "contact" });
+  const about = await getAbout();
+  const contact = await getContact();

  return (
-    <styled.footer h={60} p={8} className={stack({ gap: 4 })}>
+    <styled.footer h={60} p={8} className={stack({ gap: 4, justify: "end" })}>
      <HStack justify="space-between" alignItems="start">
        <Box>
          <styled.p fontWeight="bold">{about.name}</styled.p>
--- a/src/components/layout/navbar.tsx
+++ b/src/components/layout/navbar.tsx
@ -5,12 +5,13 @@ import MobileNav from "./mobile-nav";
 import NavLink from "./nav-link";
 import { css } from "@styled-system/css";
 import { flex } from "@styled-system/patterns";
-import { getPayload } from "@/utils/payload";
+import { getAbout } from "@/api";
+import { getI18n } from "@/i18n/server";
 import { styled } from "@styled-system/jsx";

 export default async function Navbar() {
-  const payload = await getPayload();
-  const about = await payload.findGlobal({ slug: "about" });
+  const t = await getI18n();
+  const about = await getAbout();

  return (
    <styled.nav
@ -44,10 +45,10 @@ export default async function Navbar() {
      <styled.div flexGrow={1} />

      <NavLink href="/about" className={css({ display: "none", sm: { display: "block" } })}>
-        Über uns
+        {t("general.about")}
      </NavLink>
      <NavLink href="/menu" className={css({ display: "none", sm: { display: "block" } })}>
-        Menü
+        {t("general.menu")}
      </NavLink>

      <NavLink
@ -55,7 +56,7 @@ export default async function Navbar() {
        type="button"
        className={css({ display: "none", sm: { display: "block" } })}
      >
-        Kontakt
+        {t("general.contact")}
      </NavLink>

      <MobileNav />
--- a/src/i18n/client.ts
+++ b/src/i18n/client.ts
@ -0,0 +1,8 @@
+"use client";
+
+import { createI18nClient } from "next-international/client";
+
+export const { useI18n, useScopedI18n, I18nProviderClient } = createI18nClient({
+  de: () => import("./de"),
+  en: () => import("./en"),
+});
--- a/src/i18n/de.ts
+++ b/src/i18n/de.ts
@ -0,0 +1,7 @@
+export default {
+  general: {
+    about: "Über uns",
+    menu: "Menü",
+    contact: "Kontakt",
+  },
+} as const;
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@ -0,0 +1,7 @@
+export default {
+  general: {
+    about: "About",
+    menu: "Menu",
+    contact: "Contact",
+  },
+} as const;
--- a/src/i18n/server.ts
+++ b/src/i18n/server.ts
@ -0,0 +1,6 @@
+import { createI18nServer } from "next-international/server";
+
+export const { getI18n, getScopedI18n, getStaticParams } = createI18nServer({
+  de: () => import("./de"),
+  en: () => import("./en"),
+});
--- a/src/i18n/settings.ts
+++ b/src/i18n/settings.ts
@ -0,0 +1,2 @@
+export const defaultLocale = "de" as const;
+export const locales = [defaultLocale, "en"] as const;
--- a/src/middleware.ts
+++ b/src/middleware.ts
@ -0,0 +1,18 @@
+import { defaultLocale, locales } from "@/i18n/settings";
+
+import { NextRequest } from "next/server";
+import { createI18nMiddleware } from "next-international/middleware";
+
+const I18nMiddleware = createI18nMiddleware({
+  locales,
+  defaultLocale,
+  urlMappingStrategy: "rewriteDefault",
+});
+
+export function middleware(request: NextRequest) {
+  return I18nMiddleware(request);
+}
+
+export const config = {
+  matcher: ["/((?!api|admin|static|.*\\..*|_next|favicon.ico|robots.txt).*)"],
+};
--- a/src/payload.config.ts
+++ b/src/payload.config.ts
@ -47,13 +47,7 @@ export default buildConfig({
    Vacation,
    Holiday,
  ],
-  globals: [
-    Home,
-    Gallery,
-    About,
-    Contact,
-    Menu,
-  ],
+  globals: [Home, Gallery, About, Contact, Menu],
  editor: lexicalEditor(),
  secret: process.env.PAYLOAD_SECRET || "",
  typescript: {
--- a/yarn.lock
+++ b/yarn.lock
@ -1402,6 +1402,45 @@
  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz"
  integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==

+"@formatjs/ecma402-abstract@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz#39197ab90b1c78b7342b129a56a7acdb8f512e17"
+  integrity sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.5.4"
+    tslib "^2.4.0"
+
+"@formatjs/fast-memoize@2.2.0", "@formatjs/fast-memoize@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz#33bd616d2e486c3e8ef4e68c99648c196887802b"
+  integrity sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==
+  dependencies:
+    tslib "^2.4.0"
+
+"@formatjs/icu-messageformat-parser@2.7.8":
+  version "2.7.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz#f6d7643001e9bb5930d812f1f9a9856f30fa0343"
+  integrity sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.0.0"
+    "@formatjs/icu-skeleton-parser" "1.8.2"
+    tslib "^2.4.0"
+
+"@formatjs/icu-skeleton-parser@1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz#2252c949ae84ee66930e726130ea66731a123c9f"
+  integrity sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.0.0"
+    tslib "^2.4.0"
+
+"@formatjs/intl-localematcher@0.5.4", "@formatjs/intl-localematcher@^0.5.4":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz#caa71f2e40d93e37d58be35cfffe57865f2b366f"
+  integrity sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==
+  dependencies:
+    tslib "^2.4.0"
+
 "@humanwhocodes/config-array@^0.11.14":
  version "0.11.14"
  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz"
@ -4857,7 +4896,7 @@ cli-color@^2.0.2:
    memoizee "^0.4.15"
    timers-ext "^0.1.7"

-client-only@0.0.1:
+client-only@0.0.1, client-only@^0.0.1:
  version "0.0.1"
  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@ -6347,6 +6386,21 @@ internal-slot@^1.0.4, internal-slot@^1.0.7:
    hasown "^2.0.0"
    side-channel "^1.0.4"

+international-types@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/international-types/-/international-types-0.8.1.tgz#c0e593d9911c1a23f64bbd6eb1abb2941fe2353f"
+  integrity sha512-tajBCAHo4I0LIFlmQ9ZWfjMWVyRffzuvfbXCd6ssFt5u1Zw15DN0UBpVTItXdNa1ls+cpQt3Yw8+TxsfGF8JcA==
+
+intl-messageformat@^10.5.14:
+  version "10.5.14"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.5.14.tgz#e5bb373f8a37b88fbe647d7b941f3ab2a37ed00a"
+  integrity sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.0.0"
+    "@formatjs/fast-memoize" "2.2.0"
+    "@formatjs/icu-messageformat-parser" "2.7.8"
+    tslib "^2.4.0"
+
 ip-address@^9.0.5:
  version "9.0.5"
  resolved "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz"
@ -6914,6 +6968,7 @@ lines-and-columns@^1.1.6:
  version "1.0.0"
  dependencies:
    "@ark-ui/react" "^3.9.0"
+    "@icons-pack/react-simple-icons" "^10.0.0"
    "@payloadcms/db-mongodb" beta
    "@payloadcms/next" beta
    "@payloadcms/plugin-cloud" beta
@ -6921,9 +6976,10 @@ lines-and-columns@^1.1.6:
    "@payloadcms/translations" beta
    cross-env "^7.0.3"
    graphql "^16.8.1"
-    localbites "file:../../../AppData/Local/Yarn/Cache/v6/npm-localbites-1.0.0-fb528dd6-b1cf-42f8-b6fa-cc8c7e28e296-1724662317868/node_modules/localbites"
+    localbites "file:../../../AppData/Local/Yarn/Cache/v6/npm-localbites-1.0.0-e1440f51-13fa-4ff1-949c-87ecfbcb69c6-1724677077929/node_modules/localbites"
    lucide-react "^0.436.0"
    next "15.0.0-canary.104"
+    next-international "^1.2.4"
    payload beta
    react "19.0.0-rc-06d0b89e-20240801"
    react-dom "19.0.0-rc-06d0b89e-20240801"
@ -7219,6 +7275,29 @@ natural-compare@^1.4.0:
  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==

+negotiator@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
+
+next-international@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/next-international/-/next-international-1.2.4.tgz#abe50b2aa3ba7ecf92d41f87537796a4b2dd0ba3"
+  integrity sha512-JQvp+h2iSgA/t8hu5S/Lwow1ZErJutQRdpnplxjv4VTlCiND8T95fYih8BjkHcVhQbtM+Wu9Mb1CM32wD9hlWQ==
+  dependencies:
+    client-only "^0.0.1"
+    international-types "^0.8.1"
+    server-only "^0.0.1"
+
+next-intl@^3.17.6:
+  version "3.17.6"
+  resolved "https://registry.yarnpkg.com/next-intl/-/next-intl-3.17.6.tgz#859ab4c406c7f421400174f2e42889e4726e3838"
+  integrity sha512-giPh2Us/C7B5P/60qdfHZMj9YPg5yXp6c9msFxv6Ua4zJt1IueNrKivInowN8FAwwSqEyC7TNYXBkXuG6oToTQ==
+  dependencies:
+    "@formatjs/intl-localematcher" "^0.5.4"
+    negotiator "^0.6.3"
+    use-intl "^3.17.6"
+
 next-tick@^1.1.0:
  version "1.1.0"
  resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz"
@ -8208,6 +8287,11 @@ semver@^7.3.5, semver@^7.3.8, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semve
  resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==

+server-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e"
+  integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
+
 set-function-length@^1.2.1:
  version "1.2.2"
  resolved "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz"
@ -8951,6 +9035,14 @@ use-context-selector@2.0.0:
  resolved "https://registry.npmjs.org/use-context-selector/-/use-context-selector-2.0.0.tgz"
  integrity sha512-owfuSmUNd3eNp3J9CdDl0kMgfidV+MkDvHPpvthN5ThqM+ibMccNE0k+Iq7TWC6JPFvGZqanqiGCuQx6DyV24g==

+use-intl@^3.17.6:
+  version "3.17.6"
+  resolved "https://registry.yarnpkg.com/use-intl/-/use-intl-3.17.6.tgz#88bc01ae8139315a1c7883b91c1160f4a53b1824"
+  integrity sha512-07wyVHSFSfI6M6TjhX/buZUFXnFymSz5LCimIMutTnBY11Vc/ym18j3HpZoQoWH+JYRKCCa4Jfm7NNyVKmgVww==
+  dependencies:
+    "@formatjs/fast-memoize" "^2.2.0"
+    intl-messageformat "^10.5.14"
+
 use-isomorphic-layout-effect@^1.1.2:
  version "1.1.2"
  resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz"