nextjs.md

How to use jotai with next.js

Notes

When you use 'jotai/utils', you need to use the csj bundle

import { useUpdateAtom } from 'jotai/utils.cjs'

You can't return promises in server side rendering

const postData = atom((get) => {
  const id = get(postId)
  if (isSSR || prefetchedPostData[id]) {
    return prefetchedPostData[id] || EMPTY_POST_DATA;
  }
  return fetchData(id) // returns a promise
})

Hydration is possible with care

Check the following examples.

Examples

Clock

https://codesandbox.io/s/nextjs-with-jotai-5ylrj

HN Posts

https://codesandbox.io/s/nextjs-with-jotai-async-pm0l8