diff --git a/.eslintignore b/.eslintignore
index 356908a..e7066b0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 package.json
 package-lock.json
-tsconfig.json
\ No newline at end of file
+tsconfig.json
+next-env.d.ts
\ No newline at end of file
diff --git a/pages/api/checkout/ordercalculate.ts b/app/api/checkout/ordercalculate/route.ts
similarity index 53%
rename from pages/api/checkout/ordercalculate.ts
rename to app/api/checkout/ordercalculate/route.ts
index 9af2219..45bfec1 100644
--- a/pages/api/checkout/ordercalculate.ts
+++ b/app/api/checkout/ordercalculate/route.ts
@@ -1,13 +1,7 @@
-import { NextApiHandler } from 'next'
-import { OrderCalculateResponse, OrderWorksheet } from 'ordercloud-javascript-sdk'
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { withOcWebhookAuth } from '@ordercloud/catalyst'
-
-// withOCWebhookAuth needs the raw body in order to validate the payload is coming from ordercloud
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};
+import { OrderWorksheet } from 'ordercloud-javascript-sdk'
+import { handleAppRouterWebhook } from '../webhookHelper'
 
 export type OrderCloudEnvironment = 'Production' | 'Staging' | 'Sandbox' | 'Qa'
 
@@ -18,7 +12,7 @@ export interface OrderCheckoutIntegrationEvent<T = null> {
   ConfigData: T
 }
 
-const OrderCalculateHandler: NextApiHandler<OrderCalculateResponse> = (req, res) => {
+const OrderCalculateHandler = (req: any, res: any) => {
   const event = req.body as OrderCheckoutIntegrationEvent
 
   return res.status(200).send({
@@ -26,4 +20,8 @@ const OrderCalculateHandler: NextApiHandler<OrderCalculateResponse> = (req, res)
   })
 }
 
-export default withOcWebhookAuth(OrderCalculateHandler)
+const authenticatedHandler = withOcWebhookAuth(OrderCalculateHandler)
+
+export async function POST(request: Request) {
+  return handleAppRouterWebhook(request, authenticatedHandler)
+}
diff --git a/app/api/checkout/shippingrates/route.ts b/app/api/checkout/shippingrates/route.ts
new file mode 100644
index 0000000..e165c6c
--- /dev/null
+++ b/app/api/checkout/shippingrates/route.ts
@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { withOcWebhookAuth } from '@ordercloud/catalyst'
+import { OrderCheckoutIntegrationEvent } from '../ordercalculate/route'
+import { handleAppRouterWebhook } from '../webhookHelper'
+
+const ShippingRatesHandler = (req: any, res: any) => {
+  const event = req.body as OrderCheckoutIntegrationEvent
+
+  return res.status(200).send({
+    ShipEstimates: [
+      {
+        ID: 'test',
+        ShipEstimateItems: event.OrderWorksheet.LineItems.map((li) => ({
+          LineItemID: li.ID,
+          Quantity: li.Quantity,
+        })),
+        ShipMethods: [
+          {
+            ID: '1day',
+            Name: 'Next Day Shipping',
+            Cost: 50,
+            EstimatedTransitDays: 1,
+          },
+          {
+            ID: '2day',
+            Name: 'Two Day Shipping',
+            Cost: 25,
+            EstimatedTransitDays: 2,
+          },
+          {
+            ID: 'standard',
+            Name: 'Standard Shipping',
+            Cost: 12,
+            EstimatedTransitDays: 5,
+          },
+        ],
+      },
+    ],
+  })
+}
+
+const authenticatedHandler = withOcWebhookAuth(ShippingRatesHandler)
+
+export async function POST(request: Request) {
+  return handleAppRouterWebhook(request, authenticatedHandler)
+}
diff --git a/app/api/checkout/types.ts b/app/api/checkout/types.ts
new file mode 100644
index 0000000..7a7c83b
--- /dev/null
+++ b/app/api/checkout/types.ts
@@ -0,0 +1,10 @@
+import { OrderWorksheet } from 'ordercloud-javascript-sdk'
+
+export type OrderCloudEnvironment = 'Production' | 'Staging' | 'Sandbox' | 'Qa'
+
+export interface OrderCheckoutIntegrationEvent<T = null> {
+  OrderWorksheet: OrderWorksheet
+  Environment: OrderCloudEnvironment
+  OrderCloudAccessToken: string
+  ConfigData: T
+}
diff --git a/app/api/checkout/webhookHelper.ts b/app/api/checkout/webhookHelper.ts
new file mode 100644
index 0000000..be459bf
--- /dev/null
+++ b/app/api/checkout/webhookHelper.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { NextResponse } from 'next/server'
+
+export async function handleAppRouterWebhook(
+  request: Request,
+  handler: any
+): Promise<Response> {
+  try {
+    const rawBody = await request.text()
+    
+    const req: any = {
+      headers: {},
+      rawBody,
+      body: rawBody ? JSON.parse(rawBody) : {},
+      method: request.method,
+      url: request.url,
+    }
+    
+    request.headers.forEach((value, key) => {
+      req.headers[key.toLowerCase()] = value
+    })
+
+    let status = 200
+    let sentData: any = null
+
+    const res: any = {
+      status: (code: number) => {
+        status = code
+        return res
+      },
+      send: (data: any) => {
+        sentData = data
+        return res
+      },
+      json: (data: any) => {
+        sentData = data
+        return res
+      }
+    }
+
+    await new Promise<void>((resolve, reject) => {
+      handler(req, res, (err?: any) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve()
+        }
+      }).catch((err: any) => {
+        reject(err)
+      })
+    })
+
+    return NextResponse.json(sentData, { status })
+  } catch (error: any) {
+    console.error('Webhook error:', error)
+    const statusCode = error.status || 500
+    const message = error.message || 'Internal Server Error'
+    return NextResponse.json(
+      { Errors: [{ ErrorCode: error.name || 'Unauthorized', Message: message }] },
+      { status: statusCode }
+    )
+  }
+}
diff --git a/pages/cart.tsx b/app/cart/page.tsx
similarity index 59%
rename from pages/cart.tsx
rename to app/cart/page.tsx
index 5fab81c..473e81e 100644
--- a/pages/cart.tsx
+++ b/app/cart/page.tsx
@@ -1,8 +1,10 @@
+'use client'
+
 import Link from 'next/link'
 import { FunctionComponent } from 'react'
-import OcLineItemList from '../ordercloud/components/OcLineItemList'
-import { deleteCurrentOrder } from '../ordercloud/redux/ocCurrentOrder'
-import { useOcDispatch } from '../ordercloud/redux/ocStore'
+import OcLineItemList from '../../ordercloud/components/OcLineItemList'
+import { deleteCurrentOrder } from '../../ordercloud/redux/ocCurrentOrder'
+import { useOcDispatch } from '../../ordercloud/redux/ocStore'
 
 const CartPage: FunctionComponent = () => {
   const dispatch = useOcDispatch()
@@ -13,9 +15,7 @@ const CartPage: FunctionComponent = () => {
         Clear Cart
       </button>
       <OcLineItemList emptyMessage="Your shopping cart is empty" editable />
-      <Link href="/checkout">
-        <a>Checkout</a>
-      </Link>
+      <Link href="/checkout">Checkout</Link>
     </div>
   )
 }
diff --git a/pages/checkout.tsx b/app/checkout/page.tsx
similarity index 66%
rename from pages/checkout.tsx
rename to app/checkout/page.tsx
index b2c99fd..f224140 100644
--- a/pages/checkout.tsx
+++ b/app/checkout/page.tsx
@@ -1,9 +1,11 @@
-import { useRouter } from 'next/router'
+'use client'
+
+import { useRouter } from 'next/navigation'
 import { FunctionComponent, useEffect } from 'react'
-import OcCheckout from '../ordercloud/components/OcCheckout'
-import OcCheckoutSummary from '../ordercloud/components/OcCheckout/OcCheckoutSummary'
-import OcLineItemList from '../ordercloud/components/OcLineItemList'
-import { useOcSelector } from '../ordercloud/redux/ocStore'
+import OcCheckout from '../../ordercloud/components/OcCheckout'
+import OcCheckoutSummary from '../../ordercloud/components/OcCheckout/OcCheckoutSummary'
+import OcLineItemList from '../../ordercloud/components/OcLineItemList'
+import { useOcSelector } from '../../ordercloud/redux/ocStore'
 
 const CheckoutPage: FunctionComponent = () => {
   const { push } = useRouter()
diff --git a/app/confirmation/[orderid]/page.tsx b/app/confirmation/[orderid]/page.tsx
new file mode 100644
index 0000000..2932446
--- /dev/null
+++ b/app/confirmation/[orderid]/page.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import { FunctionComponent, useEffect } from 'react'
+import OcOrderConfirmation from '../../../ordercloud/components/OcOrderConfirmation'
+
+const OrderConfirmationPage: FunctionComponent = () => {
+  const params = useParams()
+  const orderId = params.orderid as string
+
+  useEffect(() => {
+    document.title = 'Order Confirmed'
+  }, [])
+
+  return <OcOrderConfirmation orderId={orderId} />
+}
+
+export default OrderConfirmationPage
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..e7c184a
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,43 @@
+import type { Metadata } from 'next'
+import '../styles/globals.css'
+import OcProvider from '../ordercloud/redux/ocProvider'
+import Layout from '../components/Layout'
+import { ApiRole } from 'ordercloud-javascript-sdk'
+
+const clientId = process.env.NEXT_PUBLIC_OC_CLIENT_ID || ''
+const scope = process.env.NEXT_PUBLIC_OC_SCOPE
+  ? (process.env.NEXT_PUBLIC_OC_SCOPE.split(',') as ApiRole[])
+  : []
+const baseApiUrl = process.env.NEXT_PUBLIC_OC_BASE_API_URL
+const allowAnonymous = Boolean(process.env.NEXT_PUBLIC_OC_ALLOW_ANONYMOUS)
+
+const ocConfig = {
+  clientId,
+  scope,
+  baseApiUrl,
+  allowAnonymous,
+  cookieOptions: {
+    prefix: 'hds-nextjs',
+    path: '/',
+  },
+}
+
+export const metadata: Metadata = {
+  title: 'Headstart Next.js',
+  description: 'OrderCloud Headstart Next.js Storefront',
+  icons: {
+    icon: '/favicon.ico',
+  },
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <OcProvider config={ocConfig}>
+          <Layout>{children}</Layout>
+        </OcProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/pages/login.tsx b/app/login/page.tsx
similarity index 70%
rename from pages/login.tsx
rename to app/login/page.tsx
index 319dcab..c122bc4 100644
--- a/pages/login.tsx
+++ b/app/login/page.tsx
@@ -1,6 +1,8 @@
-import { useRouter } from 'next/router'
+'use client'
+
+import { useRouter } from 'next/navigation'
 import { FunctionComponent } from 'react'
-import OcLoginForm from '../ordercloud/components/OcLoginForm'
+import OcLoginForm from '../../ordercloud/components/OcLoginForm'
 
 const LoginPage: FunctionComponent = () => {
   const { push } = useRouter()
diff --git a/pages/index.tsx b/app/page.tsx
similarity index 97%
rename from pages/index.tsx
rename to app/page.tsx
index a00f8b9..b23132c 100644
--- a/pages/index.tsx
+++ b/app/page.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { FunctionComponent } from 'react'
 import { useOcSelector } from '../ordercloud/redux/ocStore'
 import styles from '../styles/Home.module.css'
diff --git a/app/products/[productid]/page.tsx b/app/products/[productid]/page.tsx
new file mode 100644
index 0000000..a9da009
--- /dev/null
+++ b/app/products/[productid]/page.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { useRouter, useParams, useSearchParams } from 'next/navigation'
+import { FunctionComponent, useEffect, Suspense } from 'react'
+import OcProductDetail from '../../../ordercloud/components/OcProductDetail'
+import { useOcSelector } from '../../../ordercloud/redux/ocStore'
+
+const ProductDetailContent: FunctionComponent = () => {
+  const { push } = useRouter()
+  const params = useParams()
+  const searchParams = useSearchParams()
+
+  const productId = params.productid as string
+  const lineItemId = searchParams.get('lineitem') as string
+
+  const productName = useOcSelector(
+    (s) => s.ocProductDetail.product && s.ocProductDetail.product.Name
+  )
+
+  useEffect(() => {
+    if (productName) {
+      document.title = productName
+    }
+  }, [productName])
+
+  const handleLineItemUpdated = () => {
+    push('/cart')
+  }
+
+  return (
+    <OcProductDetail
+      onLineItemUpdated={handleLineItemUpdated}
+      productId={productId}
+      lineItemId={lineItemId}
+    />
+  )
+}
+
+const ProductPage: FunctionComponent = () => {
+  return (
+    <Suspense fallback={<div>Loading product details...</div>}>
+      <ProductDetailContent />
+    </Suspense>
+  )
+}
+
+export default ProductPage
diff --git a/pages/products/index.tsx b/app/products/page.tsx
similarity index 65%
rename from pages/products/index.tsx
rename to app/products/page.tsx
index b7ff3cb..103558d 100644
--- a/pages/products/index.tsx
+++ b/app/products/page.tsx
@@ -1,6 +1,8 @@
+'use client'
+
 import Link from 'next/link'
 import { BuyerProduct, Filters } from 'ordercloud-javascript-sdk'
-import { FunctionComponent, useCallback } from 'react'
+import { FunctionComponent, useCallback, Suspense } from 'react'
 import OcProductCard from '../../ordercloud/components/OcProductCard'
 import OcProductFacetForm from '../../ordercloud/components/OcProductFacetsForm'
 import OcProductList from '../../ordercloud/components/OcProductList'
@@ -18,8 +20,8 @@ const queryMap: NextQueryMap = {
   'xp.test_number': 'num',
 }
 
-const ProductListPage: FunctionComponent = () => {
-  const { isReady, options, updateQuery } = useNextRouterMapping(queryMap)
+const ProductListContent: FunctionComponent = () => {
+  const { options, updateQuery } = useNextRouterMapping(queryMap)
 
   const handleFacetChange = useCallback(
     (updatedFilters: Filters) => {
@@ -31,22 +33,26 @@ const ProductListPage: FunctionComponent = () => {
   const handleRenderItem = (p: BuyerProduct) => {
     return (
       <Link href={`/products/${p.ID}`}>
-        <a>
-          <OcProductCard product={p} />
-        </a>
+        <OcProductCard product={p} />
       </Link>
     )
   }
 
   return (
-    isReady && (
-      <>
-        <h2>Facets</h2>
-        <OcProductFacetForm onChange={handleFacetChange} />
-        <h2>Products</h2>
-        <OcProductList options={options} renderItem={handleRenderItem} />
-      </>
-    )
+    <>
+      <h2>Facets</h2>
+      <OcProductFacetForm onChange={handleFacetChange} />
+      <h2>Products</h2>
+      <OcProductList options={options} renderItem={handleRenderItem} />
+    </>
+  )
+}
+
+const ProductListPage: FunctionComponent = () => {
+  return (
+    <Suspense fallback={<div>Loading products...</div>}>
+      <ProductListContent />
+    </Suspense>
   )
 }
 
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 765eff8..eae8d7b 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -1,10 +1,11 @@
-import Head from 'next/head'
+'use client'
+
 import Link from 'next/link'
 import { FunctionComponent } from 'react'
 import logout from '../ordercloud/redux/ocAuth/logout'
 import { useOcDispatch, useOcSelector } from '../ordercloud/redux/ocStore'
 
-const Layout: FunctionComponent = ({ children }) => {
+const Layout: FunctionComponent<{ children: React.ReactNode }> = ({ children }) => {
   const dispatch = useOcDispatch()
 
   const { user, isAnonymous, loading, lineItemCount } = useOcSelector((s) => ({
@@ -16,27 +17,15 @@ const Layout: FunctionComponent = ({ children }) => {
 
   return (
     <>
-      <Head>
-        <title>React Headstart</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <header>
         <h1>React Headstart</h1>
         <p>{`Cart Count ${lineItemCount}`}</p>
         <nav>
-          <Link href="/">
-            <a>Home</a>
-          </Link>
-          <Link href="/cart">
-            <a>Cart</a>
-          </Link>
-          <Link href="/products">
-            <a>Products</a>
-          </Link>
+          <Link href="/">Home</Link>
+          <Link href="/cart">Cart</Link>
+          <Link href="/products">Products</Link>
           {isAnonymous ? (
-            <Link href="/login">
-              <a>Login</a>
-            </Link>
+            <Link href="/login">Login</Link>
           ) : (
             <button type="button" disabled={loading} onClick={() => dispatch(logout())}>
               Logout
diff --git a/ordercloud/components/OcAddressBook/index.tsx b/ordercloud/components/OcAddressBook/index.tsx
index 8cc7f03..a7e1250 100644
--- a/ordercloud/components/OcAddressBook/index.tsx
+++ b/ordercloud/components/OcAddressBook/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { BuyerAddress } from 'ordercloud-javascript-sdk'
 import { ChangeEvent, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
 import useOcAddressBook, { OcAddressListOptions } from '../../hooks/useOcAddressBook'
diff --git a/ordercloud/components/OcAddressForm/index.tsx b/ordercloud/components/OcAddressForm/index.tsx
index f13731f..5786906 100644
--- a/ordercloud/components/OcAddressForm/index.tsx
+++ b/ordercloud/components/OcAddressForm/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { isEqual } from 'lodash'
 import { BuyerAddress } from 'ordercloud-javascript-sdk'
 import {
diff --git a/ordercloud/components/OcCheckout/OcCheckoutBilling.tsx b/ordercloud/components/OcCheckout/OcCheckoutBilling.tsx
index ebd15a5..c63a880 100644
--- a/ordercloud/components/OcCheckout/OcCheckoutBilling.tsx
+++ b/ordercloud/components/OcCheckout/OcCheckoutBilling.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { isEqual } from 'lodash'
 import { BuyerAddress } from 'ordercloud-javascript-sdk'
 import { ChangeEvent, FunctionComponent, useCallback, useMemo } from 'react'
diff --git a/ordercloud/components/OcCheckout/OcCheckoutPayment.tsx b/ordercloud/components/OcCheckout/OcCheckoutPayment.tsx
index c39a2de..943ec6b 100644
--- a/ordercloud/components/OcCheckout/OcCheckoutPayment.tsx
+++ b/ordercloud/components/OcCheckout/OcCheckoutPayment.tsx
@@ -1,4 +1,5 @@
-import { Payment } from 'ordercloud-javascript-sdk'
+'use client'
+
 import {
   ChangeEvent,
   FormEvent,
diff --git a/ordercloud/components/OcCheckout/OcCheckoutReview.tsx b/ordercloud/components/OcCheckout/OcCheckoutReview.tsx
index cd10c10..4e01a4d 100644
--- a/ordercloud/components/OcCheckout/OcCheckoutReview.tsx
+++ b/ordercloud/components/OcCheckout/OcCheckoutReview.tsx
@@ -1,6 +1,8 @@
+'use client'
+
 import { FunctionComponent, useCallback } from 'react'
 import { OcCheckoutStepProps } from '.'
-import { OcCurrentOrderState, submitOrder } from '../../redux/ocCurrentOrder'
+import { submitOrder } from '../../redux/ocCurrentOrder'
 import { useOcDispatch } from '../../redux/ocStore'
 import OcLineItemList from '../OcLineItemList'
 import OcCheckoutSummary from './OcCheckoutSummary'
diff --git a/ordercloud/components/OcCheckout/OcCheckoutShipping.tsx b/ordercloud/components/OcCheckout/OcCheckoutShipping.tsx
index 92709f6..756eee1 100644
--- a/ordercloud/components/OcCheckout/OcCheckoutShipping.tsx
+++ b/ordercloud/components/OcCheckout/OcCheckoutShipping.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { BuyerAddress } from 'ordercloud-javascript-sdk'
 import { FunctionComponent, useMemo } from 'react'
 import { saveShippingAddress } from '../../redux/ocCurrentOrder'
@@ -7,7 +9,7 @@ import OcAddressForm from '../OcAddressForm'
 import OcShipEstimates from './OcShipEstimates'
 import { OcCheckoutStepProps } from './index'
 
-const OcCheckoutShipping: FunctionComponent<OcCheckoutStepProps> = ({ onNext, onPrev }) => {
+const OcCheckoutShipping: FunctionComponent<OcCheckoutStepProps> = ({ onNext }) => {
   const dispatch = useOcDispatch()
 
   const { initialized, order, lineItems, user } = useOcSelector((s) => ({
diff --git a/ordercloud/components/OcCheckout/OcCheckoutSummary.tsx b/ordercloud/components/OcCheckout/OcCheckoutSummary.tsx
index a9b57a7..0b0a41d 100644
--- a/ordercloud/components/OcCheckout/OcCheckoutSummary.tsx
+++ b/ordercloud/components/OcCheckout/OcCheckoutSummary.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { FunctionComponent, useMemo } from 'react'
 import { useOcSelector } from '../../redux/ocStore'
 import formatPrice from '../../utils/formatPrice'
diff --git a/ordercloud/components/OcCheckout/OcShipEstimates.tsx b/ordercloud/components/OcCheckout/OcShipEstimates.tsx
index 2056f3a..483234d 100644
--- a/ordercloud/components/OcCheckout/OcShipEstimates.tsx
+++ b/ordercloud/components/OcCheckout/OcShipEstimates.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import { RequiredDeep, ShipEstimate, ShipMethodSelection } from 'ordercloud-javascript-sdk'
-import { ChangeEvent, FunctionComponent, useCallback, useEffect, useMemo } from 'react'
+import { ChangeEvent, FunctionComponent, useEffect } from 'react'
 import { estimateShipping, selectShipMethods } from '../../redux/ocCurrentOrder'
 import { useOcDispatch, useOcSelector } from '../../redux/ocStore'
 import formatPrice from '../../utils/formatPrice'
diff --git a/ordercloud/components/OcCheckout/index.tsx b/ordercloud/components/OcCheckout/index.tsx
index 6d30a05..4e0f38f 100644
--- a/ordercloud/components/OcCheckout/index.tsx
+++ b/ordercloud/components/OcCheckout/index.tsx
@@ -1,17 +1,17 @@
+'use client'
+
 import { FunctionComponent, useState } from 'react'
-import { OcCurrentOrderState } from '../../redux/ocCurrentOrder'
 import OcCheckoutBilling from './OcCheckoutBilling'
 import OcCheckoutPayment from './OcCheckoutPayment'
 import OcCheckoutReview from './OcCheckoutReview'
 import OcCheckoutShipping from './OcCheckoutShipping'
-import OcCheckoutSummary from './OcCheckoutSummary'
 
 export interface OcCheckoutStepProps {
   onNext: () => void
   onPrev: () => void
 }
 
-const OcCheckout: FunctionComponent<{ onSubmitted: any }> = ({ onSubmitted }) => {
+const OcCheckout: FunctionComponent<{ onSubmitted: (orderId: string) => void }> = ({ onSubmitted }) => {
   const [step, setStep] = useState(0)
 
   const handlePrevClick = () => {
diff --git a/ordercloud/components/OcLineItemCard/index.tsx b/ordercloud/components/OcLineItemCard/index.tsx
index 83abaeb..6f654b0 100644
--- a/ordercloud/components/OcLineItemCard/index.tsx
+++ b/ordercloud/components/OcLineItemCard/index.tsx
@@ -1,9 +1,11 @@
+'use client'
+
 import Link from 'next/link'
 import { LineItem } from 'ordercloud-javascript-sdk'
 import { FormEvent, FunctionComponent, useCallback, useMemo, useState } from 'react'
-import { useDispatch } from 'react-redux'
 import useOcProduct from '../../hooks/useOcProduct'
 import { removeLineItem, updateLineItem } from '../../redux/ocCurrentOrder'
+import { useOcDispatch } from '../../redux/ocStore'
 import OcQuantityInput from '../OcQuantityInput'
 
 interface OcLineItemCardProps {
@@ -12,7 +14,7 @@ interface OcLineItemCardProps {
 }
 
 const OcLineItemCard: FunctionComponent<OcLineItemCardProps> = ({ lineItem, editable }) => {
-  const dispatch = useDispatch()
+  const dispatch = useOcDispatch()
   const [disabled, setDisabled] = useState(false)
   const [quantity, setQuantity] = useState(lineItem.Quantity)
 
@@ -60,9 +62,7 @@ const OcLineItemCard: FunctionComponent<OcLineItemCardProps> = ({ lineItem, edit
           >
             Remove
           </button>
-          <Link href={`/products/${lineItem.ProductID}?lineitem=${lineItem.ID}`}>
-            <a aria-label="Edit Line Item">Edit</a>
-          </Link>
+          <Link href={`/products/${lineItem.ProductID}?lineitem=${lineItem.ID}`} aria-label="Edit Line Item">Edit</Link>
           {product && (
             <form onSubmit={handleUpdateLineItem}>
               <OcQuantityInput
diff --git a/ordercloud/components/OcLineItemList/index.tsx b/ordercloud/components/OcLineItemList/index.tsx
index 316785c..7f03b26 100644
--- a/ordercloud/components/OcLineItemList/index.tsx
+++ b/ordercloud/components/OcLineItemList/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { FunctionComponent } from 'react'
 import useOcCurrentOrder from '../../hooks/useOcCurrentOrder'
 import OcLineItemCard from '../OcLineItemCard'
diff --git a/ordercloud/components/OcLoginForm/index.tsx b/ordercloud/components/OcLoginForm/index.tsx
index 105fd03..b206caa 100644
--- a/ordercloud/components/OcLoginForm/index.tsx
+++ b/ordercloud/components/OcLoginForm/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { ChangeEvent, FormEvent, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import login from '../../redux/ocAuth/login'
 import { useOcDispatch, useOcSelector } from '../../redux/ocStore'
diff --git a/ordercloud/components/OcOrderConfirmation/index.tsx b/ordercloud/components/OcOrderConfirmation/index.tsx
index 145b90c..7d31f3e 100644
--- a/ordercloud/components/OcOrderConfirmation/index.tsx
+++ b/ordercloud/components/OcOrderConfirmation/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { FunctionComponent } from 'react'
 import { useOcSelector } from '../../redux/ocStore'
 
diff --git a/ordercloud/components/OcProductDetail/OcProductSpecField.tsx b/ordercloud/components/OcProductDetail/OcProductSpecField.tsx
index aac8cfd..ece7205 100644
--- a/ordercloud/components/OcProductDetail/OcProductSpecField.tsx
+++ b/ordercloud/components/OcProductDetail/OcProductSpecField.tsx
@@ -1,5 +1,5 @@
 import { RequiredDeep, Spec } from 'ordercloud-javascript-sdk'
-import { ChangeEvent, FunctionComponent, useState } from 'react'
+import { ChangeEvent, FunctionComponent } from 'react'
 
 interface OcProductSpecFieldProps {
   spec: RequiredDeep<Spec>
diff --git a/ordercloud/components/OcProductDetail/index.tsx b/ordercloud/components/OcProductDetail/index.tsx
index bd2717f..82def04 100644
--- a/ordercloud/components/OcProductDetail/index.tsx
+++ b/ordercloud/components/OcProductDetail/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { Spec } from 'ordercloud-javascript-sdk'
 import { FormEvent, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import useOcProductDetail from '../../hooks/useOcProductDetail'
@@ -26,7 +28,7 @@ const OcProductDetail: FunctionComponent<OcProductDetailProps> = ({
   onLineItemUpdated,
 }) => {
   const dispatch = useOcDispatch()
-  const { product, specs, variants } = useOcProductDetail(productId)
+  const { product, specs } = useOcProductDetail(productId)
   const [loading, setLoading] = useState(false)
 
   const [specValues, setSpecValues] = useState([])
@@ -54,7 +56,7 @@ const OcProductDetail: FunctionComponent<OcProductDetailProps> = ({
   }, [specs, lineItem])
 
   const [quantity, setQuantity] = useState(
-    lineItem ? lineItem.Quantity : (product && product.PriceSchedule.MinQuantity) || 1
+    lineItem ? lineItem.Quantity : (product && product.PriceSchedule?.MinQuantity) || 1
   )
 
   const handleSpecFieldChange = (values: { SpecID: string; OptionID?: string; Value?: string }) => {
diff --git a/ordercloud/components/OcProductFacetsForm/OcProductFacetField.tsx b/ordercloud/components/OcProductFacetsForm/OcProductFacetField.tsx
index 9a96029..228db82 100644
--- a/ordercloud/components/OcProductFacetsForm/OcProductFacetField.tsx
+++ b/ordercloud/components/OcProductFacetsForm/OcProductFacetField.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { xor } from 'lodash'
 import { FunctionComponent, useCallback } from 'react'
 
diff --git a/ordercloud/components/OcProductFacetsForm/index.tsx b/ordercloud/components/OcProductFacetsForm/index.tsx
index e411cce..4d7b574 100644
--- a/ordercloud/components/OcProductFacetsForm/index.tsx
+++ b/ordercloud/components/OcProductFacetsForm/index.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { isNil, mapKeys, mapValues, omitBy } from 'lodash'
 import { Filters, ListFacet } from 'ordercloud-javascript-sdk'
 import { FormEvent, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
diff --git a/ordercloud/components/OcProductList/index.tsx b/ordercloud/components/OcProductList/index.tsx
index 29857aa..e630990 100644
--- a/ordercloud/components/OcProductList/index.tsx
+++ b/ordercloud/components/OcProductList/index.tsx
@@ -1,12 +1,14 @@
+'use client'
+
 import { BuyerProduct } from 'ordercloud-javascript-sdk'
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactElement } from 'react'
 import useOcProductList from '../../hooks/useOcProductList'
 import { OcProductListOptions } from '../../redux/ocProductList'
 import OcProductCard from '../OcProductCard'
 
 export interface OcProductListProps {
   options?: OcProductListOptions
-  renderItem?: (product: BuyerProduct) => JSX.Element
+  renderItem?: (product: BuyerProduct) => ReactElement
 }
 
 const OcProductList: FunctionComponent<OcProductListProps> = ({ options, renderItem }) => {
diff --git a/ordercloud/hooks/useNextRouterMapping.ts b/ordercloud/hooks/useNextRouterMapping.ts
index 43d847e..cfbe765 100644
--- a/ordercloud/hooks/useNextRouterMapping.ts
+++ b/ordercloud/hooks/useNextRouterMapping.ts
@@ -1,6 +1,7 @@
-import { useRouter } from 'next/router'
+'use client'
+
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
 import { Filters } from 'ordercloud-javascript-sdk'
-import { ParsedUrlQuery } from 'querystring'
 import { useCallback, useMemo } from 'react'
 import { OcProductListOptions } from '../redux/ocProductList'
 
@@ -8,7 +9,7 @@ export interface NextQueryMap {
   [key: string]: string
 }
 
-const mapQueryParamsToFilters = (map: NextQueryMap, query: ParsedUrlQuery): Filters => {
+const mapQueryParamsToFilters = (map: NextQueryMap, query: Record<string, string | string[] | undefined>): Filters => {
   const result = {}
   Object.entries(map).forEach((entry) => {
     result[entry[0]] = query[entry[1] as string]
@@ -18,7 +19,7 @@ const mapQueryParamsToFilters = (map: NextQueryMap, query: ParsedUrlQuery): Filt
 
 const mapQueryParamsToOptions = (
   map: NextQueryMap,
-  query: ParsedUrlQuery
+  query: Record<string, string | string[] | undefined>
 ): OcProductListOptions => {
   const { search, page, pageSize, searchOn, sortBy, ...rest } = map
   const searchOnValue = query[searchOn]
@@ -36,12 +37,12 @@ const mapQueryParamsToOptions = (
 const mapOptionsToQueryParams = (
   map: NextQueryMap,
   options: OcProductListOptions
-): ParsedUrlQuery => {
+): Record<string, string> => {
   const result = {}
   Object.entries(options).forEach((entry) => {
     if (entry[0] === 'filters' || entry[1] === undefined || entry[1] === '') return
     result[map[entry[0]]] =
-      typeof entry[1] === 'object' ? encodeURIComponent(entry[1].join(',')) : String(entry[1])
+      typeof entry[1] === 'object' ? encodeURIComponent((entry[1] as string[]).join(',')) : String(entry[1])
   })
   const filterResults = options.filters ? mapOptionsToQueryParams(map, options.filters) : {}
   return { ...result, ...filterResults }
@@ -50,11 +51,21 @@ const mapOptionsToQueryParams = (
 const useNextRouterMapping = (
   map: NextQueryMap
 ): {
-  isReady: boolean
   options: OcProductListOptions
   updateQuery: (options: OcProductListOptions) => void
 } => {
-  const { isReady, query, push, pathname } = useRouter()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const query = useMemo(() => {
+    const obj: Record<string, string | string[] | undefined> = {}
+    searchParams.forEach((value, key) => {
+      const all = searchParams.getAll(key)
+      obj[key] = all.length > 1 ? all : value
+    })
+    return obj
+  }, [searchParams])
 
   const options = useMemo(() => {
     const result = mapQueryParamsToOptions(map, query)
@@ -63,16 +74,18 @@ const useNextRouterMapping = (
 
   const updateQuery = useCallback(
     (o: OcProductListOptions) => {
-      push({
-        pathname,
-        query: mapOptionsToQueryParams(map, o),
-      }) // map options to query params
+      const q = mapOptionsToQueryParams(map, o)
+      const searchString = Object.entries(q)
+        .filter((entry) => entry[1] !== undefined && entry[1] !== null && entry[1] !== '')
+        .map((entry) => `${entry[0]}=${entry[1]}`)
+        .join('&')
+      
+      router.push(searchString ? `${pathname}?${searchString}` : pathname)
     },
-    [push, pathname, map]
+    [router, pathname, map]
   )
 
   return {
-    isReady,
     options,
     updateQuery,
   }
diff --git a/ordercloud/redux/ocAddressBook/index.ts b/ordercloud/redux/ocAddressBook/index.ts
index 31628c2..e3959ca 100644
--- a/ordercloud/redux/ocAddressBook/index.ts
+++ b/ordercloud/redux/ocAddressBook/index.ts
@@ -1,7 +1,7 @@
 import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'
 import { BuyerAddress, ListPage, Me, RequiredDeep } from 'ordercloud-javascript-sdk'
 import { OcAddressListOptions } from '../../hooks/useOcAddressBook'
-import { createOcAsyncThunk, OcThrottle } from '../ocReduxHelpers'
+import { createOcAsyncThunk } from '../ocReduxHelpers'
 import { OcRootState } from '../ocStore'
 
 export const EMPTY_ADDRESS: Partial<BuyerAddress> = {
@@ -31,14 +31,14 @@ export const ocAddressBookSelectors = ocBuyerAddressAdapter.getSelectors<OcRootS
 export const listAddresses = createOcAsyncThunk<
   ListPage<RequiredDeep<BuyerAddress>>,
   OcAddressListOptions
->('ocAddressBook/list', async (options, thunkAPI) => {
+>('ocAddressBook/list', async (options) => {
   const response = await Me.ListAddresses(options)
   return response
 })
 
 export const saveAddress = createOcAsyncThunk<RequiredDeep<BuyerAddress>, BuyerAddress>(
   'ocAddressBook/save',
-  async (address, thunkAPI) => {
+  async (address) => {
     if (address.ID) {
       return Me.SaveAddress(address.ID, address)
     }
@@ -48,7 +48,7 @@ export const saveAddress = createOcAsyncThunk<RequiredDeep<BuyerAddress>, BuyerA
 
 export const deleteAddress = createOcAsyncThunk<string, string>(
   'ocAddressBook/delete',
-  async (addressId, thunkAPI) => {
+  async (addressId) => {
     await Me.DeleteAddress(addressId)
     return addressId
   }
diff --git a/ordercloud/redux/ocAuth/index.ts b/ordercloud/redux/ocAuth/index.ts
index 805a155..34530e7 100644
--- a/ordercloud/redux/ocAuth/index.ts
+++ b/ordercloud/redux/ocAuth/index.ts
@@ -1,5 +1,5 @@
 import { createSlice, SerializedError } from '@reduxjs/toolkit'
-import { Configuration, DecodedToken, Tokens } from 'ordercloud-javascript-sdk'
+import { DecodedToken, Tokens } from 'ordercloud-javascript-sdk'
 import parseJwt from '../../utils/parseJwt'
 import login from './login'
 import logout from './logout'
diff --git a/ordercloud/redux/ocCurrentOrder/index.ts b/ordercloud/redux/ocCurrentOrder/index.ts
index de02f5c..3c47da7 100644
--- a/ordercloud/redux/ocCurrentOrder/index.ts
+++ b/ordercloud/redux/ocCurrentOrder/index.ts
@@ -7,15 +7,14 @@ import {
   Me,
   Order,
   Orders,
-  ShipEstimateResponse,
-  IntegrationEvents,
   RequiredDeep,
   ShipMethodSelection,
   OrderWorksheet,
   Payment,
   Payments,
+  IntegrationEvents,
+  ShipEstimateResponse,
 } from 'ordercloud-javascript-sdk'
-import { EMPTY_ADDRESS } from '../ocAddressBook'
 import { createOcAsyncThunk } from '../ocReduxHelpers'
 
 export interface RecentOrder {
@@ -40,9 +39,9 @@ const initialState: OcCurrentOrderState = {
 
 export const removeAllPayments = createOcAsyncThunk<undefined, undefined>(
   'ocCurrentOrder/removeAllPayments',
-  async (paymentId, ThunkAPI) => {
+  async (_, ThunkAPI) => {
     const { ocCurrentOrder } = ThunkAPI.getState()
-    const queue: Promise<any>[] = []
+    const queue: Promise<unknown>[] = []
     if (ocCurrentOrder.payments) {
       ocCurrentOrder.payments.forEach((p) => {
         queue.push(Payments.Delete('Outgoing', ocCurrentOrder.order.ID, p.ID))
@@ -55,7 +54,7 @@ export const removeAllPayments = createOcAsyncThunk<undefined, undefined>(
 
 export const retrievePayments = createOcAsyncThunk<RequiredDeep<Payment>[], string>(
   'ocCurrentOrder/retrievePayments',
-  async (orderId, ThunkAPI) => {
+  async (orderId) => {
     const response = await Payments.List('Outgoing', orderId, { pageSize: 100 })
     return response.Items
   }
@@ -132,10 +131,6 @@ export const updateLineItem = createOcAsyncThunk<RequiredDeep<OrderWorksheet>, L
     const { ocCurrentOrder } = ThunkAPI.getState()
     const orderId = ocCurrentOrder.order ? ocCurrentOrder.order.ID : undefined
 
-    // what to do when order doesn't exist? shouldn't happen.. but it could!
-    // if (!orderId) {
-    // }
-
     // save the line item
     await LineItems.Save('Outgoing', orderId, request.ID, request)
 
@@ -149,10 +144,6 @@ export const removeLineItem = createOcAsyncThunk<RequiredDeep<OrderWorksheet>, s
     const { ocCurrentOrder } = ThunkAPI.getState()
     const orderId = ocCurrentOrder.order ? ocCurrentOrder.order.ID : undefined
 
-    // what to do when order doesn't exist? shouldn't happen.. but it could!
-    // if (!orderId) {
-    // }
-
     // save the line item
     await LineItems.Delete('Outgoing', orderId, request)
 
@@ -187,9 +178,6 @@ export const saveBillingAddress = createOcAsyncThunk<
   const { ocCurrentOrder } = ThunkAPI.getState()
   const orderId = ocCurrentOrder.order ? ocCurrentOrder.order.ID : undefined
 
-  // what to do when order doesn't exist? shouldn't happen.. but it could!
-  // if (!orderId) {
-  // }
   if (request.ID) {
     await Orders.Patch('Outgoing', orderId, { BillingAddressID: request.ID })
   } else {
@@ -202,14 +190,10 @@ export const saveBillingAddress = createOcAsyncThunk<
 
 export const removeBillingAddress = createOcAsyncThunk<RequiredDeep<OrderWorksheet>, undefined>(
   'ocCurrentOrder/removeBillingAddress',
-  async (request, ThunkAPI) => {
+  async (_, ThunkAPI) => {
     const { ocCurrentOrder } = ThunkAPI.getState()
     const { order } = ocCurrentOrder
 
-    // what to do when order doesn't exist? shouldn't happen.. but it could!
-    // if (!orderId) {
-    // }
-
     await Orders.Patch('Outgoing', order.ID, { BillingAddressID: null })
     ThunkAPI.dispatch(removeAllPayments())
 
@@ -219,7 +203,7 @@ export const removeBillingAddress = createOcAsyncThunk<RequiredDeep<OrderWorkshe
 
 export const estimateShipping = createOcAsyncThunk<RequiredDeep<OrderWorksheet>, string>(
   'ocCurrentOrder/estimateShipping',
-  async (orderId, ThunkAPI) => {
+  async (orderId) => {
     const response = await IntegrationEvents.EstimateShipping('Outgoing', orderId)
     return response
   }
@@ -257,7 +241,7 @@ export const removePayment = createOcAsyncThunk<string, string>(
   }
 )
 
-export const submitOrder = createOcAsyncThunk<RecentOrder, any>(
+export const submitOrder = createOcAsyncThunk<RecentOrder, (orderId: string) => void>(
   'ocCurrentOrder/submit',
   async (onSubmitted, ThunkAPI) => {
     const { ocCurrentOrder } = ThunkAPI.getState()
@@ -349,7 +333,7 @@ const ocCurrentOrderSlice = createSlice({
     builder.addCase(removePayment.fulfilled, (state, action) => {
       state.payments = state.payments.filter((p) => p.ID !== action.payload)
     })
-    builder.addCase(removeAllPayments.fulfilled, (state, action) => {
+    builder.addCase(removeAllPayments.fulfilled, (state) => {
       state.payments = []
     })
     builder.addCase(submitOrder.fulfilled, (state, action) => {
diff --git a/ordercloud/redux/ocProvider.tsx b/ordercloud/redux/ocProvider.tsx
index 14a4f0d..0268120 100644
--- a/ordercloud/redux/ocProvider.tsx
+++ b/ordercloud/redux/ocProvider.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { isEqual } from 'lodash'
 import { FunctionComponent, useEffect } from 'react'
 import { Provider } from 'react-redux'
@@ -12,7 +14,7 @@ interface OcProviderProps {
   config: OcConfig
 }
 
-const OcInitializer: FunctionComponent<OcProviderProps> = ({ children, config }) => {
+const OcInitializer: FunctionComponent<OcProviderProps & { children: React.ReactNode }> = ({ children, config }) => {
   const dispatch = useOcDispatch()
   const { ocConfig, ocAuth, ocUser, ocCurrentOrder } = useOcSelector((s) => ({
     ocConfig: s.ocConfig,
@@ -44,7 +46,7 @@ const OcInitializer: FunctionComponent<OcProviderProps> = ({ children, config })
   return <>{children}</>
 }
 
-const OcProvider: FunctionComponent<OcProviderProps> = ({ children, config }) => {
+const OcProvider: FunctionComponent<OcProviderProps & { children: React.ReactNode }> = ({ children, config }) => {
   return (
     <Provider store={ocStore}>
       <OcInitializer config={config}>{children}</OcInitializer>
diff --git a/ordercloud/redux/ocReduxHelpers.ts b/ordercloud/redux/ocReduxHelpers.ts
index bace561..ab36aec 100644
--- a/ordercloud/redux/ocReduxHelpers.ts
+++ b/ordercloud/redux/ocReduxHelpers.ts
@@ -26,7 +26,7 @@ export function createOcAsyncThunk<Returned, ThunkArg = void>(
     typePrefix,
     async (args, thunkAPI) => {
       try {
-        return await payloadCreator(args, thunkAPI) as any
+        return (await payloadCreator(args, thunkAPI)) as Returned
       } catch (err) {
         if (err.isOrderCloudError) {
           switch (err.status) {
diff --git a/package.json b/package.json
index 341ca47..e2bc14f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "headstart-nextjs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -13,20 +13,22 @@
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.2.0",
     "lodash": "^4.17.21",
-    "next": "12.2.0",
+    "next": "^15.3.3",
     "ordercloud-javascript-sdk": "^5.0.10",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^7.2.3"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-redux": "^9.2.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.168",
-    "@types/node": "^14.14.37",
-    "@types/react": "^17.0.3",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^6.4.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^8.47.0",
+    "eslint-config-next": "^15.3.3",
     "postcss": ">=8.2.10",
     "prettier": "^2.2.1",
     "typescript": "^5.1.6"
diff --git a/pages/_app.tsx b/pages/_app.tsx
deleted file mode 100644
index 8f0ac86..0000000
--- a/pages/_app.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { AppProps } from 'next/app'
-import { ApiRole } from 'ordercloud-javascript-sdk'
-import Layout from '../components/Layout'
-import OcProvider from '../ordercloud/redux/ocProvider'
-import '../styles/globals.css'
-
-const clientId = process.env.NEXT_PUBLIC_OC_CLIENT_ID || ''
-const scope = process.env.NEXT_PUBLIC_OC_SCOPE
-  ? (process.env.NEXT_PUBLIC_OC_SCOPE.split(',') as ApiRole[])
-  : []
-const baseApiUrl = process.env.NEXT_PUBLIC_OC_BASE_API_URL
-const allowAnonymous = Boolean(process.env.NEXT_PUBLIC_OC_ALLOW_ANONYMOUS)
-
-function MyApp({ Component, pageProps }: AppProps): JSX.Element {
-  return (
-    <OcProvider
-      config={{
-        clientId,
-        scope,
-        baseApiUrl,
-        allowAnonymous,
-        cookieOptions: {
-          prefix: 'hds-nextjs',
-          path: '/',
-        },
-      }}
-    >
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </OcProvider>
-  )
-}
-
-export default MyApp
diff --git a/pages/api/checkout/shippingrates.ts b/pages/api/checkout/shippingrates.ts
deleted file mode 100644
index 3c68270..0000000
--- a/pages/api/checkout/shippingrates.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { NextApiHandler } from 'next'
-import { ShipEstimateResponse } from 'ordercloud-javascript-sdk'
-import { OrderCheckoutIntegrationEvent } from './ordercalculate'
-import { withOcWebhookAuth } from '@ordercloud/catalyst'
-
-// withOCWebhookAuth needs the raw body in order to validate the payload is coming from ordercloud
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};
-
-const ShippingRatesHandler: NextApiHandler<ShipEstimateResponse> = (req, res) => {
-  /**
-   * OrderCloud API will pass the OrderWorksheet to the /shippingrates middleware
-   * within the request body. Use this information to calculate shipment estimate groups.
-   * In this example we are not using a third party shipping service. It assumes
-   * all LineItems are in a single ShipEstimate, and the 3 different shipping options
-   * are provided at a fixed rate.
-   * */
-  const event = req.body as OrderCheckoutIntegrationEvent
-
-  res.status(200).send({
-    ShipEstimates: [
-      {
-        ID: 'test',
-        ShipEstimateItems: event.OrderWorksheet.LineItems.map((li) => ({
-          LineItemID: li.ID,
-          Quantity: li.Quantity,
-        })),
-        ShipMethods: [
-          {
-            ID: '1day',
-            Name: 'Next Day Shipping',
-            Cost: 50,
-            EstimatedTransitDays: 1,
-          },
-          {
-            ID: '2day',
-            Name: 'Two Day Shipping',
-            Cost: 25,
-            EstimatedTransitDays: 2,
-          },
-          {
-            ID: 'standard',
-            Name: 'Standard Shipping',
-            Cost: 12,
-            EstimatedTransitDays: 5,
-          },
-        ],
-      },
-    ],
-  })
-}
-
-export default withOcWebhookAuth(ShippingRatesHandler)
diff --git a/pages/confirmation/[orderid].tsx b/pages/confirmation/[orderid].tsx
deleted file mode 100644
index 681f2d4..0000000
--- a/pages/confirmation/[orderid].tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import { FunctionComponent } from 'react'
-import OcOrderConfirmation from '../../ordercloud/components/OcOrderConfirmation'
-
-const OrderConfirmationPage: FunctionComponent = () => {
-  const { isReady, query } = useRouter()
-
-  return (
-    <>
-      <Head>
-        <title>Order Confirmed</title>
-      </Head>
-      {isReady ? <OcOrderConfirmation orderId={query.orderid as string} /> : <h1>Loading</h1>}
-    </>
-  )
-}
-
-export default OrderConfirmationPage
diff --git a/pages/products/[productid].tsx b/pages/products/[productid].tsx
deleted file mode 100644
index 5970e94..0000000
--- a/pages/products/[productid].tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Head from 'next/head'
-import { useRouter } from 'next/router'
-import { FunctionComponent } from 'react'
-import OcProductDetail from '../../ordercloud/components/OcProductDetail'
-import { useOcSelector } from '../../ordercloud/redux/ocStore'
-
-const ProductPage: FunctionComponent = () => {
-  const { isReady, query, push } = useRouter()
-
-  const productName = useOcSelector(
-    (s) => s.ocProductDetail.product && s.ocProductDetail.product.Name
-  )
-
-  const handleLineItemUpdated = () => {
-    push('/cart')
-  }
-
-  return (
-    <>
-      <Head>
-        <title>{productName}</title>
-      </Head>
-      {isReady ? (
-        <OcProductDetail
-          onLineItemUpdated={handleLineItemUpdated}
-          productId={query.productid as string}
-          lineItemId={query.lineitem as string}
-        />
-      ) : (
-        <h1>Loading</h1>
-      )}
-    </>
-  )
-}
-
-export default ProductPage
diff --git a/tsconfig.json b/tsconfig.json
index 5bee8c4..5119663 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,30 +1,24 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
-    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }