move to canary next for ppr support

2025-07-23 04:36:49 +00:00 · 2023-11-12 16:01:44 +09:00
parent 2a52c4920c
commit 848e841419
14 changed files with 66 additions and 71 deletions
--- a/app/[locale]/favicon.ico
+++ b/app/[locale]/favicon.ico
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -0,0 +1,104 @@
+import { Lato, Noto_Serif_JP } from 'next/font/google';
+import localFont from 'next/font/local';
+import { ReactNode } from 'react';
+
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+import { NextIntlClientProvider } from 'next-intl';
+import { notFound } from 'next/navigation';
+import Analytics from './analytics';
+import './globals.css';
+
+const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';
+
+export const metadata = {
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: SITE_NAME!,
+    template: `%s | ${SITE_NAME}`
+  },
+  robots: {
+    follow: true,
+    index: true
+  },
+  ...(TWITTER_CREATOR &&
+    TWITTER_SITE && {
+      twitter: {
+        card: 'summary_large_image',
+        creator: TWITTER_CREATOR,
+        site: TWITTER_SITE
+      }
+    })
+};
+
+// Font files can be colocated inside of `app`
+const cinzel = localFont({
+  src: '../fonts/Cinzel-Regular.ttf',
+  display: 'swap',
+  variable: '--font-cinzel'
+});
+
+const alpina = localFont({
+  src: [
+    {
+      path: '../fonts/GT-Alpina-Regular-Trial.woff2',
+      weight: '400',
+      style: 'normal'
+    },
+    {
+      path: '../fonts/GT-Alpina-Bold-Trial.woff2',
+      weight: '700',
+      style: 'normal'
+    }
+  ],
+  variable: '--font-alpina'
+});
+
+const lato = Lato({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['300'],
+  variable: '--font-lato'
+});
+
+const noto = Noto_Serif_JP({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['200', '400', '600'],
+  variable: '--font-noto'
+});
+
+export function generateStaticParams() {
+  return [{ locale: 'ja' }, { locale: 'en' }];
+}
+
+export default async function RootLayout({
+  children,
+  params
+}: {
+  children: ReactNode;
+  params: { locale?: SupportedLocale };
+}) {
+  let messages;
+  try {
+    messages = (await import(`../../messages/${params?.locale}.json`)).default;
+  } catch (error) {
+    notFound();
+  }
+
+  return (
+    <html
+      lang={params.locale}
+      className={`${cinzel.variable} ${alpina.variable} ${noto.variable} ${lato.variable}`}
+    >
+      <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
+        <NextIntlClientProvider locale={params?.locale} messages={messages}>
+          <Analytics />
+          <main>{children}</main>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
--- a/app/[locale]/shop-list/page.tsx
+++ b/app/[locale]/shop-list/page.tsx
@@ -8,6 +8,7 @@ import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
 import ShopsNav from './shops-nav';

 export async function generateMetadata({
@@ -51,9 +52,11 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
    <div>
      <Navbar cart={cart} locale={params?.locale} compact showTop promotedItem={promotedItem} />
      <div className="mx-auto max-w-xl px-6 pb-24 pt-12 md:pb-48 md:pt-24">
-        <div className="pb-12">
-          <ShopsNav />
-        </div>
+        <Suspense>
+          <div className="pb-12">
+            <ShopsNav />
+          </div>
+        </Suspense>
        {/* <h2 className="font-multilingual mb-8 text-3xl font-medium">{page.title}</h2> */}
        <Prose html={page.body as string} />
      </div>