Next.js 在内容为动态时尝试静态构建站点

Question

In my Next.js application I have a Redux state.

Some routes work with the Redux state, whose values were previously set by the client. However, because they are still undefined at the beginning, Next.js gives an error

When I build my app, it says following:

npm run build

[=   ] info  - Generating static pages (0/5)TypeError: Cannot read properties of undefined (reading 'possibleAmounts')
    at Amount (C:\Users\User\Desktop\test\.next\server\pages\boarding\amount.js:120:111)
    at Wc (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
    at Zc (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:74:209)

Error occurred prerendering page "/boarding/amount". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'possibleAmounts')
    at Amount (C:\Users\User\Desktop\test\.next\server\pages\boarding\amount.js:120:111)
    at Wc (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)
    at Zc (C:\Users\User\Desktop\test\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:74:209)
{
  username: null,
  service: null,
  amount: null,
  price: null,
  picture: null,
  posts: null,
  followers: null,
  following: null,
  name: null,
  type: null,
  bio: null
}

Answer 1

Hi you have to use special routine to get your store on server side, there is bunch google searches you can do like: "SSR next redux"

so to use store on server side you have two main approaches, the first one would be something like that:

const createStore = (preloadedState) => {
  return configureStore({
    reducer: {
      nextRepo: nextSlice,
    },
    preloadedState,
  });
};

let store;
export const initialiseStore = (preloadedState) => {
  let _store = store ?? createStore(preloadedState);

  if (preloadedState && store) {
   _store = createStore({ ...store.getState(), ...preloadedState });
    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;
};

getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext);
  //initialise redux store on server side
  const reduxStore = initialiseStore({});
  const { dispatch } = reduxStore;
  const res = await   fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()  
  dispatch(setStars({ stars: json.stars }));

  appProps.pageProps = {
    ...appProps.pageProps,
    initialReduxState: reduxStore.getState(),
  };

  return appProps;
};

https://www.quintessential.gr/blog/development/how-to-integrate-redux-with-next-js-and-ssr

and a second one called "Wrapper" using HOC

import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
import { authSlice } from "./authSlice";
import { createWrapper } from "next-redux-wrapper";

const makeStore = () =>
  configureStore({
    reducer: {
      [authSlice.name]: authSlice.reducer,
    },
    devTools: true,
  });

export type AppStore = ReturnType<typeof makeStore>;
export type AppState = ReturnType<AppStore["getState"]>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  AppState,
  unknown,
  Action
>;

export const wrapper = createWrapper<AppStore>(makeStore);

import { wrapper } from "../store/store";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default wrapper.withRedux(MyApp);

export const getServerSideProps = wrapper.getServerSideProps(
  (store) =>
    async ({ params }) => {
      // we can set the initial state from here
      // we are setting to false but you can run your custom logic here
      await store.dispatch(setAuthState(false)); 
      console.log("State on server", store.getState());
      return {
        props: {
          authState: false,
        },
      };
    }
);

https://blog.logrocket.com/use-redux-next-js/

Since you don't post any actual code, i have no clue what's in your redux store and how that is used, i can only recommend these two approaches, but you have to decide witch suits you best