title: How redux works with next.js?
body: <p>I need to integrate redux with an existing next project. but currently, I don´t understand how the store works server-side.</p>
  <p>I´m following this example:</p>
  <p><a href="https://github.com/vercel/next.js/blob/canary/examples/with-redux/pages/ssg.js" rel="nofollow noreferrer">https://github.com/vercel/next.js/blob/canary/examples/with-redux/pages/ssg.js</a></p>
  <pre><code>export const initializeStore = (preloadedState) =&gt; {
    let _store = store ?? initStore(preloadedState)
  
    // After navigating to a page with an initial Redux state, merge that state
    // with the current state in the store, and create a new store
    if (preloadedState &amp;&amp; store) {
      _store = initStore({
        ...store.getState(),
        ...preloadedState,
      })
      // Reset the current store
      store = undefined
    }
  
    // For SSG and SSR always create a new store
    if (typeof window === 'undefined') return _store
    // Create the store once in the client
    if (!store) store = _store
  
    return _store
  }
  </code></pre>
  <p>Why a store is created in the server, I´m asking is because in the client also is created so, what store is finally used.</p>
  <p>Why do I need to create an store in the server if in the client another totally different is created?</p>
  <pre><code>import { Provider } from 'react-redux'
  import { useStore } from '../store'
  
  export default function App({ Component, pageProps }) {
    const store = useStore(pageProps.initialReduxState)
  
    return (
      &lt;Provider store={store}&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Provider&gt;
    )
  }
  </code></pre>
  <p>The component definition below is also rendered in the client?</p>
  <pre><code>export function useStore(initialState) {
    const store = useMemo(() =&gt; initializeStore(initialState), [initialState])
    return store
  }
  </code></pre>