Upgraded to Next 15; Fixes: hydration warning, checkout button disabled upon logging in

Author: rajat1saxena

apps/web/app/(with-contexts)/(with-layout)/blog/[slug]/[id]/layout.tsx

@@ -2,14 +2,16 @@ import type { Metadata, ResolvingMetadata } from "next";
 import { ReactNode } from "react";
 import { FetchBuilder } from "@courselit/utils";
 import { headers } from "next/headers";
-import { getAddressFromHeaders, getSiteInfo } from "@ui-lib/utils";
+import { getSiteInfo } from "@ui-lib/utils";
 import { Course } from "@courselit/common-models";
+import { getAddressFromHeaders } from "@/app/actions";
 
 export async function generateMetadata(
-    { params }: { params: { id: string } },
+    props: { params: Promise<{ id: string }> },
     parent: ResolvingMetadata,
 ): Promise<Metadata> {
-    const address = getAddressFromHeaders(headers);
+    const params = await props.params;
+    const address = await getAddressFromHeaders(headers);
     const [product, siteInfo] = await Promise.all([
         getProduct(params.id, address),
         getSiteInfo(address),

apps/web/app/(with-contexts)/(with-layout)/blog/[slug]/[id]/page.tsx

@@ -1,7 +1,7 @@
 import { Course } from "@courselit/common-models";
 import { Caption, Header1, Section, Text1 } from "@courselit/page-primitives";
 import { formattedLocaleDate, getFullSiteSetup } from "@ui-lib/utils";
-import { getAddressFromHeaders } from "@ui-lib/utils";
+import { getAddressFromHeaders } from "@/app/actions";
 import { headers } from "next/headers";
 import { ProductWithAdminProps } from "@/hooks/use-product";
 import { FetchBuilder } from "@courselit/utils";
@@ -19,13 +19,12 @@ import {
     BreadcrumbSeparator,
 } from "@components/ui/breadcrumb";
 
-export default async function ProductPage({
-    params,
-}: {
-    params: { slug: string; id: string };
+export default async function ProductPage(props: {
+    params: Promise<{ slug: string; id: string }>;
     course: Course;
 }) {
-    const address = getAddressFromHeaders(headers);
+    const params = await props.params;
+    const address = await getAddressFromHeaders(headers);
     const [product, siteInfo] = await Promise.all([
         getProduct(address, params.id),
         getFullSiteSetup(address),

apps/web/app/(with-contexts)/(with-layout)/layout.tsx

@@ -2,14 +2,15 @@ import { auth } from "@/auth";
 import { SessionProvider } from "next-auth/react";
 import HomepageLayout from "./home-page-layout";
 import { headers } from "next/headers";
-import { getAddressFromHeaders, getFullSiteSetup } from "@ui-lib/utils";
+import { getFullSiteSetup } from "@ui-lib/utils";
+import { getAddressFromHeaders } from "@/app/actions";
 
 export default async function Layout({
     children,
 }: {
     children: React.ReactNode;
 }) {
-    const address = getAddressFromHeaders(headers);
+    const address = await getAddressFromHeaders(headers);
     const [siteInfo, session] = await Promise.all([
         getFullSiteSetup(address),
         auth(),

apps/web/app/(with-contexts)/(with-layout)/p/[id]/page.tsx

@@ -1,22 +1,23 @@
 import { getFullSiteSetup, getPage } from "@ui-lib/utils";
-import { getAddressFromHeaders } from "@/ui-lib/utils";
+import { getAddressFromHeaders } from "@/app/actions";
 import ClientSidePage from "./client-side-page";
 import { headers } from "next/headers";
 import type { Metadata, ResolvingMetadata } from "next";
 import { Media } from "@courselit/common-models";
 import { notFound } from "next/navigation";
 
 type Props = {
-    params: {
+    params: Promise<{
         id: string;
-    };
+    }>;
 };
 
 export async function generateMetadata(
-    { params }: Props,
+    props: Props,
     parent: ResolvingMetadata,
 ): Promise<Metadata> {
-    const address = getAddressFromHeaders(headers);
+    const params = await props.params;
+    const address = await getAddressFromHeaders(headers);
     const [siteInfo, page] = await Promise.all([
         getFullSiteSetup(address),
         getPage(address, params.id),
@@ -73,8 +74,9 @@ export async function generateMetadata(
     };
 }
 
-export default async function Page({ params }: Props) {
-    const address = getAddressFromHeaders(headers);
+export default async function Page(props: Props) {
+    const params = await props.params;
+    const address = await getAddressFromHeaders(headers);
     const [siteInfo, page] = await Promise.all([
         getFullSiteSetup(address),
         getPage(address, params.id),

apps/web/app/(with-contexts)/(with-layout)/page.tsx

@@ -1,5 +1,5 @@
 import { getFullSiteSetup } from "@ui-lib/utils";
-import { getAddressFromHeaders } from "@/ui-lib/utils";
+import { getAddressFromHeaders } from "@/app/actions";
 import ClientSidePage from "./p/[id]/client-side-page";
 import { headers } from "next/headers";
 import type { Metadata, ResolvingMetadata } from "next";
@@ -14,7 +14,7 @@ export async function generateMetadata(
     { params }: Props,
     parent: ResolvingMetadata,
 ): Promise<Metadata> {
-    const address = getAddressFromHeaders(headers);
+    const address = await getAddressFromHeaders(headers);
     const siteInfo = await getFullSiteSetup(address, "homepage");
     if (!siteInfo) {
         return {
@@ -62,7 +62,7 @@ export async function generateMetadata(
 }
 
 export default async function Page() {
-    const address = getAddressFromHeaders(headers);
+    const address = await getAddressFromHeaders(headers);
     const siteInfo = await getFullSiteSetup(address, "homepage");
     if (!siteInfo) {
         return null;

apps/web/app/(with-contexts)/course/[slug]/[id]/[lesson]/page.tsx

@@ -2,19 +2,18 @@
 
 import { LessonViewer } from "@components/public/lesson-viewer";
 import { redirect } from "next/navigation";
-import { useContext } from "react";
+import { useContext, use } from "react";
 import { ProfileContext, AddressContext } from "@components/contexts";
 import { Profile } from "@courselit/common-models";
 
-export default function LessonPage({
-    params,
-}: {
-    params: {
+export default function LessonPage(props: {
+    params: Promise<{
         slug: string;
         id: string;
         lesson: string;
-    };
+    }>;
 }) {
+    const params = use(props.params);
     const { slug, id, lesson } = params;
     const { profile, setProfile } = useContext(ProfileContext);
     const address = useContext(AddressContext);

apps/web/app/(with-contexts)/course/[slug]/[id]/layout.tsx

@@ -1,18 +1,20 @@
 import { auth } from "@/auth";
 import { SessionProvider } from "next-auth/react";
 import { Metadata, ResolvingMetadata } from "next";
-import { getAddressFromHeaders, getFullSiteSetup } from "@ui-lib/utils";
+import { getFullSiteSetup } from "@ui-lib/utils";
 import { headers } from "next/headers";
 import { FetchBuilder } from "@courselit/utils";
 import { notFound } from "next/navigation";
 import LayoutWithSidebar from "./layout-with-sidebar";
 import { getProduct } from "./helpers";
+import { getAddressFromHeaders } from "@/app/actions";
 
 export async function generateMetadata(
-    { params }: { params: { slug: string; id: string } },
+    props: { params: Promise<{ slug: string; id: string }> },
     parent: ResolvingMetadata,
 ): Promise<Metadata> {
-    const address = getAddressFromHeaders(headers);
+    const params = await props.params;
+    const address = await getAddressFromHeaders(headers);
     const siteInfo = await getFullSiteSetup(address);
 
     if (!siteInfo) {
@@ -48,16 +50,17 @@ export async function generateMetadata(
     }
 }
 
-export default async function Layout({
-    children,
-    params,
-}: {
+export default async function Layout(props: {
     children: React.ReactNode;
-    params: { slug: string; id: string };
+    params: Promise<{ slug: string; id: string }>;
 }) {
+    const params = await props.params;
+
+    const { children } = props;
+
     const { id } = params;
     const session = await auth();
-    const address = getAddressFromHeaders(headers);
+    const address = await getAddressFromHeaders(headers);
     const product = await getProduct(id, address);
 
     return (

apps/web/app/(with-contexts)/course/[slug]/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState, use } from "react";
 import { isEnrolled } from "@ui-lib/utils";
 import { ArrowRight } from "@courselit/icons";
 import { COURSE_PROGRESS_START, ENROLL_BUTTON_TEXT } from "@ui-config/strings";
@@ -22,11 +22,10 @@ import {
 import { getProduct } from "./helpers";
 const { permissions } = UIConstants;
 
-export default function ProductPage({
-    params,
-}: {
-    params: { slug: string; id: string };
+export default function ProductPage(props: {
+    params: Promise<{ slug: string; id: string }>;
 }) {
+    const params = use(props.params);
     const { id } = params;
     const [product, setProduct] = useState<any>(null);
     const { profile } = useContext(ProfileContext);

apps/web/app/(with-contexts)/dashboard/(sidebar)/blog/[id]/page.tsx

@@ -27,14 +27,15 @@ import {
 } from "@ui-config/strings";
 import { truncate } from "@ui-lib/utils";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useContext, useState } from "react";
+import { useContext, useState, use } from "react";
 
 const breadcrumbs = [
     { label: MANAGE_BLOG_PAGE_HEADING, href: "/dashboard/blogs" },
     { label: EDIT_BLOG, href: "#" },
 ];
 
-export default function Page({ params }: { params: { id: string } }) {
+export default function Page(props: { params: Promise<{ id: string }> }) {
+    const params = use(props.params);
     const { id } = params;
     const searchParams = useSearchParams();
     const [tab, setTab] = useState(searchParams?.get("tab") || "Details");

apps/web/app/(with-contexts)/dashboard/(sidebar)/community/[id]/manage/memberships/page.tsx

@@ -6,13 +6,12 @@ import {
     COMMUNITY_SETTINGS,
 } from "@ui-config/strings";
 
-export default function Page({
-    params,
-}: {
-    params: {
+export default async function Page(props: {
+    params: Promise<{
         id: string;
-    };
+    }>;
 }) {
+    const params = await props.params;
     const { id } = params;
     const breadcrumbs = [
         {