React InstantSearch NextJS not compatible with NextJS 15 (stable release as of 10/21): Not handling async request apis

[buyblvd-ryan]

🐛 Current behavior

NextJS 15 became the official release on Monday, but InstantSearch Next doesn't work with the new asynchronous request apis causing several errors. InstantSearchNext.tsx and useInstantSearchRouting.ts both access headers incorrectly. Didn't see any references to Next15 compatibility in any issues or PRs, so wanted to open this up for people in the same boat as me.

🔍 Steps to reproduce

1. Setup NextJS project
2. Use React InstantSearch NextJS
3. Error!

Live reproduction

N/A

💭 Expected behavior

N/A

Package version

react-instantsearch-nextjs 0.3.15

Operating system

All

Browser

All

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[RobinGiel]

these are the headers being used: headers().get('x-nonce') headers().get('x-forwarded-proto') headers().get('host'). headers()

should be awaited before using its value. info: https://nextjs.org/docs/messages/sync-dynamic-apis

[jpedroschmitz]

Maybe will it be fixed here?

https://github.com/algolia/instantsearch/pull/6382

[RobinGiel]

Maybe will it be fixed here?

6382

It's not there

[Haroenv]

We'd be happy to look into a solution for this, and also accept a community PR. For now it seemed complex as the places we're using the headers are synchronous and early in the life cycle, so it's not clear where it should become asynchronous

[jpedroschmitz]

It makes sense. Maybe the way to go with it is to pass headers as a prop to InstantSearchNext. I took a quick look, and I believe this could be the easiest way to go. I'm not sure if React.use() will work given the scenario, and I don't think we can make InstantSearchNext a server component, right @Haroenv?

[Haroenv]

The component indeed needs to be mounted client-side as well so it can't be server-only. Passing headers top-level could be an option. If you pass headers, the synchronous calls could be conditional and there won't be a warning anymore right?

If that works, we'd be happy to receive a pull request that accepts "static" headers as alternative to reading them synchronous already. Thanks!

[MangoMarcus]

I get a different error when updating to NextJS 15 using npx @next/codemod@canary upgrade latest with the react 19 codemods - 'InstantSearch' cannot be used as a JSX component.

Same with all instantsearch react components 🤔

[6ichem]

I get a different error when updating to NextJS 15 using npx @next/codemod@canary upgrade latest with the react 19 codemods - 'InstantSearch' cannot be used as a JSX component.

Same with all instantsearch react components 🤔

I managed to fix this by manually declaring and defining the types in the global.d.ts file in my root project and exporting the component type accordingly to the new TypeScript rules introduced:

declare module 'react-instantsearch' {
  export function RangeInput(props: RangeInputProps): ReactNode;
  export function SortBy(props: SortByProps): ReactNode;
  export function InstantSearch(props: InstantSearchProps): ReactNode;
  export function Configure(props: ConfigureProps): ReactNode;
  export function Hits(props: HitsProps): ReactNode;
}

// For Next.js library
declare module 'react-instantsearch-nextjs' {
  export function InstantSearchNext(props: InstantSearchNextProps): ReactNode;
}

This ensures that TypeScript recognizes these components and provides proper type checking and IntelliSense support, this is likely a temporary solution until the library maintainers update their type definitions to be compatible with the latest Next.js and TypeScript versions.

@Haroenv hopefully this will be helpful for future references to this issue