feat: upgrade to Next.js 15 + React 19

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import isChromatic from "chromatic/isChromatic"
-import { MotionGlobalConfig } from "framer-motion"
+import { MotionGlobalConfig } from "motion/react"
 import { IBM_Plex_Mono, Inter } from "next/font/google"
 import type { Preview } from "@storybook/react"
 

app/[locale]/10years/_components/AdoptionSwiper/lazy.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import dynamic from "next/dynamic"
 
 import Loading from "./loading"

app/[locale]/10years/_components/InnovationSwiper/lazy.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import dynamic from "next/dynamic"
 
 import Loading from "./loading"

app/[locale]/10years/_components/TorchHistorySwiper/lazy.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import dynamic from "next/dynamic"
 
 import Loading from "./loading"

app/[locale]/10years/_components/UserStories/lazy.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import dynamic from "next/dynamic"
 
 import Loading from "./loading"

app/[locale]/10years/page.tsx

@@ -44,7 +44,8 @@ import Curved10YearsText from "@/public/images/10-year-anniversary/10y-torch-hea
 
 const zIndexClasses = ["z-50", "z-40", "z-30", "z-20", "z-10", "z-0"]
 
-const Page = async ({ params }: { params: PageParams }) => {
+const Page = async (props: { params: Promise<PageParams> }) => {
+  const params = await props.params
   const { locale } = params
 
   setRequestLocale(locale)
@@ -375,11 +376,10 @@ const Page = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>
 }) {
+  const params = await props.params
   const { locale } = params
 
   const t = await getTranslations({

app/[locale]/[...slug]/page.tsx

@@ -24,7 +24,8 @@ import { componentsMapping, layoutMapping } from "@/layouts"
 import { getPageData } from "@/lib/md/data"
 import { getMdMetadata } from "@/lib/md/metadata"
 
-export default async function Page({ params }: { params: SlugPageParams }) {
+export default async function Page(props: { params: Promise<SlugPageParams> }) {
+  const params = await props.params
   const { locale, slug: slugArray } = params
 
   // Check if this specific path is in our valid paths
@@ -56,8 +57,6 @@ export default async function Page({ params }: { params: SlugPageParams }) {
   } = await getPageData({
     locale,
     slug,
-    // TODO: Address component typing error here (flip `FC` types to prop object types)
-    // @ts-expect-error Incompatible component function signatures
     baseComponents: mdComponents,
     componentsMapping,
     scope: {
@@ -122,7 +121,10 @@ export async function generateStaticParams() {
   }
 }
 
-export async function generateMetadata({ params }: { params: SlugPageParams }) {
+export async function generateMetadata(props: {
+  params: Promise<SlugPageParams>
+}) {
+  const params = await props.params
   const { locale, slug } = params
 
   try {

app/[locale]/_components/HomepageLazyImports.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import dynamic from "next/dynamic"
+
+import ValuesMarqueeFallback from "@/components/Homepage/ValuesMarquee/Fallback"
+import { Skeleton, SkeletonCardGrid } from "@/components/ui/skeleton"
+
+export const BentoCardSwiper = dynamic(
+  () => import("@/components/Homepage/BentoCardSwiper"),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex flex-col items-center gap-4">
+        <Skeleton className="mx-auto mt-4 h-[476px] w-[512px] max-w-128 rounded-2xl border-primary/10 bg-background bg-gradient-to-b from-primary/10 from-20% to-primary/5 to-60% p-4 opacity-50 shadow-card-hover lg:hidden dark:from-primary/20 dark:to-primary/10" />
+        <Skeleton className="h-6 w-[12rem] rounded-full" />
+      </div>
+    ),
+  }
+)
+
+export const RecentPostsSwiper = dynamic(
+  () => import("@/components/Homepage/RecentPostsSwiper"),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex flex-col items-center gap-4">
+        <SkeletonCardGrid className="mt-4 w-full md:mt-16" />
+        <Skeleton className="h-4 w-20 rounded-full" />
+      </div>
+    ),
+  }
+)
+
+export const ValuesMarquee = dynamic(
+  () => import("@/components/Homepage/ValuesMarquee"),
+  {
+    ssr: false,
+    loading: () => <ValuesMarqueeFallback />,
+  }
+)

app/[locale]/apps/[application]/page.tsx

@@ -47,11 +47,10 @@ import AppsAppJsonLD from "./page-jsonld"
 
 import { getAppsData } from "@/lib/data"
 
-const Page = async ({
-  params,
-}: {
-  params: PageParams & { application: string }
+const Page = async (props: {
+  params: Promise<PageParams & { application: string }>
 }) => {
+  const params = await props.params
   const { locale, application } = params
   setRequestLocale(locale)
 
@@ -403,11 +402,10 @@ const Page = async ({
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string; application: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string; application: string }>
 }) {
+  const params = await props.params
   const { locale, application } = params
 
   // Fetch apps data using the new data-layer function (already cached)

app/[locale]/apps/categories/[catetgoryName]/page.tsx

@@ -46,11 +46,10 @@ const VALID_CATEGORIES = Object.values(AppCategoryEnum)
 const isValidCategory = (category: string): category is AppCategoryEnum =>
   VALID_CATEGORIES.includes(category as AppCategoryEnum)
 
-const Page = async ({
-  params,
-}: {
-  params: PageParams & { catetgoryName: string }
+const Page = async (props: {
+  params: Promise<PageParams & { catetgoryName: string }>
 }) => {
+  const params = await props.params
   const { locale, catetgoryName } = params
   setRequestLocale(locale)
 
@@ -180,11 +179,10 @@ const Page = async ({
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string; catetgoryName: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string; catetgoryName: string }>
 }) {
+  const params = await props.params
   const { locale, catetgoryName } = params
   const t = await getTranslations({ locale, namespace: "page-apps" })
 

app/[locale]/apps/page.tsx

@@ -34,7 +34,8 @@ import AppsJsonLD from "./page-jsonld"
 
 import { getAppsData, getCommunityPicks } from "@/lib/data"
 
-const Page = async ({ params }: { params: PageParams }) => {
+const Page = async (props: { params: Promise<PageParams> }) => {
+  const params = await props.params
   const { locale } = params
 
   setRequestLocale(locale)
@@ -168,11 +169,10 @@ const Page = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>
 }) {
+  const params = await props.params
   const { locale } = params
   const t = await getTranslations({ locale, namespace: "page-apps" })
 

app/[locale]/assets/page.tsx

@@ -16,7 +16,8 @@ import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 import AssetsPage from "./_components/assets"
 import AssetsJsonLD from "./page-jsonld"
 
-export default async function Page({ params }: { params: PageParams }) {
+export default async function Page(props: { params: Promise<PageParams> }) {
+  const params = await props.params
   const { locale } = params
 
   setRequestLocale(locale)
@@ -41,11 +42,10 @@ export default async function Page({ params }: { params: PageParams }) {
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>
 }) {
+  const params = await props.params
   const { locale } = params
 
   const t = await getTranslations({ locale, namespace: "page-assets" })

app/[locale]/bug-bounty/page.tsx

@@ -109,8 +109,9 @@ const sortBountyHuntersFn = (a: BountyHuntersArg, b: BountyHuntersArg) => {
   return b.score - a.score
 }
 
-export default async function Page({ params }: { params: Promise<Params> }) {
-  const { locale } = await params
+export default async function Page(props: { params: Promise<Params> }) {
+  const params = await props.params
+  const { locale } = params
 
   const t = await getTranslations({ namespace: "page-bug-bounty" })
   const tCommon = await getTranslations({ namespace: "common" })
@@ -833,11 +834,10 @@ export default async function Page({ params }: { params: Promise<Params> }) {
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>
 }) {
+  const params = await props.params
   const { locale } = params
 
   const t = await getTranslations({ locale, namespace: "page-bug-bounty" })

app/[locale]/collectibles/_components/Collectibles/lazy.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import dynamic from "next/dynamic"
 
 import Loading from "./loading"

app/[locale]/collectibles/_components/CollectiblesConnectButton/lazy.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import dynamic from "next/dynamic"
 
 import Loading from "./loading"

app/[locale]/collectibles/_components/CollectiblesContent/lazy.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import dynamic from "next/dynamic"
 
 import Loading from "../Collectibles/loading"

app/[locale]/collectibles/_components/CollectiblesProgress/lazy.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import dynamic from "next/dynamic"
 
 import Loading from "./loading"

app/[locale]/collectibles/page.tsx

@@ -30,17 +30,18 @@ const STATS_API = `${COLLECTIBLES_BASE_URL}/api/stats`
 
 // Data fetching
 async function fetchBadges() {
-  const res = await fetch(BADGES_API)
+  const res = await fetch(BADGES_API, { cache: "force-cache" })
   if (!res.ok) throw new Error("Failed to fetch badges")
   return res.json()
 }
 async function fetchStats() {
-  const res = await fetch(STATS_API)
+  const res = await fetch(STATS_API, { cache: "force-cache" })
   if (!res.ok) throw new Error("Failed to fetch stats")
   return res.json()
 }
 
-export default async function Page({ params }: { params: PageParams }) {
+export default async function Page(props: { params: Promise<PageParams> }) {
+  const params = await props.params
   const { locale } = params
   const t = await getTranslations({ locale, namespace: "page-collectibles" })
   setRequestLocale(locale)
@@ -146,11 +147,10 @@ export default async function Page({ params }: { params: PageParams }) {
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>
 }) {
+  const params = await props.params
   const { locale } = params
   const t = await getTranslations({ locale, namespace: "page-collectibles" })
   return await getMetadata({

app/[locale]/community/events/conferences/page.tsx

@@ -23,7 +23,8 @@ import { mapEventTranslations } from "../utils"
 
 import { getEventsData } from "@/lib/data"
 
-const Page = async ({ params }: { params: PageParams }) => {
+const Page = async (props: { params: Promise<PageParams> }) => {
+  const params = await props.params
   const { locale } = params
 
   const _events = (await getEventsData()) ?? []
@@ -134,11 +135,10 @@ const Page = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>
 }) {
+  const params = await props.params
   const { locale } = params
   const t = await getTranslations({
     locale,

app/[locale]/community/events/meetups/page.tsx

@@ -19,7 +19,8 @@ import FilterMeetups from "./_components/FilterMeetups"
 
 import { getEventsData } from "@/lib/data"
 
-const Page = async ({ params }: { params: PageParams }) => {
+const Page = async (props: { params: Promise<PageParams> }) => {
+  const params = await props.params
   const { locale } = params
 
   const _events = (await getEventsData()) ?? []
@@ -76,11 +77,10 @@ const Page = async ({ params }: { params: PageParams }) => {
   )
 }
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { locale: string }
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string }>
 }) {
+  const params = await props.params
   const { locale } = params
   const t = await getTranslations({
     locale,