[BUG-1919] experimental app router updates to next 15 and react 19 (#…

…1994)

* fix(experimental-app-router): Resolve onLogin issue on Vercel deployment (#1919)

* fix(experimental-app-router): Resolve onLogin issue on Vercel deployment - adding one more eslint addition (#1919)

* fix(experimental-app-router): Resolve onLogin issue on Vercel deployment - updating example repo (#1919)

* adding changset

* fix(experimental-app-router): Resolve onLogin issue on Vercel deployment - Adding use server on logout action(#1919)

* Testing on example repo

* Testing on example repo

* (@faustwp/experimental-app-router) Updating example next 15 errors related to awaiting params (1919)

* (@faustwp/experimental-app-router) Updating example next 15 errors related to awaiting params (1919)

* (@faustwp/experimental-app-router) Updating changeset (1919)

* [bug-1919-experimental-app-router] Bumping down next version on example

.changeset/three-singers-roll.md

@@ -0,0 +1,39 @@
+---
+'@faustwp/experimental-app-router': minor
+---
+
+---
+
+## '@faustwp/experimental-app-router': minor
+
+Update @faustwp/experimental-app-router to account for next 15 changes to cookies and update NextResponse import
+
+Notable changes:
+
+- Adding await to all cookies requests as per Next documentation: https://nextjs.org/docs/app/api-reference/functions/cookies
+
+```
+import { cookies } from 'next/headers'
+
+export default async function Page() {
+  const cookieStore = await cookies()
+  const theme = cookieStore.get('theme')
+  return '...'
+}
+```
+
+- Files changed:
+
+  - packages/experimental-app-router/src/server-actions/logoutAction.ts
+  - packages/experimental-app-router/src/server-actions/utils/setRefreshToken.ts
+  - packages/experimental-app-router/src/server/auth/fetchTokens.ts
+  - packages/experimental-app-router/src/server/routeHandler/tokenHandler.ts
+
+- Updated Next App Router example to use latest next version and React 19 RC.
+- Updated Example Login form using React 19s useActionState
+- Updated Awaiting of params for Next 15
+- Files Changed:
+  - examples/next/app-router/app/login/page.tsx
+  - examples/next/app-router/package.json
+  - examples/next/app-router/[slug]hasPreviewProps.ts (made async)
+  - examples/next/app-router/[slug]page.tsx

examples/next/app-router/app/[slug]/hasPreviewProps.ts

@@ -1,3 +1,6 @@
-export function hasPreviewProps(props: any) {
-  return props?.searchParams?.preview === 'true' && !!props?.searchParams?.p;
+export async function hasPreviewProps(props: any) {
+  const { searchParams } = await props;
+  const { preview, p } = await searchParams;
+
+  return preview === 'true' && !!p;
 }

examples/next/app-router/app/[slug]/page.tsx

@@ -4,8 +4,11 @@ import { hasPreviewProps } from './hasPreviewProps';
 import { PleaseLogin } from '@/components/please-login';
 
 export default async function Page(props) {
-  const isPreview = hasPreviewProps(props);
-  const id = isPreview ? props.searchParams.p : props.params.slug;
+  const { searchParams, params } = await props;
+  const { slug } = await params;
+  const { p } = await searchParams;
+  const isPreview = await hasPreviewProps(props);
+  const id = isPreview ? p : slug;
 
   let client = isPreview ? await getAuthClient() : await getClient();
 

examples/next/app-router/app/login/page.tsx

@@ -1,19 +1,10 @@
 'use client';
 
-import { useFormState, useFormStatus } from 'react-dom';
 import { loginAction } from './action';
-
-function SubmitButton() {
-  const status = useFormStatus();
-  return (
-    <button disabled={status.pending}>
-      {status.pending ? 'Loading...' : 'Login'}
-    </button>
-  );
-}
+import { useActionState } from 'react';
 
 export default function Page() {
-  const [state, formAction] = useFormState(loginAction, {});
+  const [state, formAction, isPending] = useActionState(loginAction, {});
 
   return (
     <>
@@ -30,7 +21,9 @@ export default function Page() {
           <input type="password" name="password" />
         </fieldset>
 
-        <SubmitButton />
+        <button disabled={isPending}>
+          {isPending ? 'Loading...' : 'Login'}
+        </button>
 
         {state.error && (
           <p dangerouslySetInnerHTML={{ __html: state.error }}></p>

examples/next/app-router/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.