It doesn't properly work in a NextJS app

[Besuf]

Can you guys please provide a working nextjs sample example. Or mention if it's not compatible at all

Context

I was planning to render a doc inside my nextjs application on docs.jsx page. It was supposed to render the documentation on that page but instead it replaces the router history from '/docs' to '/'. The routing is working like in a normal create react app maybe that's the reason for this

Current Behavior

The docs and all the sublinks are not respecting nextjs routing behavior. example localhost:3000/docs/sub-doc can not be achived instead I am getting localhost:3000/sub-doc.

Expected Behavior

it's expected to work like normal under the docs route and all other links in documentation should append on that url

Possible Workaround/Solution

I mean if it's not possible rewrite or redirect example in nextjs might help

Steps to Reproduce

1.npx create-next-app my-app
2.npm i stoplightio
3. try to mount Api component inside docs page (page/docs.jsx) / probably required to avoid ssr renders since that's also shows some kind of history not available errors as well
4. and load that page and you will end up with from localhost:3000/docs ->localhost:3000/ but you want the default page for you main application not the docs.

Environment

• Version used: nextjs 12
• Environment name and version Version 101.0.4951.54
• Operating System and version (desktop or mobile): Ubuntu 20.04 LTS
• Link to your environment/workspace/project:

[kressaty]

Try the basePath prop on the <API> component per the docs here