Updates environment variables.

.env.example

@@ -1,3 +1,6 @@
+TWITTER_CREATOR="@vercel"
+TWITTER_SITE="https://nextjs.org/commerce"
+SITE_NAME="Next.js Commerce"
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=
 SHOPIFY_STORE_DOMAIN=
 SHOPIFY_REVALIDATION_TOKEN=

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';
+const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
-import { SITE_CREATOR, SITE_CREATOR_URL, SITE_NAME } from 'lib/constants';
 
 export const metadata = {
   title: {
@@ -14,11 +14,14 @@ export const metadata = {
     follow: true,
     index: true
   },
-  twitter: {
+  ...(TWITTER_CREATOR &&
-    card: 'summary_large_image',
+    TWITTER_SITE && {
-    creator: SITE_CREATOR,
+      twitter: {
-    site: SITE_CREATOR_URL
+        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
       }

components/icons/logo.tsx

@@ -1,10 +1,8 @@
-import { SITE_NAME } from 'lib/constants';
-
 export default function LogoIcon({ className }: { className?: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      aria-label={`${SITE_NAME} logo`}
+      aria-label={`${process.env.SITE_NAME} logo`}
       viewBox="0 0 32 32"
       strokeWidth="1.5"
       strokeLinecap="round"

components/layout/footer.tsx

@@ -3,11 +3,14 @@ import Link from 'next/link';
 import GitHubIcon from 'components/icons/github';
 import LogoIcon from 'components/icons/logo';
 import VercelIcon from 'components/icons/vercel';
-import { SITE_NAME } from 'lib/constants';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
 
+const { SITE_NAME } = process.env;
+
 export default async function Footer() {
+  const currentYear = new Date().getFullYear();
+  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
   const menu = await getMenu('next-js-frontend-footer-menu');
 
   return (
@@ -45,7 +48,9 @@ export default async function Footer() {
           </div>
         </div>
         <div className="flex flex-col items-center justify-between space-y-4 pt-6 pb-10 text-sm md:flex-row">
-          <p>&copy; 2023 {SITE_NAME}. All rights reserved.</p>
+          <p>
+            &copy; {copyrightDate} {SITE_NAME}. All rights reserved.
+          </p>
           <div className="flex items-center text-sm text-white dark:text-black">
             <span className="text-black dark:text-white">Created by</span>
             <a

lib/constants.tsx

@@ -22,7 +22,4 @@ export const sorting: SortFilterItem[] = [
 
 export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';
 export const DEFAULT_OPTION = 'Default Title';
-export const SITE_NAME = 'Vercel Store';
-export const SITE_CREATOR = '@vercel';
-export const SITE_CREATOR_URL = 'https://vercel.com';
 export const SHOPIFY_GRAPHQL_API_ENDPOINT = '/api/2023-01/graphql.json';