Adds documentation on how to configure Next.js Commerce and Shopify (#974)

app/api/og/route.tsx

@@ -1,5 +1,4 @@
 import { ImageResponse } from '@vercel/og';
-import { SITE_NAME } from 'lib/constants';
 import { NextRequest } from 'next/server';
 
 export const runtime = 'edge';
@@ -18,7 +17,9 @@ export async function GET(req: NextRequest): Promise<Response | ImageResponse> {
 
     const { searchParams } = new URL(req.url);
 
-    const title = searchParams.has('title') ? searchParams.get('title')?.slice(0, 100) : SITE_NAME;
+    const title = searchParams.has('title')
+      ? searchParams.get('title')?.slice(0, 100)
+      : process.env.SITE_NAME;
 
     return new ImageResponse(
       (

app/layout.tsx

@@ -1,9 +1,9 @@
+import Navbar from 'components/layout/navbar';
 import { Inter } from 'next/font/google';
 import { ReactNode, Suspense } from 'react';
 import './globals.css';
 
-import Navbar from 'components/layout/navbar';
-import { SITE_CREATOR, SITE_CREATOR_URL, SITE_NAME } from 'lib/constants';
+const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
 
 export const metadata = {
   title: {
@@ -14,11 +14,14 @@ export const metadata = {
     follow: true,
     index: true
   },
-  twitter: {
-    card: 'summary_large_image',
-    creator: SITE_CREATOR,
-    site: SITE_CREATOR_URL
-  }
+  ...(TWITTER_CREATOR &&
+    TWITTER_SITE && {
+      twitter: {
+        card: 'summary_large_image',
+        creator: TWITTER_CREATOR,
+        site: TWITTER_SITE
+      }
+    })
 };
 
 const inter = Inter({

app/page.tsx

@@ -1,7 +1,6 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
-import { SITE_NAME } from 'lib/constants';
 import { Suspense } from 'react';
 
 export const runtime = 'edge';
@@ -11,7 +10,7 @@ export const metadata = {
   openGraph: {
     images: [
       {
-        url: `/api/og?title=${encodeURIComponent(SITE_NAME)}`,
+        url: `/api/og?title=${encodeURIComponent(process.env.SITE_NAME)}`,
         width: 1200,
         height: 630
       }