Iterated with translations

app/[locale]/[[...slug]]/page.tsx

@@ -0,0 +1,15 @@
+'use client';
+ 
+import LocaleSwitcher from 'components/ui/locale-switcher';
+import { useTranslations } from 'next-intl';
+ 
+export default function Index() {
+  const t = useTranslations('Index');
+  
+  return (
+    <div>
+      <h1>{t('title')}</h1>
+      <LocaleSwitcher />
+    </div>
+  )
+}

app/[locale]/api/cart/route.ts

@@ -0,0 +1,75 @@
+import { cookies } from 'next/headers';
+import { NextRequest, NextResponse } from 'next/server';
+
+import { addToCart, removeFromCart, updateCart } from 'lib/shopify';
+import { isShopifyError } from 'lib/type-guards';
+
+function formatErrorMessage(err: Error): string {
+  return JSON.stringify(err, Object.getOwnPropertyNames(err));
+}
+
+export async function POST(req: NextRequest): Promise<Response> {
+  const cartId = cookies().get('cartId')?.value;
+  const { merchandiseId } = await req.json();
+
+  if (!cartId?.length || !merchandiseId?.length) {
+    return NextResponse.json({ error: 'Missing cartId or variantId' }, { status: 400 });
+  }
+  try {
+    await addToCart(cartId, [{ merchandiseId, quantity: 1 }]);
+    return NextResponse.json({ status: 204 });
+  } catch (e) {
+    if (isShopifyError(e)) {
+      return NextResponse.json({ message: formatErrorMessage(e.message) }, { status: e.status });
+    }
+
+    return NextResponse.json({ status: 500 });
+  }
+}
+
+export async function PUT(req: NextRequest): Promise<Response> {
+  const cartId = cookies().get('cartId')?.value;
+  const { variantId, quantity, lineId } = await req.json();
+
+  if (!cartId || !variantId || !quantity || !lineId) {
+    return NextResponse.json(
+      { error: 'Missing cartId, variantId, lineId, or quantity' },
+      { status: 400 }
+    );
+  }
+  try {
+    await updateCart(cartId, [
+      {
+        id: lineId,
+        merchandiseId: variantId,
+        quantity
+      }
+    ]);
+    return NextResponse.json({ status: 204 });
+  } catch (e) {
+    if (isShopifyError(e)) {
+      return NextResponse.json({ message: formatErrorMessage(e.message) }, { status: e.status });
+    }
+
+    return NextResponse.json({ status: 500 });
+  }
+}
+
+export async function DELETE(req: NextRequest): Promise<Response> {
+  const cartId = cookies().get('cartId')?.value;
+  const { lineId } = await req.json();
+
+  if (!cartId || !lineId) {
+    return NextResponse.json({ error: 'Missing cartId or lineId' }, { status: 400 });
+  }
+  try {
+    await removeFromCart(cartId, [lineId]);
+    return NextResponse.json({ status: 204 });
+  } catch (e) {
+    if (isShopifyError(e)) {
+      return NextResponse.json({ message: formatErrorMessage(e.message) }, { status: e.status });
+    }
+
+    return NextResponse.json({ status: 500 });
+  }
+}

app/[locale]/api/og/route.tsx

@@ -0,0 +1,67 @@
+import { ImageResponse } from '@vercel/og';
+import { NextRequest } from 'next/server';
+
+export const runtime = 'edge';
+
+const interRegular = fetch(new URL('./Inter-Regular.ttf', import.meta.url)).then((res) =>
+  res.arrayBuffer()
+);
+
+const interBold = fetch(new URL('./Inter-Bold.ttf', import.meta.url)).then((res) =>
+  res.arrayBuffer()
+);
+
+export async function GET(req: NextRequest): Promise<Response | ImageResponse> {
+  try {
+    const [regularFont, boldFont] = await Promise.all([interRegular, interBold]);
+
+    const { searchParams } = new URL(req.url);
+
+    const title = searchParams.has('title')
+      ? searchParams.get('title')?.slice(0, 100)
+      : process.env.SITE_NAME;
+
+    return new ImageResponse(
+      (
+        <div tw="flex h-full w-full flex-col items-center justify-center bg-black">
+          <svg viewBox="0 0 32 32" width="140">
+            <rect width="100%" height="100%" rx="16" fill="white" />
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              fill="black"
+              d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+            />
+          </svg>
+
+          <div tw="mt-12 text-6xl text-white font-bold">{title}</div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: 'Inter',
+            data: regularFont,
+            style: 'normal',
+            weight: 400
+          },
+          {
+            name: 'Inter',
+            data: boldFont,
+            style: 'normal',
+            weight: 700
+          }
+        ]
+      }
+    );
+  } catch (e) {
+    if (!(e instanceof Error)) throw e;
+
+    console.log(e.message);
+    return new Response(`Failed to generate the image`, {
+      status: 500
+    });
+  }
+}

app/[locale]/error.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+export default function Error({ reset }: { reset: () => void }) {
+  return (
+    <div>
+      <h2>Something went wrong.</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  );
+}

app/[locale]/globals.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@supports (font: -apple-system-body) and (-webkit-appearance: none) {
+  img[loading='lazy'] {
+    clip-path: inset(0.6px);
+  }
+}

app/[locale]/layout.tsx

@@ -0,0 +1,68 @@
+import Footer from 'components/layout/footer';
+import Header from 'components/layout/header';
+import { NextIntlClientProvider } from 'next-intl';
+import { Inter } from 'next/font/google';
+import { notFound } from 'next/navigation';
+import { ReactNode } from 'react';
+import './globals.css';
+
+const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
+
+export const metadata = {
+  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
+      }
+    })
+};
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter'
+});
+ 
+export function generateStaticParams() {
+  return [{locale: 'sv'}, {locale: 'en'}, {locale: 'nn'}];
+}
+
+interface LocaleLayoutProps {
+  children: ReactNode
+  params: {
+    locale: string
+  }
+}
+ 
+export default async function LocaleLayout({children, params: {locale}}: LocaleLayoutProps) {
+  let messages;
+  try {
+    messages = (await import(`../../messages/${locale}.json`)).default;
+  } catch (error) {
+    notFound();
+  }
+ 
+  return (
+    <html lang={locale} className={inter.variable}>
+      <body className="flex flex-col min-h-screen">
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <Header />
+          <main className="flex-1">{children}</main>
+          <Footer />
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
+
+

app/[locale]/not-found.tsx

@@ -0,0 +1,8 @@
+export default function NotFound() {
+  return (
+    <>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+    </>
+  );
+}

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

@@ -0,0 +1,112 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+
+import Grid from 'components/grid';
+import Footer from 'components/layout/footer';
+import ProductGridItems from 'components/layout/product-grid-items';
+import { AddToCart } from 'components/product/add-to-cart';
+import { Gallery } from 'components/product/gallery';
+import { VariantSelector } from 'components/product/variant-selector';
+import Prose from 'components/prose';
+import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
+import { getProduct, getProductRecommendations } from 'lib/shopify';
+import { Image } from 'lib/shopify/types';
+
+export const runtime = 'edge';
+
+export async function generateMetadata({
+  params
+}: {
+  params: { handle: string };
+}): Promise<Metadata> {
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  const { url, width, height, altText: alt } = product.featuredImage || {};
+  const hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
+
+  return {
+    title: product.seo.title || product.title,
+    description: product.seo.description || product.description,
+    robots: {
+      index: hide,
+      follow: hide,
+      googleBot: {
+        index: hide,
+        follow: hide
+      }
+    },
+    openGraph: url
+      ? {
+          images: [
+            {
+              url,
+              width,
+              height,
+              alt
+            }
+          ]
+        }
+      : null
+  };
+}
+
+export default async function ProductPage({ params }: { params: { handle: string } }) {
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  return (
+    <div>
+      <div className="lg:grid lg:grid-cols-6">
+        <div className="lg:col-span-4">
+          <Gallery
+            title={product.title}
+            amount={product.priceRange.maxVariantPrice.amount}
+            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+            images={product.images.map((image: Image) => ({
+              src: image.url,
+              altText: image.altText
+            }))}
+          />
+        </div>
+
+        <div className="p-6 lg:col-span-2">
+          {/* @ts-expect-error Server Component */}
+          <VariantSelector options={product.options} variants={product.variants} />
+
+          {product.descriptionHtml ? (
+            <Prose className="mb-6 text-sm leading-tight" html={product.descriptionHtml} />
+          ) : null}
+
+          <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+        </div>
+      </div>
+      <Suspense>
+        {/* @ts-expect-error Server Component */}
+        <RelatedProducts id={product.id} />
+        <Suspense>
+          {/* @ts-expect-error Server Component */}
+          <Footer />
+        </Suspense>
+      </Suspense>
+    </div>
+  );
+}
+
+async function RelatedProducts({ id }: { id: string }) {
+  const relatedProducts = await getProductRecommendations(id);
+
+  if (!relatedProducts.length) return null;
+
+  return (
+    <div className="px-4 py-8">
+      <div className="mb-4 text-3xl font-bold">Related Products</div>
+      <Grid className="grid-cols-2 lg:grid-cols-5">
+        <ProductGridItems products={relatedProducts} />
+      </Grid>
+    </div>
+  );
+}