NextJS and Redux clearing store when changing pages

Question

I have been working on a project that is using NextJS and Redux. I was able to use some of the NextJS examples to get redux setup with thunk, but I am having issues with the redux state persisting across pages.

So I know that you can use NextJS with Redux, but whenever I use href it will clear my redux store.

How do I get Redux to persist across different pages?

Answer 1

One of the advantages to NextJS was that there is a built in React Router hook called useRouter , but what I didn't realize is that if you are going to use Redux you have to use useRouter because otherwise it will trigger another Server Side Render and will reset your state back to the initialState that you set up.

Another fly in the ointment is that when you use NextJS it is difficult to access the localStorage if you are wanting to store user information in there without bringing in another piece of react. To do this you need to run a localStorage call when the page is loaded (So either using useEffect or in componentDidMount )

I will eventually do a write-up on this after I finish setting up my initial project. Hopes this helps someone.