Merge pull request #20 from zenzen-sol/sol/next-intl-next

feat: Upgrade next-intl to v3 RC

app/[locale]/about/page.tsx

@@ -4,6 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 import AboutNaraiDetail from './about-narai-detail';
@@ -19,6 +20,10 @@ export const metadata = {
 };
 
 export default async function Page({ params }: { params: { locale?: SupportedLocale } }) {
+  if (!!params?.locale) {
+    unstable_setRequestLocale(params.locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/bar/page.tsx

@@ -4,6 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 import SagyobarDetail from './sagyobar-detail';
@@ -19,6 +20,10 @@ export const metadata = {
 };
 
 export default async function Page({ params }: { params: { locale?: SupportedLocale } }) {
+  if (!!params?.locale) {
+    unstable_setRequestLocale(params.locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/company/page.tsx

@@ -4,6 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 import CompanyDetail from './company-detail';
@@ -19,6 +20,10 @@ export const metadata = {
 };
 
 export default async function Page({ params }: { params: { locale?: SupportedLocale } }) {
+  if (!!params?.locale) {
+    unstable_setRequestLocale(params.locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/concept/page.tsx

@@ -4,6 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 import ConceptDetail from './concept-detail';
@@ -19,6 +20,10 @@ export const metadata = {
 };
 
 export default async function Page({ params }: { params: { locale?: SupportedLocale } }) {
+  if (!!params?.locale) {
+    unstable_setRequestLocale(params.locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/disclosures/page.tsx

@@ -4,6 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 import Disclosures from './disclosures';
@@ -23,6 +24,10 @@ export default async function DisclosuresPage({
 }: {
   params: { locale?: SupportedLocale };
 }) {
+  if (!!locale) {
+    unstable_setRequestLocale(locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/layout.tsx

@@ -4,6 +4,8 @@ import { ReactNode, Suspense } from 'react';
 
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 import { NextIntlClientProvider } from 'next-intl';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
 import Analytics from './analytics';
 import './globals.css';
 
@@ -69,8 +71,10 @@ const noto = Noto_Serif_JP({
   variable: '--font-noto'
 });
 
+const locales = ['en', 'ja'] as const;
+
 export function generateStaticParams() {
-  return [{ locale: 'ja' }, { locale: 'en' }];
+  return locales.map((locale) => ({ locale }));
 }
 
 export default async function RootLayout({
@@ -80,6 +84,14 @@ export default async function RootLayout({
   children: ReactNode;
   params: { locale?: SupportedLocale };
 }) {
+  // Validate that the incoming `locale` parameter is valid
+  const isValidLocale = locales.some((cur: string) => cur === params?.locale);
+  if (!isValidLocale) notFound();
+
+  if (params?.locale) {
+    unstable_setRequestLocale(params.locale);
+  }
+
   const messages = (await import(`../../messages/${params?.locale}.json`)).default;
 
   return (

app/[locale]/page.tsx

@@ -22,6 +22,7 @@ import StoriesPreview from 'components/layout/stories-preview';
 import { BLOG_HANDLE } from 'lib/constants';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import Image from 'next/image';
 import { Suspense } from 'react';
@@ -41,6 +42,10 @@ export default async function HomePage({
 }: {
   params: { locale?: SupportedLocale };
 }) {
+  if (!!locale) {
+    unstable_setRequestLocale(locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/privacy/page.tsx

@@ -4,6 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 import PrivacyPolicy from './privacy-policy';
@@ -23,6 +24,10 @@ export default async function PrivacyPage({
 }: {
   params: { locale?: SupportedLocale };
 }) {
+  if (!!locale) {
+    unstable_setRequestLocale(locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/product/[handle]/page.tsx

@@ -1,5 +1,4 @@
 import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
 
 import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
@@ -14,6 +13,7 @@ import { VariantSelector } from 'components/product/variant-selector';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image as MediaImage, Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Suspense } from 'react';
@@ -28,7 +28,7 @@ export async function generateMetadata({
     language: params?.locale?.toUpperCase()
   });
 
-  if (!product) return notFound();
+  if (!product) return {};
 
   const { url, width, height, altText: alt } = product.featuredImage || {};
   const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
@@ -64,6 +64,10 @@ export default async function ProductPage({
 }: {
   params: { handle: string; locale?: SupportedLocale };
 }) {
+  if (!!params?.locale) {
+    unstable_setRequestLocale(params.locale);
+  }
+
   const numberOfOtherImages = 3;
   const product = await getProduct({
     handle: params.handle,
@@ -77,7 +81,7 @@ export default async function ProductPage({
       .filter((image) => image?.url !== product.featuredImage?.url);
   }
 
-  if (!product) return notFound();
+  if (!product) return {};
 
   const productJsonLd = {
     '@context': 'https://schema.org',

app/[locale]/products/page.tsx

@@ -5,6 +5,7 @@ import { ProductGrid } from 'components/grid/product-grid';
 import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 
@@ -23,6 +24,10 @@ export default async function ProductPage({
 }: {
   params: { locale?: SupportedLocale };
 }) {
+  if (!!locale) {
+    unstable_setRequestLocale(locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/shop-list/page.tsx

@@ -5,9 +5,9 @@ import Navbar from 'components/layout/navbar';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { unstable_noStore } from 'next/cache';
 import { cookies } from 'next/headers';
-import { notFound } from 'next/navigation';
 import { Suspense } from 'react';
 import ShopListDetail from './shop-list-detail';
 import ShopsNav from './shops-nav';
@@ -17,13 +17,13 @@ export async function generateMetadata({
 }: {
   params: { locale?: SupportedLocale };
 }): Promise<Metadata> {
-  unstable_noStore(); // opt out before we even get to the try/catch
+  unstable_noStore(); // opt out from partial prerendering
   const page = await getPage({
     handle: 'shop-list',
     language: params?.locale?.toUpperCase() || 'JA'
   });
 
-  if (!page) return notFound();
+  if (!page) return {};
 
   return {
     title: page.seo?.title || page.title,
@@ -37,6 +37,10 @@ export async function generateMetadata({
 }
 
 export default async function Page({ params }: { params: { locale?: SupportedLocale } }) {
+  if (!!params?.locale) {
+    unstable_setRequestLocale(params.locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

app/[locale]/shop-list/shop-list-detail.tsx

@@ -7,7 +7,7 @@ import { notFound } from 'next/navigation';
 export default async function ShopListDetail({ language }: { language?: string }) {
   const page = await getPage({ handle: 'shop-list', language });
 
-  if (!page) return notFound();
+  if (!page) notFound();
 
   return <Prose html={page.body as string} />;
 }

app/[locale]/stories/[handle]/page.tsx

@@ -6,6 +6,7 @@ import Prose from 'components/prose';
 import { BLOG_HANDLE, HIDDEN_ARTICLE_TAG } from 'lib/constants';
 import { getBlogArticle } from 'lib/shopify';
 import { BlogArticle } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
 
 export async function generateMetadata({
@@ -19,7 +20,7 @@ export async function generateMetadata({
     language: params?.locale?.toUpperCase()
   });
 
-  if (!article) return notFound();
+  if (!article) return {};
 
   const { url, width, height, altText: alt } = article.image || {};
   const indexable = !article?.tags?.includes(HIDDEN_ARTICLE_TAG);
@@ -55,13 +56,17 @@ export default async function BlogArticlePage({
 }: {
   params: { handle: string; locale?: SupportedLocale };
 }) {
+  if (!!params?.locale) {
+    unstable_setRequestLocale(params.locale);
+  }
+
   const article: BlogArticle | undefined = await getBlogArticle({
     handle: BLOG_HANDLE,
     articleHandle: params.handle,
     language: params?.locale?.toUpperCase()
   });
 
-  if (!article) return notFound();
+  if (!article) notFound();
 
   return (
     <>

app/[locale]/terms/page.tsx

@@ -4,6 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
+import { unstable_setRequestLocale } from 'next-intl/server';
 import { cookies } from 'next/headers';
 import { Suspense } from 'react';
 import TermsOfUse from './terms-of-use';
@@ -23,6 +24,10 @@ export default async function TermsPage({
 }: {
   params: { locale?: SupportedLocale };
 }) {
+  if (!!locale) {
+    unstable_setRequestLocale(locale);
+  }
+
   const cartId = cookies().get('cartId')?.value;
   let cart;
 

components/layout/navbar/language-control.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import clsx from 'clsx';
-import Link from 'next-intl/link';
+import { createSharedPathnamesNavigation } from 'next-intl/navigation';
-import { usePathname } from 'next/navigation';
 
 export type SupportedLocale = 'en' | 'ja';
 
+const locales = ['en', 'ja'] as const;
+
 function removeItem<T>(arr: Array<T>, value: T): Array<T> {
   const index = arr.indexOf(value);
   if (index > -1) {
@@ -15,6 +16,7 @@ function removeItem<T>(arr: Array<T>, value: T): Array<T> {
 }
 
 export const LanguageControl = ({ lang }: { lang?: SupportedLocale }) => {
+  const { Link, usePathname } = createSharedPathnamesNavigation({ locales });
   const pathName = usePathname();
 
   const basePathName = () => {

i18n.ts

@@ -0,0 +1,5 @@
+import { getRequestConfig } from 'next-intl/server';
+
+export default getRequestConfig(async ({ locale }) => ({
+  messages: (await import(`./messages/${locale}.json`)).default
+}));

next.config.js

@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
-module.exports = {
+
+const withNextIntl = require('next-intl/plugin')('./i18n.ts');
+
+module.exports = withNextIntl({
   eslint: {
     // Disabling on production builds because we're running checks on PRs via GitHub Actions.
     ignoreDuringBuilds: true
@@ -26,4 +29,4 @@ module.exports = {
       }
     ];
   }
-};
+});

package.json

@@ -35,7 +35,7 @@
     "negotiator": "^0.6.3",
     "next": "canary",
     "next-gtm": "latest",
-    "next-intl": "latest",
+    "next-intl": "next",
     "prettier-plugin-organize-imports": "^3.2.3",
     "react": "canary",
     "react-dom": "canary",

yarn.lock

@@ -1382,7 +1382,7 @@ __metadata:
     negotiator: ^0.6.3
     next: canary
     next-gtm: latest
-    next-intl: latest
+    next-intl: next
     postcss: ^8.4.27
     prettier: 3.0.1
     prettier-plugin-organize-imports: ^3.2.3
@@ -3683,17 +3683,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-intl@npm:latest":
+"next-intl@npm:next":
-  version: 2.19.1
+  version: 3.0.0-rc.10
-  resolution: "next-intl@npm:2.19.1"
+  resolution: "next-intl@npm:3.0.0-rc.10"
   dependencies:
     "@formatjs/intl-localematcher": ^0.2.32
     negotiator: ^0.6.3
-    use-intl: ^2.19.1
+    use-intl: 3.0.0-rc.6
   peerDependencies:
-    next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
+    next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: b4c3cfbb22645b75fcb549259d18484f3df284a8240054f269f7403bc083fc57e53dc555abd4e29ba68fcd56c52fdb0a54d5021791597441519150d0054e9665
+  checksum: 8b54c0c6d8086da133e4a2264b6ec85910da1f814183a50e75899cce8caa08858ffc81267bb2190a4f50089681acfa8780b7e1812726d248d050c75d2df74091
   languageName: node
   linkType: hard
 
@@ -5665,15 +5665,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-intl@npm:^2.19.1":
+"use-intl@npm:3.0.0-rc.6":
-  version: 2.19.1
+  version: 3.0.0-rc.6
-  resolution: "use-intl@npm:2.19.1"
+  resolution: "use-intl@npm:3.0.0-rc.6"
   dependencies:
     "@formatjs/ecma402-abstract": ^1.11.4
     intl-messageformat: ^9.3.18
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 9c249791a4cb4213de6426d5542cc44685eb4a714c44f3761dc7713b48fc505d02e5ee5047f9ef31aec3a9e869fff838b96a6d1363f5ead583e6b6da0a96d142
+  checksum: b81452e79543fa487ff001c1e45f593e77336e78ac6ad0d4372283cfac36f22030f5ac53f5a09c81fd061a91a0d0f279276329ef0444c0717f07f8b0a224bcee
   languageName: node
   linkType: hard