Some of the difficulties surrounding Next.js and Previews is because of statically generate pages.
The edit button uses queries made to Prismic on the page to predict the main document and linked document, it also uses these queries to show the JSON preview that you mentioned above.
The issue is that because Next.js is statically generating the pages as HTML there are no queries being made for the edit button to use. This creates different issues in terms of previewing for Next.js we have some workarounds that we are trying to document, but the team plans to work on a prismic-next plugin in the new year which will make these workarounds unnecessary.
We have a workaround for getting the main document for the edit button & Dev Mode for our own projects. It involves doing a client-side query (using the useEffect hook) for the documents used on that page. This query is solely for the purpose of having the documents appear in the toolbar. You could do a similar query for everything to populate the Dev Mode tab.
Alternatively, you can use your API browser to see the JSON response for the content coming from your repo:
I will update the document you linked at the top as the information is misleading, I'm working hard at the minute to make this all clearer. Hopefully, the team can make this whole process easier in the future.