[Nextjs] Unable to get documented example to work with Nextjs latest

[yctercero]

Summary

Looking for guidance getting the Elasticearch connector to work with Nextjs. I followed the example given in the documentation with no luck.

For some context - working with Nextjs, Tailwind, and Elasticsearch. When I attempt to implement the documentation for Nextjs I get a series of errors.

The first error had to do with the routing. I had to nest the search.ts and autocomplete.ts route files in app/api/autocomplete/route.js and app/api/search/route.js and rename the methods to use POST/GET:

export async function POST(req, res) {
  const { requestState, queryConfig } = req.body;
  const response = await connector.onAutocomplete(requestState, queryConfig);
  res.json(response);
}

Latest error is You're importing a component that needs `useRouter`. This React hook only works in a client component. To fix, mark the file (or its parent) with the `"use client"` directive. Doing so (adding "use client") would defeat the purpose of not exposing the connector info in the client (correct me here if I'm wrong). When I do add it, the page does at least load but the components don't show (SearchBox, Results, etc).

I also then get:

[yansavitski]

Hey
Thank you for your question.
I’ve just tested the latest versions of Next.js, React, and React DOM, and followed the documentation steps without running into routing issues. Could you confirm which versions you’re using? And what errors did you get? For reference, here’s what worked on my end:
"next": "15.1.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
`
Regarding your concern about use client: Adding the "use client" directive does not expose connector information to the client since the credentials for Elasticsearch credentials reside only within the API layer.