diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
index b2dc1c8421573a8..640912cfa26bc3b 100644
--- a/docs/basic-features/font-optimization.md
+++ b/docs/basic-features/font-optimization.md
@@ -169,12 +169,13 @@ In the example below, we use the font `Inter` from `@next/font/google` (You can
 import { Inter } from '@next/font/google'
 
 const inter = Inter({
+  subsets: ['latin'],
   variable: '--font-inter',
 })
 
 export default function MyApp({ Component, pageProps }) {
   return (
-    <main className={inter.variable}>
+    <main className={`${inter.variable} font-sans`}>
       <Component {...pageProps} />
     </main>
   )
diff --git a/examples/with-sfcc/components/Footer.tsx b/examples/with-sfcc/components/Footer.tsx
new file mode 100644
index 000000000000000..0ccf199fbecc4a6
--- /dev/null
+++ b/examples/with-sfcc/components/Footer.tsx
@@ -0,0 +1,14 @@
+export default function Footer() {
+  return (
+    <footer className="center mt-5 flex justify-center space-x-4 bg-[#E7E8EF] p-4 text-xs">
+      <p>Powered by Next.js, Salesforce Commerce Cloud, and Vercel </p>
+      <span>|</span>
+      <a
+        href="https://github.com/vercel/next.js/tree/canary/examples/with-sfcc"
+        className="font-medium text-orange-600"
+      >
+        Source code
+      </a>
+    </footer>
+  )
+}
diff --git a/examples/with-sfcc/components/Header.js b/examples/with-sfcc/components/Header.tsx
similarity index 94%
rename from examples/with-sfcc/components/Header.js
rename to examples/with-sfcc/components/Header.tsx
index 9b7b7f20e8eb8f4..aafd8e3ccae2225 100644
--- a/examples/with-sfcc/components/Header.js
+++ b/examples/with-sfcc/components/Header.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import img from '../public/hero.jpg'
 
 export default function Header({ scrollHandler }) {
   return (
@@ -11,7 +12,8 @@ export default function Header({ scrollHandler }) {
               priority
               fill
               className="h-full w-full object-cover"
-              src="/hero.jpg"
+              src={img}
+              placeholder="blur"
               alt="Coffee grinder"
             />
             <div className="absolute inset-0 bg-orange-100 mix-blend-multiply" />
diff --git a/examples/with-sfcc/components/ProductCard.js b/examples/with-sfcc/components/ProductCard.tsx
similarity index 97%
rename from examples/with-sfcc/components/ProductCard.js
rename to examples/with-sfcc/components/ProductCard.tsx
index e1158763f8c682f..aceaf9664395e86 100644
--- a/examples/with-sfcc/components/ProductCard.js
+++ b/examples/with-sfcc/components/ProductCard.tsx
@@ -13,7 +13,7 @@ export default function ProductCard({ product }) {
     <Link href={`/products/${product.id}`} className="group">
       <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
         <Image
-          alt=""
+          alt="product image"
           src={product.imageGroups[0].images[0].link}
           fill
           className={cn(
diff --git a/examples/with-sfcc/components/layout.js b/examples/with-sfcc/components/layout.js
deleted file mode 100644
index 81329ea23ffec7c..000000000000000
--- a/examples/with-sfcc/components/layout.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function Layout({ children }) {
-  return (
-    <>
-      <main>{children}</main>
-      <footer className="center mt-5 flex justify-center space-x-4 bg-[#E7E8EF] p-4 text-xs">
-        <p>Powered by Next.js, Salesforce Commerce Cloud, and Vercel </p>
-        <span>|</span>
-        <a
-          href="https://github.com/vercel/next.js/tree/canary/examples/with-sfcc"
-          className="font-medium text-orange-600"
-        >
-          Source code
-        </a>
-      </footer>
-    </>
-  )
-}
diff --git a/examples/with-sfcc/next.config.js b/examples/with-sfcc/next.config.js
index ee20e1e1382ca51..d4c379978d9990e 100644
--- a/examples/with-sfcc/next.config.js
+++ b/examples/with-sfcc/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   reactStrictMode: true,
   images: {
-    domains: ['zzte-003.sandbox.us02.dx.commercecloud.salesforce.com'],
+    domains: ['zzte-003.dx.commercecloud.salesforce.com'],
   },
 }
diff --git a/examples/with-sfcc/package.json b/examples/with-sfcc/package.json
index d794fa35b964e60..b0249d3501016f9 100644
--- a/examples/with-sfcc/package.json
+++ b/examples/with-sfcc/package.json
@@ -6,6 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@next/font": "latest",
     "commerce-sdk": "^2.8.0",
     "next": "latest",
     "react": "^18.2.0",
@@ -13,11 +14,11 @@
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@types/node": "17.0.4",
-    "@types/react": "17.0.38",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.25",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.7",
-    "typescript": "4.5.4"
+    "typescript": "4.8.4"
   }
 }
diff --git a/examples/with-sfcc/pages/_app.js b/examples/with-sfcc/pages/_app.js
deleted file mode 100644
index 854b90eea33bfa8..000000000000000
--- a/examples/with-sfcc/pages/_app.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import '../styles/globals.css'
-import Layout from '../components/layout'
-import Head from 'next/head'
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <>
-      <Head>
-        <title>The Coffee House</title>
-      </Head>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </>
-  )
-}
-
-export default MyApp
diff --git a/examples/with-sfcc/pages/_app.tsx b/examples/with-sfcc/pages/_app.tsx
new file mode 100644
index 000000000000000..a0995b781aa6fbe
--- /dev/null
+++ b/examples/with-sfcc/pages/_app.tsx
@@ -0,0 +1,23 @@
+import '../styles/globals.css'
+import Footer from '../components/Footer'
+import Head from 'next/head'
+import { Montserrat } from '@next/font/google'
+
+const montserrat = Montserrat({
+  subsets: ['latin'],
+  variable: '--font-montserrat',
+})
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Head>
+        <title>The Coffee House</title>
+      </Head>
+      <main className={`${montserrat.variable} font-sans`}>
+        <Component {...pageProps} />
+        <Footer />
+      </main>
+    </>
+  )
+}
diff --git a/examples/with-sfcc/pages/_document.js b/examples/with-sfcc/pages/_document.tsx
similarity index 58%
rename from examples/with-sfcc/pages/_document.js
rename to examples/with-sfcc/pages/_document.tsx
index 392545c46630811..2445294295b49b7 100644
--- a/examples/with-sfcc/pages/_document.js
+++ b/examples/with-sfcc/pages/_document.tsx
@@ -8,12 +8,7 @@ export default function Document() {
           name="description"
           content="The premiere coffee delivery service."
         />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-          rel="stylesheet"
-        />
       </Head>
-
       <body>
         <Main />
         <NextScript />
diff --git a/examples/with-sfcc/pages/index.js b/examples/with-sfcc/pages/index.tsx
similarity index 93%
rename from examples/with-sfcc/pages/index.js
rename to examples/with-sfcc/pages/index.tsx
index f347ae90dbcb209..2e78ed0f30503c3 100644
--- a/examples/with-sfcc/pages/index.js
+++ b/examples/with-sfcc/pages/index.tsx
@@ -4,10 +4,11 @@ import ProductCard from '../components/ProductCard'
 import getProducts from '../sfcc.js'
 
 export default function Gallery({ data }) {
-  let coffeeRef = useRef()
+  let coffeeRef = useRef<HTMLParagraphElement>()
 
   const scrollHandler = (e) => {
     e.preventDefault()
+    // @ts-ignore
     coffeeRef.scrollIntoView({
       behavior: 'smooth',
       block: 'start',
@@ -22,7 +23,7 @@ export default function Gallery({ data }) {
           <div className="text-center">
             <p
               className="mt-1 text-4xl font-bold uppercase text-gray-900 sm:text-5xl sm:tracking-tight lg:text-5xl"
-              ref={(element) => (coffeeRef = element)}
+              ref={coffeeRef}
             >
               Crafted by us, for you
             </p>
diff --git a/examples/with-sfcc/pages/products/[slug].js b/examples/with-sfcc/pages/products/[slug].tsx
similarity index 91%
rename from examples/with-sfcc/pages/products/[slug].js
rename to examples/with-sfcc/pages/products/[slug].tsx
index 6d7f7ba48d8af96..f8f54876409b0a7 100644
--- a/examples/with-sfcc/pages/products/[slug].js
+++ b/examples/with-sfcc/pages/products/[slug].tsx
@@ -33,9 +33,8 @@ export default function Product({ product }) {
 
 export async function getStaticProps({ params }) {
   const searchResults = await getProducts(params.slug)
-  console.log('search Results are: ', searchResults)
-
   const coffeeProduct = searchResults[0]
+
   return {
     props: {
       product: coffeeProduct,
@@ -44,11 +43,9 @@ export async function getStaticProps({ params }) {
 }
 
 export async function getStaticPaths() {
-  const searchResults = await getProducts('coffee')
-
-  let coffeeProducts = searchResults
-
+  const coffeeProducts = await getProducts('coffee')
   let fullPaths = []
+
   for (let product of coffeeProducts) {
     fullPaths.push({ params: { slug: product.id } })
   }
diff --git a/examples/with-sfcc/styles/globals.css b/examples/with-sfcc/styles/globals.css
index f29a9084287e833..b5c61c956711f98 100644
--- a/examples/with-sfcc/styles/globals.css
+++ b/examples/with-sfcc/styles/globals.css
@@ -1,7 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-* {
-  font-family: Montserrat, sans-serif;
-}
diff --git a/examples/with-sfcc/tailwind.config.js b/examples/with-sfcc/tailwind.config.js
index 7a5f14f8980fe77..f9d99166113122e 100644
--- a/examples/with-sfcc/tailwind.config.js
+++ b/examples/with-sfcc/tailwind.config.js
@@ -1,7 +1,16 @@
+/** @type {import('tailwindcss').Config} \*/
 module.exports = {
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
   ],
+  theme: {
+    fontFamily: {
+      sans: ['var(--font-montserrat)'],
+    },
+  },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   plugins: [require('@tailwindcss/aspect-ratio')],
 }
diff --git a/examples/with-sfcc/tsconfig.json b/examples/with-sfcc/tsconfig.json
new file mode 100644
index 000000000000000..1563f3e878573de
--- /dev/null
+++ b/examples/with-sfcc/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}