update nextjs and examples

examples/react/next-app-router/lib/client.tsx

@@ -1,5 +1,5 @@
 import { createMemoryCache } from '@algolia/client-common';
-import { liteClient as algoliasearch } from 'algoliasearch/lite';
+import { liteClient as algoliasearch } from 'algoliasearch-v5/lite';
 
 export const responsesCache = createMemoryCache();
 export const client = algoliasearch(

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,11 +11,10 @@
   "dependencies": {
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
-    "next": "13.5.1",
+    "next": "^15.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-instantsearch": "7.13.10",
-    "react-instantsearch-nextjs": "0.3.21"
+    "react-instantsearch": "7.13.10"
   },
   "devDependencies": {
     "@types/node": "17.0.40",

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.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10",

examples/react/next-routing/pages/index.tsx

@@ -1,5 +1,5 @@
 import { createMemoryCache } from '@algolia/client-common';
-import { liteClient as algoliasearch } from 'algoliasearch/lite';
+import { liteClient as algoliasearch } from 'algoliasearch-v5/lite';
 import { Hit as AlgoliaHit } from 'instantsearch.js';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';

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.0.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10",

examples/react/next/pages/index.tsx

@@ -1,5 +1,5 @@
 import { createMemoryCache } from '@algolia/client-common';
-import { liteClient as algoliasearch } from 'algoliasearch/lite';
+import { liteClient as algoliasearch } from 'algoliasearch-v5/lite';
 import { Hit as AlgoliaHit } from 'instantsearch.js';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';

packages/react-instantsearch-core/src/index.ts

@@ -35,5 +35,6 @@ export * from './hooks/useInstantSearch';
 export * from './lib/wrapPromiseWithState';
 export * from './lib/useInstantSearchContext';
 export * from './lib/useRSCContext';
+export * from './lib/use';
 export * from './lib/InstantSearchRSCContext';
 export * from './server';

packages/react-instantsearch-nextjs/package.json

@@ -50,11 +50,11 @@
   },
   "devDependencies": {
     "instantsearch.js": "4.75.7",
-    "next": "13.5.1",
+    "next": "^15.0.0",
     "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,6 +1,6 @@
 import { safelyRunOnBrowser } from 'instantsearch.js/es/lib/utils';
 import { headers } from 'next/headers';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { use, useEffect, useMemo, useRef } from 'react';
 import {
   InstantSearch,
   InstantSearchRSCContext,
@@ -72,9 +72,14 @@ export function InstantSearchNext<
     };
   }, []);
 
-  const nonce = safelyRunOnBrowser(() => undefined, {
-    fallback: () => headers().get('x-nonce') || undefined,
-  });
+  let nonce: string | undefined;
+  if (isServer) {
+    const h = use(headers());
+
+    nonce = safelyRunOnBrowser(() => undefined, {
+      fallback: () => h.get('x-nonce') || undefined,
+    });
+  }
 
   const routing = useInstantSearchRouting(passedRouting, isMounting);
 

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

@@ -27,6 +27,12 @@ jest.mock('next/navigation', () => ({
   },
 }));
 
+// const mockHeaders = jest.fn(() => Promise.resolve({}));
+jest.mock('next/headers', () => ({
+  ...jest.requireActual('next/headers'),
+  headers: () => Promise.resolve({}),
+}));
+
 describe('rerendering', () => {
   const client = createSearchClient();
 

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

@@ -1,11 +1,12 @@
 import historyRouter from 'instantsearch.js/es/lib/routers/history';
-import { headers } from 'next/headers';
+import { headers as nextHeaders } from 'next/headers';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, use } from 'react';
 
 import type { InstantSearchNextProps } from './InstantSearchNext';
 import type { UiState } from 'instantsearch.js';
 import type { BrowserHistoryArgs } from 'instantsearch.js/es/lib/routers/history';
+import type { ReadonlyHeaders } from 'next/dist/server/web/spec-extension/adapters/headers';
 import type { InstantSearchProps } from 'react-instantsearch-core';
 
 export function useInstantSearchRouting<
@@ -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,19 @@ export function useInstantSearchRouting<
     }
   }, [pathname, searchParams]);
 
+  let headers: ReadonlyHeaders | undefined;
+  if (isServer) {
+    headers = use(nextHeaders());
+  }
+
   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-router-nextjs/package.json

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