---
title: Next.js
description: How to use Jotai with Next.js
nav: 3.04
---
## Hydration
Jotai has support for hydration of atoms with `useHydrateAtoms`. The documentation for the hook can be seen [here](../api/utils.mdx#use-hydrate-atoms).
## Sync with router
It's possible to sync Jotai with the router. You can achieve this with `atomWithHash`:
```js
const pageAtom = atomWithHash("page", 1, {
replaceState: true,
subscribe: (callback) => {
Router.events.on('routeChangeComplete', callback)
window.addEventListener('hashchange', callback)
return () => {
Router.events.off('routeChangeComplete', callback)
window.removeEventListener('hashchange', callback)
}
}
})
```
This way you have full control over what [router event](https://nextjs.org/docs/api-reference/next/router#routerevents) you want to subscribe to.
## You can't return promises in server side rendering
It's important to note that you can't return promises with SSR - However, it's possible to guard against it inside the atom definition.
If possible use `useHydrateAtoms` to hydrate values from the server.
```js
const postData = atom((get) => {
const id = get(postId)
if (isSSR || prefetchedPostData[id]) {
return prefetchedPostData[id] || EMPTY_POST_DATA
}
return fetchData(id) // returns a promise
})
```
## Examples
### Clock
### HN Posts
### Next.js repo
```bash
npx create-next-app --example with-jotai with-jotai-app
# or
yarn create next-app --example with-jotai with-jotai-app
```
Here's a [link](https://github.com/vercel/next.js/tree/canary/examples/with-jotai).