feat: support for Next.js 15

examples/react/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/api-reference/config/typescript for more information.

examples/react/next-app-router/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
-    "next": "13.5.1",
+    "next": "15.1.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10",

examples/react/next-routing/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/pages/api-reference/config/typescript for more information.

examples/react/next-routing/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
-    "next": "13.5.1",
+    "next": "15.1.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10",

examples/react/next/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/pages/api-reference/config/typescript for more information.

examples/react/next/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
-    "next": "13.5.1",
+    "next": "15.1.4",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10",

packages/react-instantsearch-nextjs/package.json

@@ -50,11 +50,11 @@
   },
   "devDependencies": {
     "instantsearch.js": "4.75.7",
-    "next": "13.5.1",
+    "next": "15.1.4",
     "react-instantsearch-core": "7.13.10"
   },
   "peerDependencies": {
-    "next": ">= 13.4 < 15",
+    "next": ">= 13.4 < 16",
     "react-instantsearch": ">= 7.1.0 < 8"
   }
 }

packages/react-instantsearch-nextjs/src/InstantSearchNext.tsx

@@ -1,5 +1,4 @@
 import { safelyRunOnBrowser } from 'instantsearch.js/es/lib/utils';
-import { headers } from 'next/headers';
 import React, { useEffect, useMemo, useRef } from 'react';
 import {
   InstantSearch,
@@ -10,6 +9,7 @@ import {
 import { InitializePromise } from './InitializePromise';
 import { TriggerSearch } from './TriggerSearch';
 import { useInstantSearchRouting } from './useInstantSearchRouting';
+import { useNextHeaders } from './useNextHeaders';
 import { warn } from './warn';
 
 import type { InitialResults, StateMapping, UiState } from 'instantsearch.js';
@@ -72,8 +72,10 @@ export function InstantSearchNext<
     };
   }, []);
 
+  const headers = useNextHeaders();
+
   const nonce = safelyRunOnBrowser(() => undefined, {
-    fallback: () => headers().get('x-nonce') || undefined,
+    fallback: () => headers?.get('x-nonce') || undefined,
   });
 
   const routing = useInstantSearchRouting(passedRouting, isMounting);

packages/react-instantsearch-nextjs/src/useInstantSearchRouting.ts

@@ -1,8 +1,9 @@
 import historyRouter from 'instantsearch.js/es/lib/routers/history';
-import { headers } from 'next/headers';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useRef, useEffect } from 'react';
 
+import { useNextHeaders } from './useNextHeaders';
+
 import type { InstantSearchNextProps } from './InstantSearchNext';
 import type { UiState } from 'instantsearch.js';
 import type { BrowserHistoryArgs } from 'instantsearch.js/es/lib/routers/history';
@@ -15,6 +16,7 @@ export function useInstantSearchRouting<
   passedRouting: InstantSearchNextProps<TUiState, TRouteState>['routing'],
   isMounting: React.RefObject<boolean>
 ) {
+  const isServer = typeof window === 'undefined';
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const routingRef =
@@ -26,14 +28,16 @@ export function useInstantSearchRouting<
     }
   }, [pathname, searchParams]);
 
+  const headers = useNextHeaders();
+
   if (passedRouting && !routingRef.current) {
     let browserHistoryOptions: Partial<BrowserHistoryArgs<TRouteState>> = {};
 
     browserHistoryOptions.getLocation = () => {
-      if (typeof window === 'undefined') {
+      if (isServer) {
         const url = `${
-          headers().get('x-forwarded-proto') || 'http'
-        }://${headers().get('host')}${pathname}?${searchParams}`;
+          headers?.get('x-forwarded-proto') || 'http'
+        }://${headers?.get('host')}${pathname}?${searchParams}`;
         return new URL(url) as unknown as Location;
       }
 

packages/react-instantsearch-nextjs/src/useNextHeaders.tsx

@@ -0,0 +1,29 @@
+import { headers } from 'next/headers';
+import { use } from 'react';
+
+function isPromise(obj: any) {
+  return (
+    obj &&
+    (typeof obj === 'object' || typeof obj === 'function') &&
+    typeof obj.then === 'function'
+  );
+}
+
+type Headers = Awaited<ReturnType<typeof headers>> | undefined;
+
+export const useNextHeaders = () => {
+  const isServer = typeof window === 'undefined';
+
+  let h: Headers;
+
+  if (isServer) {
+    const nextHeaders = headers();
+    if (isPromise(headers())) {
+      h = use(nextHeaders);
+    } else {
+      h = nextHeaders as unknown as Headers; // assert that headers come from the synchronous nextjs function
+    }
+  }
+
+  return h;
+};

packages/react-instantsearch-router-nextjs/package.json

@@ -66,6 +66,6 @@
     "ts-node": "8.4.1"
   },
   "peerDependencies": {
-    "next": ">= 9 && < 15"
+    "next": ">= 9 && < 16"
   }
 }