Merge pull request #2 from Mohmdev/upgrade/nextjs-15

Upgrade/nextjs 15

next.config.mjs

@@ -8,18 +8,9 @@ checkEnvVariables()
 const nextConfig = {
   reactStrictMode: true,
   experimental: {
-    turbo: {
-      rules: {
-        "*.scss": {
-          loaders: ["sass-loader"],
-        },
-      },
-    },
+    reactCompiler: true,
     scrollRestoration: true,
   },
-  sassOptions: {
-    silenceDeprecations: ["legacy-js-api"],
-  },
   images: {
     unoptimized: false,
     remotePatterns: [

package.json

@@ -8,7 +8,7 @@
     "medusa-storefront"
   ],
   "scripts": {
-    "dev": "next dev -p 8000",
+    "dev": "next dev --turbopack -p 8000",
     "build": "next build",
     "start": "next start -p 8000",
     "lint": "next lint",
@@ -18,7 +18,7 @@
     "update-deps": "pnpm store prune && node scripts/clean.js && pnpm i"
   },
   "dependencies": {
-    "@headlessui/react": "^1.6.1",
+    "@headlessui/react": "^2.2.0",
     "@hookform/error-message": "^2.0.0",
     "@medusajs/js-sdk": "latest",
     "@medusajs/ui": "latest",
@@ -32,11 +32,12 @@
     "@types/pg": "^8.11.0",
     "autoprefixer": "^10.4.2",
     "axios": "^1.6.7",
+    "babel-plugin-react-compiler": "19.0.0-beta-63b359f-20241101",
     "lodash": "^4.17.21",
-    "next": "^14.0.0",
-    "react": "^18.2.0",
-    "react-country-flag": "^3.0.2",
-    "react-dom": "^18.2.0",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-country-flag": "^3.1.0",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-instantsearch-hooks-web": "^6.29.0",
     "react-intersection-observer": "^9.3.4",
     "server-only": "^0.0.1",
@@ -52,12 +53,12 @@
     "@medusajs/types": "latest",
     "@playwright/test": "^1.41.1",
     "@types/node": "17.0.21",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
     "@types/react-instantsearch-dom": "^6.12.3",
     "babel-loader": "^8.2.3",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.0.3",
+    "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.1",

src/app/[countryCode]/(main)/account/@dashboard/addresses/page.tsx

@@ -1,5 +1,4 @@
 import { Metadata } from "next"
-import { headers } from "next/headers"
 import { notFound } from "next/navigation"
 import { getCustomer } from "@lib/data/customer"
 import { getRegion } from "@lib/data/regions"
@@ -10,11 +9,10 @@ export const metadata: Metadata = {
   description: "View your addresses",
 }
 
-export default async function Addresses({
-  params,
-}: {
-  params: { countryCode: string }
+export default async function Addresses(props: {
+  params: Promise<{ countryCode: string }>
 }) {
+  const params = await props.params
   const { countryCode } = params
   const customer = await getCustomer()
   const region = await getRegion(countryCode)

src/app/[countryCode]/(main)/account/@dashboard/orders/details/[id]/page.tsx

@@ -6,7 +6,7 @@ import { HttpTypes } from "@medusajs/types"
 import OrderDetailsTemplate from "@modules/order/templates/order-details-template"
 
 type Props = {
-  params: { id: string }
+  params: Promise<{ id: string }>
 }
 
 async function getOrder(id: string) {
@@ -24,7 +24,8 @@ async function getOrder(id: string) {
   } as unknown as HttpTypes.StoreOrder
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
   const order = await getOrder(params.id).catch(() => null)
 
   if (!order) {
@@ -37,7 +38,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   }
 }
 
-export default async function OrderDetailPage({ params }: Props) {
+export default async function OrderDetailPage(props: Props) {
+  const params = await props.params
   const order = await getOrder(params.id).catch(() => null)
 
   if (!order) {

src/app/[countryCode]/(main)/categories/[...category]/page.tsx

@@ -7,11 +7,11 @@ import CategoryTemplate from "@modules/categories/templates"
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
 
 type Props = {
-  params: { category: string[]; countryCode: string }
-  searchParams: {
+  params: Promise<{ category: string[]; countryCode: string }>
+  searchParams: Promise<{
     sortBy?: SortOptions
     page?: string
-  }
+  }>
 }
 
 export async function generateStaticParams() {
@@ -41,7 +41,8 @@ export async function generateStaticParams() {
   return staticParams
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
   try {
     const { product_categories } = await getCategoryByHandle(params.category)
 
@@ -65,7 +66,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   }
 }
 
-export default async function CategoryPage({ params, searchParams }: Props) {
+export default async function CategoryPage(props: Props) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   const { sortBy, page } = searchParams
 
   const { product_categories } = await getCategoryByHandle(params.category)

src/app/[countryCode]/(main)/collections/[handle]/page.tsx

@@ -10,11 +10,11 @@ import CollectionTemplate from "@modules/collections/templates"
 import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
 
 type Props = {
-  params: { handle: string; countryCode: string }
-  searchParams: {
+  params: Promise<{ handle: string; countryCode: string }>
+  searchParams: Promise<{
     page?: string
     sortBy?: SortOptions
-  }
+  }>
 }
 
 export const PRODUCT_LIMIT = 12
@@ -50,7 +50,8 @@ export async function generateStaticParams() {
   return staticParams
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
   const collection = await getCollectionByHandle(params.handle)
 
   if (!collection) {
@@ -65,7 +66,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   return metadata
 }
 
-export default async function CollectionPage({ params, searchParams }: Props) {
+export default async function CollectionPage(props: Props) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   const { sortBy, page } = searchParams
 
   const collection = await getCollectionByHandle(params.handle).then(

src/app/[countryCode]/(main)/order/confirmed/[id]/page.tsx

@@ -6,7 +6,7 @@ import type { HttpTypes } from "@medusajs/types"
 import OrderCompletedTemplate from "@modules/order/templates/order-completed-template"
 
 type Props = {
-  params: { id: string }
+  params: Promise<{ id: string }>
 }
 
 async function getOrder(id: string) {
@@ -29,7 +29,8 @@ export const metadata: Metadata = {
   description: "You purchase was successful",
 }
 
-export default async function OrderConfirmedPage({ params }: Props) {
+export default async function OrderConfirmedPage(props: Props) {
+  const params = await props.params
   const order = await getOrder(params.id)
   if (!order) {
     return notFound()

src/app/[countryCode]/(main)/page.tsx

@@ -10,11 +10,13 @@ export const metadata: Metadata = {
     "A performant frontend ecommerce starter template with Next.js 14 and Medusa.",
 }
 
-export default async function Home({
-  params: { countryCode },
-}: {
-  params: { countryCode: string }
+export default async function Home(props: {
+  params: Promise<{ countryCode: string }>
 }) {
+  const params = await props.params
+
+  const { countryCode } = params
+
   const collections = await getCollectionsWithProducts(countryCode)
   const region = await getRegion(countryCode)
 

src/app/[countryCode]/(main)/products/[handle]/page.tsx

@@ -6,7 +6,7 @@ import { getRegion, listRegions } from "@lib/data/regions"
 import ProductTemplate from "@modules/products/templates"
 
 type Props = {
-  params: { countryCode: string; handle: string }
+  params: Promise<{ countryCode: string; handle: string }>
 }
 
 export async function generateStaticParams() {
@@ -43,7 +43,8 @@ export async function generateStaticParams() {
   }
 }
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
   const { handle } = params
   const region = await getRegion(params.countryCode)
 
@@ -68,7 +69,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   }
 }
 
-export default async function ProductPage({ params }: Props) {
+export default async function ProductPage(props: Props) {
+  const params = await props.params
   const region = await getRegion(params.countryCode)
 
   if (!region) {

src/app/[countryCode]/(main)/results/[query]/page.tsx

@@ -9,14 +9,16 @@ export const metadata: Metadata = {
 }
 
 type Params = {
-  params: { query: string; countryCode: string }
-  searchParams: {
+  params: Promise<{ query: string; countryCode: string }>
+  searchParams: Promise<{
     sortBy?: SortOptions
     page?: string
-  }
+  }>
 }
 
-export default async function SearchResults({ params, searchParams }: Params) {
+export default async function SearchResults(props: Params) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   const { query } = params
   const { sortBy, page } = searchParams
 

src/app/[countryCode]/(main)/store/page.tsx

@@ -8,16 +8,18 @@ export const metadata: Metadata = {
 }
 
 type Params = {
-  searchParams: {
+  searchParams: Promise<{
     sortBy?: SortOptions
     page?: string
-  }
-  params: {
+  }>
+  params: Promise<{
     countryCode: string
-  }
+  }>
 }
 
-export default async function StorePage({ searchParams, params }: Params) {
+export default async function StorePage(props: Params) {
+  const params = await props.params
+  const searchParams = await props.searchParams
   const { sortBy, page } = searchParams
 
   return (

src/lib/data/cookies.ts

@@ -1,8 +1,10 @@
 import "server-only"
-import { cookies } from "next/headers"
+import { cookies, type UnsafeUnwrappedCookies } from "next/headers"
 
 export const getAuthHeaders = (): { authorization: string } | {} => {
-  const token = cookies().get("_medusa_jwt")?.value
+  const token = (cookies() as unknown as UnsafeUnwrappedCookies).get(
+    "_medusa_jwt"
+  )?.value
 
   if (token) {
     return { authorization: `Bearer ${token}` }
@@ -12,7 +14,7 @@ export const getAuthHeaders = (): { authorization: string } | {} => {
 }
 
 export const setAuthToken = (token: string) => {
-  cookies().set("_medusa_jwt", token, {
+  ;(cookies() as unknown as UnsafeUnwrappedCookies).set("_medusa_jwt", token, {
     maxAge: 60 * 60 * 24 * 7,
     httpOnly: true,
     sameSite: "strict",
@@ -21,24 +23,31 @@ export const setAuthToken = (token: string) => {
 }
 
 export const removeAuthToken = () => {
-  cookies().set("_medusa_jwt", "", {
+  ;(cookies() as unknown as UnsafeUnwrappedCookies).set("_medusa_jwt", "", {
     maxAge: -1,
   })
 }
 
 export const getCartId = () => {
-  return cookies().get("_medusa_cart_id")?.value
+  return (cookies() as unknown as UnsafeUnwrappedCookies).get("_medusa_cart_id")
+    ?.value
 }
 
 export const setCartId = (cartId: string) => {
-  cookies().set("_medusa_cart_id", cartId, {
-    maxAge: 60 * 60 * 24 * 7,
-    httpOnly: true,
-    sameSite: "strict",
-    secure: process.env.NODE_ENV === "production",
-  })
+  ;(cookies() as unknown as UnsafeUnwrappedCookies).set(
+    "_medusa_cart_id",
+    cartId,
+    {
+      maxAge: 60 * 60 * 24 * 7,
+      httpOnly: true,
+      sameSite: "strict",
+      secure: process.env.NODE_ENV === "production",
+    }
+  )
 }
 
 export const removeCartId = () => {
-  cookies().set("_medusa_cart_id", "", { maxAge: -1 })
+  ;(cookies() as unknown as UnsafeUnwrappedCookies).set("_medusa_cart_id", "", {
+    maxAge: -1,
+  })
 }

src/lib/data/onboarding.ts

@@ -4,6 +4,6 @@ import { cookies } from "next/headers"
 import { redirect } from "next/navigation"
 
 export async function resetOnboardingState(orderId: string) {
-  cookies().set("_medusa_onboarding", "false", { maxAge: -1 })
+  ;(await cookies()).set("_medusa_onboarding", "false", { maxAge: -1 })
   redirect(`http://localhost:7001/a/orders/${orderId}`)
 }

src/lib/hooks/use-in-view.tsx

@@ -1,7 +1,7 @@
 import { RefObject, useEffect, useState } from "react"
 
 export const useIntersection = (
-  element: RefObject<HTMLDivElement>,
+  element: RefObject<HTMLDivElement | null>,
   rootMargin: string
 ) => {
   const [isVisible, setState] = useState(false)