困っていること

app.jsでuseDispatchを使おうとすると以下のようなエラーが起きてしまします。
app.js以外のページでは問題なく動くのですがapp.jsだけエラーが発生してしまっていて対処方法が分からず困っています。
エラー文的にはstoreがないよと言われているのですが、必ず毎回呼びたいAPIなのでapp.js内において毎回APIを叩かれるようにしたいのですが、何か対処方法があればご教示いただきたいです。

Server Error
Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>
This error happened while generating the page. Any console logs will be displayed in the terminal window.

import { Provider, useDispatch } from 'react-redux'
import { useStore } from '../store'
import { userAction } from '../duck/user/action'
import axios from 'axios';

function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState)
  const dispatch = useDispatch();
  const setUser = async () => {
    const res = await axios.get(
      'http://localhost:3000/user',
      { withCredentials: true }
    )
    const data = res.data

    dispatch(userAction(
      { nickName: data.nickName }
    ))
  };
  setUser()

  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}
export default App;