RFC: Next.js App Router HN demo

[trongthanh]

As more projects are adopting Next.js 13+ App Router approach but current Next.js documentation and demo are still showcasing Page Router, I had derived the HN Demo to showcase how to use SSR, useRehydrateAtoms and Provider in a Next.js App Router app.

Here's the demo on Stackblitz (Demo A)

I intend to create a PR to either embed or link this demo to Jotai's Next.js doc page to provide some reference for new learners. My only concern is the use of store API in the read atom where I need to store the postData to local cache.

I also tried another approach to achieve memory cache with write atom only (Demo B). And feel that this one follow Jotai's wisdom better, but loosing the benefit of Suspense.

Please review and suggest which is better as an official documentation demo.

[dai-shi]

Thanks for opening new discussion! App Router HN demo would be great.

Some random comments:

• Provider should be close to root. layout.tsx should be appropriate?
• We shouldn't depend on store API for the basic use case.
• The benefit of Suspense is important.

Are they not supported in the Page Router example?

[trongthanh]

I see.

I have moved the <Provider> to layout.tsx and revise the postData read to avoid store API. postCache is only used for hydration data.

Please check if the demo is OK now.

[dai-shi]

Yeah, it looks good to me!

[thanhtran-ct]

Thanks. I'll create the PR, intended to place it in the Next.js guide. Should this be an embed demo or a link? There's already 2 embed demos in that page.

PS. this is my other profile, mistaken when replied.

[dai-shi]

Good point. I think it would be nice to have one embed demo and rest are links.