fix(react-instantsearch-nextjs): fix incorrect usage of headers

[cungminh2710]

Summary

Currently, NextJS App Router will throw this error when using with react-instantsearch-nextjs

⨯ Error: `headers` was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context

This is because the headers are only for server component - not in a client component. The InstantSearchNext component is a client component, hence this error.

This PR is to fix this issue by clearly stating InstantSearchNext is a client component, and put the nonce value into InstantSearchNext props

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 218739e7a73443cec5866d82d6798259f74a900e:

Sandbox	Source
example-instantsearch-getting-started	Configuration
example-react-instantsearch-getting-started	Configuration
example-react-instantsearch-next-app-dir-example	Configuration
example-react-instantsearch-next-routing-example	Configuration
example-vue-instantsearch-getting-started	Configuration

[Haroenv]

Hi, could you explain more why you want to have this change? the example given in the repository works already for server and client navigation. Is this for a different case?

[Haroenv]

Can you explain more @cungminh2710?

[cungminh2710]

There was some misunderstand from my end when seeing the error. Will close it now as it's working propperly in latest next version 👍

[Haroenv]

Thanks for your contribution!