chore(nextjs): Remove useSearchParams usage

.changeset/eight-dolphins-float.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Remove usage of useSearchParams() to avoid CSR de-opt.

integration/templates/next-app-router/package.json

@@ -10,8 +10,8 @@
  },
  "dependencies": {
  "@types/node": "^18.17.0",
- "@types/react": "18.2.14",
- "@types/react-dom": "18.2.6",
+ "@types/react": "18.2.48",
+ "@types/react-dom": "18.2.18",
  "next": "13",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

@@ -1,52 +1,44 @@
 'use client';
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useTransition } from 'react';
 
 type NavigateFunction = ReturnType<typeof useRouter>['push'];
 
-declare global {
- interface Window {
- __clerk_nav_ref: NavigateFunction;
- __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined;
- }
-}
-
+/**
+ * Creates an "awaitable" navigation function that will do its best effort to wait for Next.js to finish its route transition.
+ *
+ * This is accomplished by wrapping the call to `router.push` in `startTransition()`, which should rely on React to coordinate the pending state. We key off of
+ * `isPending` to flush the stored promises and ensure the navigates "resolve".
+ */
 export const useAwaitableNavigate = () => {
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { push } = useRouter();
- const pathname = usePathname();
- const params = useSearchParams();
-
- const urlKey = pathname + params.toString();
-
- useEffect(() => {
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- window.__clerk_nav_ref = (to, opts) => {
- if (to === window.location.href.replace(window.location.origin, '')) {
- push(to, opts);
- return Promise.resolve();
- }
+ const [isPending, startTransition] = useTransition();
+ const clerkNavRef = useRef<(...args: Parameters<NavigateFunction>) => Promise<void>>();
+ const clerkNavPromiseBuffer = useRef<(() => void)[]>([]);
 
+ // Set the navigation function reference only once
+ if (!clerkNavRef.current) {
+ clerkNavRef.current = (to, opts) => {
  return new Promise<void>(res => {
- if (window.__clerk_nav_resolves_ref) {
- window.__clerk_nav_resolves_ref.push(res);
- } else {
- window.__clerk_nav_resolves_ref = [res];
- }
- push(to);
+ clerkNavPromiseBuffer.current.push(res);
+ startTransition(() => {
+ push(to, opts);
+ });
  });
  };
- }, [urlKey]);
+ }
 
+ // Handle flushing the promise buffer when pending is false. If pending is false and there are promises in the buffer we should be able to safely flush them.
  useEffect(() => {
- if (window.__clerk_nav_resolves_ref && window.__clerk_nav_resolves_ref.length) {
- window.__clerk_nav_resolves_ref.forEach(resolve => resolve());
+ if (isPending) return;
+
+ if (clerkNavPromiseBuffer?.current?.length) {
+ clerkNavPromiseBuffer.current.forEach(resolve => resolve());
  }
-window.__clerk_nav_resolves_ref = [];
- });
+clerkNavPromiseBuffer.current = [];
+ }, [isPending]);
 
- return useCallback<NavigateFunction>((to, opts) => {
- return window.__clerk_nav_ref(to, opts);
- }, []);
+ return clerkNavRef.current;
 };

.changeset/eight-dolphins-float.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Remove usage of useSearchParams() to avoid CSR de-opt.

integration/templates/next-app-router/package.json

@@ -10,8 +10,8 @@
  },
  "dependencies": {
  "@types/node": "^18.17.0",
- "@types/react": "18.2.14",
- "@types/react-dom": "18.2.6",
+ "@types/react": "18.2.48",
+ "@types/react-dom": "18.2.18",
  "next": "13",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

@@ -1,52 +1,44 @@
 'use client';
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useTransition } from 'react';
 
 type NavigateFunction = ReturnType<typeof useRouter>['push'];
 
-declare global {
- interface Window {
- __clerk_nav_ref: NavigateFunction;
- __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined;
- }
-}
-
+/**
+ * Creates an "awaitable" navigation function that will do its best effort to wait for Next.js to finish its route transition.
+ *
+ * This is accomplished by wrapping the call to `router.push` in `startTransition()`, which should rely on React to coordinate the pending state. We key off of
+ * `isPending` to flush the stored promises and ensure the navigates "resolve".
+ */
 export const useAwaitableNavigate = () => {
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { push } = useRouter();
- const pathname = usePathname();
- const params = useSearchParams();
-
- const urlKey = pathname + params.toString();
-
- useEffect(() => {
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- window.__clerk_nav_ref = (to, opts) => {
- if (to === window.location.href.replace(window.location.origin, '')) {
- push(to, opts);
- return Promise.resolve();
- }
+ const [isPending, startTransition] = useTransition();
+ const clerkNavRef = useRef<(...args: Parameters<NavigateFunction>) => Promise<void>>();
+ const clerkNavPromiseBuffer = useRef<(() => void)[]>([]);
 
+ // Set the navigation function reference only once
+ if (!clerkNavRef.current) {
+ clerkNavRef.current = (to, opts) => {
  return new Promise<void>(res => {
- if (window.__clerk_nav_resolves_ref) {
- window.__clerk_nav_resolves_ref.push(res);
- } else {
- window.__clerk_nav_resolves_ref = [res];
- }
- push(to);
+ clerkNavPromiseBuffer.current.push(res);
+ startTransition(() => {
+ push(to, opts);
+ });
  });
  };
- }, [urlKey]);
+ }
 
+ // Handle flushing the promise buffer when pending is false. If pending is false and there are promises in the buffer we should be able to safely flush them.
  useEffect(() => {
- if (window.__clerk_nav_resolves_ref && window.__clerk_nav_resolves_ref.length) {
- window.__clerk_nav_resolves_ref.forEach(resolve => resolve());
+ if (isPending) return;
+
+ if (clerkNavPromiseBuffer?.current?.length) {
+ clerkNavPromiseBuffer.current.forEach(resolve => resolve());
  }
-window.__clerk_nav_resolves_ref = [];
- });
+clerkNavPromiseBuffer.current = [];
+ }, [isPending]);
 
- return useCallback<NavigateFunction>((to, opts) => {
- return window.__clerk_nav_ref(to, opts);
- }, []);
+ return clerkNavRef.current;
 };

.changeset/eight-dolphins-float.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Remove usage of useSearchParams() to avoid CSR de-opt.

integration/templates/next-app-router/package.json

@@ -10,8 +10,8 @@
  },
  "dependencies": {
  "@types/node": "^18.17.0",
- "@types/react": "18.2.14",
- "@types/react-dom": "18.2.6",
+ "@types/react": "18.2.48",
+ "@types/react-dom": "18.2.18",
  "next": "13",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

@@ -1,52 +1,44 @@
 'use client';
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useTransition } from 'react';
 
 type NavigateFunction = ReturnType<typeof useRouter>['push'];
 
-declare global {
- interface Window {
- __clerk_nav_ref: NavigateFunction;
- __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined;
- }
-}
-
+/**
+ * Creates an "awaitable" navigation function that will do its best effort to wait for Next.js to finish its route transition.
+ *
+ * This is accomplished by wrapping the call to `router.push` in `startTransition()`, which should rely on React to coordinate the pending state. We key off of
+ * `isPending` to flush the stored promises and ensure the navigates "resolve".
+ */
 export const useAwaitableNavigate = () => {
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { push } = useRouter();
- const pathname = usePathname();
- const params = useSearchParams();
-
- const urlKey = pathname + params.toString();
-
- useEffect(() => {
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- window.__clerk_nav_ref = (to, opts) => {
- if (to === window.location.href.replace(window.location.origin, '')) {
- push(to, opts);
- return Promise.resolve();
- }
+ const [isPending, startTransition] = useTransition();
+ const clerkNavRef = useRef<(...args: Parameters<NavigateFunction>) => Promise<void>>();
+ const clerkNavPromiseBuffer = useRef<(() => void)[]>([]);
 
+ // Set the navigation function reference only once
+ if (!clerkNavRef.current) {
+ clerkNavRef.current = (to, opts) => {
  return new Promise<void>(res => {
- if (window.__clerk_nav_resolves_ref) {
- window.__clerk_nav_resolves_ref.push(res);
- } else {
- window.__clerk_nav_resolves_ref = [res];
- }
- push(to);
+ clerkNavPromiseBuffer.current.push(res);
+ startTransition(() => {
+ push(to, opts);
+ });
  });
  };
- }, [urlKey]);
+ }
 
+ // Handle flushing the promise buffer when pending is false. If pending is false and there are promises in the buffer we should be able to safely flush them.
  useEffect(() => {
- if (window.__clerk_nav_resolves_ref && window.__clerk_nav_resolves_ref.length) {
- window.__clerk_nav_resolves_ref.forEach(resolve => resolve());
+ if (isPending) return;
+
+ if (clerkNavPromiseBuffer?.current?.length) {
+ clerkNavPromiseBuffer.current.forEach(resolve => resolve());
  }
-window.__clerk_nav_resolves_ref = [];
- });
+clerkNavPromiseBuffer.current = [];
+ }, [isPending]);
 
- return useCallback<NavigateFunction>((to, opts) => {
- return window.__clerk_nav_ref(to, opts);
- }, []);
+ return clerkNavRef.current;
 };

.changeset/eight-dolphins-float.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Remove usage of useSearchParams() to avoid CSR de-opt.

integration/templates/next-app-router/package.json

@@ -10,8 +10,8 @@
  },
  "dependencies": {
  "@types/node": "^18.17.0",
- "@types/react": "18.2.14",
- "@types/react-dom": "18.2.6",
+ "@types/react": "18.2.48",
+ "@types/react-dom": "18.2.18",
  "next": "13",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

@@ -1,52 +1,44 @@
 'use client';
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useTransition } from 'react';
 
 type NavigateFunction = ReturnType<typeof useRouter>['push'];
 
-declare global {
- interface Window {
- __clerk_nav_ref: NavigateFunction;
- __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined;
- }
-}
-
+/**
+ * Creates an "awaitable" navigation function that will do its best effort to wait for Next.js to finish its route transition.
+ *
+ * This is accomplished by wrapping the call to `router.push` in `startTransition()`, which should rely on React to coordinate the pending state. We key off of
+ * `isPending` to flush the stored promises and ensure the navigates "resolve".
+ */
 export const useAwaitableNavigate = () => {
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { push } = useRouter();
- const pathname = usePathname();
- const params = useSearchParams();
-
- const urlKey = pathname + params.toString();
-
- useEffect(() => {
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- window.__clerk_nav_ref = (to, opts) => {
- if (to === window.location.href.replace(window.location.origin, '')) {
- push(to, opts);
- return Promise.resolve();
- }
+ const [isPending, startTransition] = useTransition();
+ const clerkNavRef = useRef<(...args: Parameters<NavigateFunction>) => Promise<void>>();
+ const clerkNavPromiseBuffer = useRef<(() => void)[]>([]);
 
+ // Set the navigation function reference only once
+ if (!clerkNavRef.current) {
+ clerkNavRef.current = (to, opts) => {
  return new Promise<void>(res => {
- if (window.__clerk_nav_resolves_ref) {
- window.__clerk_nav_resolves_ref.push(res);
- } else {
- window.__clerk_nav_resolves_ref = [res];
- }
- push(to);
+ clerkNavPromiseBuffer.current.push(res);
+ startTransition(() => {
+ push(to, opts);
+ });
  });
  };
- }, [urlKey]);
+ }
 
+ // Handle flushing the promise buffer when pending is false. If pending is false and there are promises in the buffer we should be able to safely flush them.
  useEffect(() => {
- if (window.__clerk_nav_resolves_ref && window.__clerk_nav_resolves_ref.length) {
- window.__clerk_nav_resolves_ref.forEach(resolve => resolve());
+ if (isPending) return;
+
+ if (clerkNavPromiseBuffer?.current?.length) {
+ clerkNavPromiseBuffer.current.forEach(resolve => resolve());
  }
-window.__clerk_nav_resolves_ref = [];
- });
+clerkNavPromiseBuffer.current = [];
+ }, [isPending]);
 
- return useCallback<NavigateFunction>((to, opts) => {
- return window.__clerk_nav_ref(to, opts);
- }, []);
+ return clerkNavRef.current;
 };

.changeset/eight-dolphins-float.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Remove usage of useSearchParams() to avoid CSR de-opt.

integration/templates/next-app-router/package.json

@@ -10,8 +10,8 @@
  },
  "dependencies": {
  "@types/node": "^18.17.0",
- "@types/react": "18.2.14",
- "@types/react-dom": "18.2.6",
+ "@types/react": "18.2.48",
+ "@types/react-dom": "18.2.18",
  "next": "13",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

@@ -1,52 +1,44 @@
 'use client';
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useTransition } from 'react';
 
 type NavigateFunction = ReturnType<typeof useRouter>['push'];
 
-declare global {
- interface Window {
- __clerk_nav_ref: NavigateFunction;
- __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined;
- }
-}
-
+/**
+ * Creates an "awaitable" navigation function that will do its best effort to wait for Next.js to finish its route transition.
+ *
+ * This is accomplished by wrapping the call to `router.push` in `startTransition()`, which should rely on React to coordinate the pending state. We key off of
+ * `isPending` to flush the stored promises and ensure the navigates "resolve".
+ */
 export const useAwaitableNavigate = () => {
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { push } = useRouter();
- const pathname = usePathname();
- const params = useSearchParams();
-
- const urlKey = pathname + params.toString();
-
- useEffect(() => {
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- window.__clerk_nav_ref = (to, opts) => {
- if (to === window.location.href.replace(window.location.origin, '')) {
- push(to, opts);
- return Promise.resolve();
- }
+ const [isPending, startTransition] = useTransition();
+ const clerkNavRef = useRef<(...args: Parameters<NavigateFunction>) => Promise<void>>();
+ const clerkNavPromiseBuffer = useRef<(() => void)[]>([]);
 
+ // Set the navigation function reference only once
+ if (!clerkNavRef.current) {
+ clerkNavRef.current = (to, opts) => {
  return new Promise<void>(res => {
- if (window.__clerk_nav_resolves_ref) {
- window.__clerk_nav_resolves_ref.push(res);
- } else {
- window.__clerk_nav_resolves_ref = [res];
- }
- push(to);
+ clerkNavPromiseBuffer.current.push(res);
+ startTransition(() => {
+ push(to, opts);
+ });
  });
  };
- }, [urlKey]);
+ }
 
+ // Handle flushing the promise buffer when pending is false. If pending is false and there are promises in the buffer we should be able to safely flush them.
  useEffect(() => {
- if (window.__clerk_nav_resolves_ref && window.__clerk_nav_resolves_ref.length) {
- window.__clerk_nav_resolves_ref.forEach(resolve => resolve());
+ if (isPending) return;
+
+ if (clerkNavPromiseBuffer?.current?.length) {
+ clerkNavPromiseBuffer.current.forEach(resolve => resolve());
  }
-window.__clerk_nav_resolves_ref = [];
- });
+clerkNavPromiseBuffer.current = [];
+ }, [isPending]);
 
- return useCallback<NavigateFunction>((to, opts) => {
- return window.__clerk_nav_ref(to, opts);
- }, []);
+ return clerkNavRef.current;
 };

.changeset/eight-dolphins-float.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Remove usage of useSearchParams() to avoid CSR de-opt.

integration/templates/next-app-router/package.json

@@ -10,8 +10,8 @@
  },
  "dependencies": {
  "@types/node": "^18.17.0",
- "@types/react": "18.2.14",
- "@types/react-dom": "18.2.6",
+ "@types/react": "18.2.48",
+ "@types/react-dom": "18.2.18",
  "next": "13",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

@@ -1,52 +1,44 @@
 'use client';
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useTransition } from 'react';
 
 type NavigateFunction = ReturnType<typeof useRouter>['push'];
 
-declare global {
- interface Window {
- __clerk_nav_ref: NavigateFunction;
- __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined;
- }
-}
-
+/**
+ * Creates an "awaitable" navigation function that will do its best effort to wait for Next.js to finish its route transition.
+ *
+ * This is accomplished by wrapping the call to `router.push` in `startTransition()`, which should rely on React to coordinate the pending state. We key off of
+ * `isPending` to flush the stored promises and ensure the navigates "resolve".
+ */
 export const useAwaitableNavigate = () => {
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { push } = useRouter();
- const pathname = usePathname();
- const params = useSearchParams();
-
- const urlKey = pathname + params.toString();
-
- useEffect(() => {
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- window.__clerk_nav_ref = (to, opts) => {
- if (to === window.location.href.replace(window.location.origin, '')) {
- push(to, opts);
- return Promise.resolve();
- }
+ const [isPending, startTransition] = useTransition();
+ const clerkNavRef = useRef<(...args: Parameters<NavigateFunction>) => Promise<void>>();
+ const clerkNavPromiseBuffer = useRef<(() => void)[]>([]);
 
+ // Set the navigation function reference only once
+ if (!clerkNavRef.current) {
+ clerkNavRef.current = (to, opts) => {
  return new Promise<void>(res => {
- if (window.__clerk_nav_resolves_ref) {
- window.__clerk_nav_resolves_ref.push(res);
- } else {
- window.__clerk_nav_resolves_ref = [res];
- }
- push(to);
+ clerkNavPromiseBuffer.current.push(res);
+ startTransition(() => {
+ push(to, opts);
+ });
  });
  };
- }, [urlKey]);
+ }
 
+ // Handle flushing the promise buffer when pending is false. If pending is false and there are promises in the buffer we should be able to safely flush them.
  useEffect(() => {
- if (window.__clerk_nav_resolves_ref && window.__clerk_nav_resolves_ref.length) {
- window.__clerk_nav_resolves_ref.forEach(resolve => resolve());
+ if (isPending) return;
+
+ if (clerkNavPromiseBuffer?.current?.length) {
+ clerkNavPromiseBuffer.current.forEach(resolve => resolve());
  }
-window.__clerk_nav_resolves_ref = [];
- });
+clerkNavPromiseBuffer.current = [];
+ }, [isPending]);
 
- return useCallback<NavigateFunction>((to, opts) => {
- return window.__clerk_nav_ref(to, opts);
- }, []);
+ return clerkNavRef.current;
 };

.changeset/eight-dolphins-float.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Remove usage of useSearchParams() to avoid CSR de-opt.

integration/templates/next-app-router/package.json

@@ -10,8 +10,8 @@
  },
  "dependencies": {
  "@types/node": "^18.17.0",
- "@types/react": "18.2.14",
- "@types/react-dom": "18.2.6",
+ "@types/react": "18.2.48",
+ "@types/react-dom": "18.2.18",
  "next": "13",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

@@ -1,52 +1,44 @@
 'use client';
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useTransition } from 'react';
 
 type NavigateFunction = ReturnType<typeof useRouter>['push'];
 
-declare global {
- interface Window {
- __clerk_nav_ref: NavigateFunction;
- __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined;
- }
-}
-
+/**
+ * Creates an "awaitable" navigation function that will do its best effort to wait for Next.js to finish its route transition.
+ *
+ * This is accomplished by wrapping the call to `router.push` in `startTransition()`, which should rely on React to coordinate the pending state. We key off of
+ * `isPending` to flush the stored promises and ensure the navigates "resolve".
+ */
 export const useAwaitableNavigate = () => {
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { push } = useRouter();
- const pathname = usePathname();
- const params = useSearchParams();
-
- const urlKey = pathname + params.toString();
-
- useEffect(() => {
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- window.__clerk_nav_ref = (to, opts) => {
- if (to === window.location.href.replace(window.location.origin, '')) {
- push(to, opts);
- return Promise.resolve();
- }
+ const [isPending, startTransition] = useTransition();
+ const clerkNavRef = useRef<(...args: Parameters<NavigateFunction>) => Promise<void>>();
+ const clerkNavPromiseBuffer = useRef<(() => void)[]>([]);
 
+ // Set the navigation function reference only once
+ if (!clerkNavRef.current) {
+ clerkNavRef.current = (to, opts) => {
  return new Promise<void>(res => {
- if (window.__clerk_nav_resolves_ref) {
- window.__clerk_nav_resolves_ref.push(res);
- } else {
- window.__clerk_nav_resolves_ref = [res];
- }
- push(to);
+ clerkNavPromiseBuffer.current.push(res);
+ startTransition(() => {
+ push(to, opts);
+ });
  });
  };
- }, [urlKey]);
+ }
 
+ // Handle flushing the promise buffer when pending is false. If pending is false and there are promises in the buffer we should be able to safely flush them.
  useEffect(() => {
- if (window.__clerk_nav_resolves_ref && window.__clerk_nav_resolves_ref.length) {
- window.__clerk_nav_resolves_ref.forEach(resolve => resolve());
+ if (isPending) return;
+
+ if (clerkNavPromiseBuffer?.current?.length) {
+ clerkNavPromiseBuffer.current.forEach(resolve => resolve());
  }
-window.__clerk_nav_resolves_ref = [];
- });
+clerkNavPromiseBuffer.current = [];
+ }, [isPending]);
 
- return useCallback<NavigateFunction>((to, opts) => {
- return window.__clerk_nav_ref(to, opts);
- }, []);
+ return clerkNavRef.current;
 };

.changeset/eight-dolphins-float.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': patch
+---
+
+Remove usage of useSearchParams() to avoid CSR de-opt.

integration/templates/next-app-router/package.json

@@ -10,8 +10,8 @@
  },
  "dependencies": {
  "@types/node": "^18.17.0",
- "@types/react": "18.2.14",
- "@types/react-dom": "18.2.6",
+ "@types/react": "18.2.48",
+ "@types/react-dom": "18.2.18",
  "next": "13",
  "react": "18.2.0",
  "react-dom": "18.2.0",

packages/nextjs/src/app-router/client/useAwaitableNavigate.ts

@@ -1,52 +1,44 @@
 'use client';
 
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useRef, useTransition } from 'react';
 
 type NavigateFunction = ReturnType<typeof useRouter>['push'];
 
-declare global {
- interface Window {
- __clerk_nav_ref: NavigateFunction;
- __clerk_nav_resolves_ref: Array<(val?: any) => any> | undefined;
- }
-}
-
+/**
+ * Creates an "awaitable" navigation function that will do its best effort to wait for Next.js to finish its route transition.
+ *
+ * This is accomplished by wrapping the call to `router.push` in `startTransition()`, which should rely on React to coordinate the pending state. We key off of
+ * `isPending` to flush the stored promises and ensure the navigates "resolve".
+ */
 export const useAwaitableNavigate = () => {
  // eslint-disable-next-line @typescript-eslint/unbound-method
  const { push } = useRouter();
- const pathname = usePathname();
- const params = useSearchParams();
-
- const urlKey = pathname + params.toString();
-
- useEffect(() => {
- // eslint-disable-next-line @typescript-eslint/no-misused-promises
- window.__clerk_nav_ref = (to, opts) => {
- if (to === window.location.href.replace(window.location.origin, '')) {
- push(to, opts);
- return Promise.resolve();
- }
+ const [isPending, startTransition] = useTransition();
+ const clerkNavRef = useRef<(...args: Parameters<NavigateFunction>) => Promise<void>>();
+ const clerkNavPromiseBuffer = useRef<(() => void)[]>([]);
 
+ // Set the navigation function reference only once
+ if (!clerkNavRef.current) {
+ clerkNavRef.current = (to, opts) => {
  return new Promise<void>(res => {
- if (window.__clerk_nav_resolves_ref) {
- window.__clerk_nav_resolves_ref.push(res);
- } else {
- window.__clerk_nav_resolves_ref = [res];
- }
- push(to);
+ clerkNavPromiseBuffer.current.push(res);
+ startTransition(() => {
+ push(to, opts);
+ });
  });
  };
- }, [urlKey]);
+ }
 
+ // Handle flushing the promise buffer when pending is false. If pending is false and there are promises in the buffer we should be able to safely flush them.
  useEffect(() => {
- if (window.__clerk_nav_resolves_ref && window.__clerk_nav_resolves_ref.length) {
- window.__clerk_nav_resolves_ref.forEach(resolve => resolve());
+ if (isPending) return;
+
+ if (clerkNavPromiseBuffer?.current?.length) {
+ clerkNavPromiseBuffer.current.forEach(resolve => resolve());
  }
-window.__clerk_nav_resolves_ref = [];
- });
+clerkNavPromiseBuffer.current = [];
+ }, [isPending]);
 
- return useCallback<NavigateFunction>((to, opts) => {
- return window.__clerk_nav_ref(to, opts);
- }, []);
+ return clerkNavRef.current;
 };