fix: harden storefront fallback UI when Shopify data is unavailable

app/[page]/opengraph-image.tsx

@@ -3,7 +3,7 @@ import { getPage } from "lib/shopify";
 
 export default async function Image({ params }: { params: { page: string } }) {
   const page = await getPage(params.page);
-  const title = page.seo?.title || page.title;
+  const title = page?.seo?.title || page?.title;
 
   return await OpengraphImage({ title });
 }

app/sitemap.ts

@@ -1,5 +1,5 @@
 import { getCollections, getPages, getProducts } from "lib/shopify";
-import { baseUrl, validateEnvironmentVariables } from "lib/utils";
+import { baseUrl } from "lib/utils";
 import { MetadataRoute } from "next";
 
 type Route = {
@@ -10,8 +10,6 @@ type Route = {
 export const dynamic = "force-dynamic";
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  validateEnvironmentVariables();
-
   const routesMap = [""].map((route) => ({
     url: `${baseUrl}${route}`,
     lastModified: new Date().toISOString(),
@@ -38,15 +36,9 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     })),
   );
 
-  let fetchedRoutes: Route[] = [];
-
-  try {
-    fetchedRoutes = (
-      await Promise.all([collectionsPromise, productsPromise, pagesPromise])
-    ).flat();
-  } catch (error) {
-    throw JSON.stringify(error, null, 2);
-  }
+  const fetchedRoutes: Route[] = (
+    await Promise.all([collectionsPromise, productsPromise, pagesPromise])
+  ).flat();
 
   return [...routesMap, ...fetchedRoutes];
 }

components/cart/actions.ts

@@ -14,7 +14,7 @@ import { redirect } from "next/navigation";
 
 export async function addItem(
   prevState: any,
-  selectedVariantId: string | undefined
+  selectedVariantId: string | undefined,
 ) {
   if (!selectedVariantId) {
     return "Error adding item to cart";
@@ -37,7 +37,7 @@ export async function removeItem(prevState: any, merchandiseId: string) {
     }
 
     const lineItem = cart.lines.find(
-      (line) => line.merchandise.id === merchandiseId
+      (line) => line.merchandise.id === merchandiseId,
     );
 
     if (lineItem && lineItem.id) {
@@ -56,7 +56,7 @@ export async function updateItemQuantity(
   payload: {
     merchandiseId: string;
     quantity: number;
-  }
+  },
 ) {
   const { merchandiseId, quantity } = payload;
 
@@ -68,7 +68,7 @@ export async function updateItemQuantity(
     }
 
     const lineItem = cart.lines.find(
-      (line) => line.merchandise.id === merchandiseId
+      (line) => line.merchandise.id === merchandiseId,
     );
 
     if (lineItem && lineItem.id) {
@@ -96,11 +96,25 @@ export async function updateItemQuantity(
 }
 
 export async function redirectToCheckout() {
-  let cart = await getCart();
-  redirect(cart!.checkoutUrl);
+  const cart = await getCart();
+
+  if (!cart?.checkoutUrl) {
+    return;
+  }
+
+  redirect(cart.checkoutUrl);
 }
 
 export async function createCartAndSetCookie() {
-  let cart = await createCart();
-  (await cookies()).set("cartId", cart.id!);
+  try {
+    const cart = await createCart();
+
+    if (!cart.id) {
+      return;
+    }
+
+    (await cookies()).set("cartId", cart.id);
+  } catch (error) {
+    console.error(error);
+  }
 }

components/layout/footer.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
+import { Suspense } from "react";
 
 import FooterMenu from "components/layout/footer-menu";
 import LogoSquare from "components/logo-square";
 import { getMenu } from "lib/shopify";
-import { Suspense } from "react";
 
 const { COMPANY_NAME, SITE_NAME } = process.env;
 
@@ -47,7 +47,7 @@ export default async function Footer() {
             aria-label="Deploy on Vercel"
             href="https://vercel.com/templates/next.js/nextjs-commerce"
           >
-            <span className="px-3">▲</span>
+            <span className="px-3">&#9650;</span>
             <hr className="h-full border-r border-neutral-200 dark:border-neutral-700" />
             <span className="px-3">Deploy</span>
           </a>
@@ -68,7 +68,7 @@ export default async function Footer() {
           </p>
           <p className="md:ml-auto">
             <a href="https://vercel.com" className="text-black dark:text-white">
-              Created by ▲ Vercel
+              Created by &#9650; Vercel
             </a>
           </p>
         </div>

components/welcome-toast.tsx

@@ -5,10 +5,11 @@ import { toast } from "sonner";
 
 export function WelcomeToast() {
   useEffect(() => {
-    // ignore if screen height is too small
+    // Ignore if screen height is too small.
     if (window.innerHeight < 650) return;
+
     if (!document.cookie.includes("welcome-toast=2")) {
-      toast("🛍️ Welcome to Next.js Commerce!", {
+      toast("\u{1F6CD}\uFE0F Welcome to Next.js Commerce!", {
         id: "welcome-toast",
         duration: Infinity,
         onDismiss: () => {
@@ -22,6 +23,7 @@ export function WelcomeToast() {
               href="https://vercel.com/templates/next.js/nextjs-commerce"
               className="text-blue-600 hover:underline"
               target="_blank"
+              rel="noreferrer"
             >
               Deploy your own
             </a>