Next.js 在內容為動態時嘗試靜態構建站點

Question

在我的 Next.js 應用程序中，我有一個 Redux state。

某些路由適用於 Redux state，其值先前由客戶端設置。 但是因為一開始還沒有定義，所以Next.js報錯

當我構建我的應用程序時，它顯示以下內容：

npm 運行構建

[=   ] 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

嗨，你必須使用特殊的例程來讓你的商店在服務器端，你可以做一堆谷歌搜索：“SSR next redux”

所以要在服務器端使用 store 你有兩種主要方法，第一種方法是這樣的：

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

第二個使用 HOC 稱為“Wrapper”

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/

由於您沒有發布任何實際代碼，我不知道您的 redux 商店中有什么以及如何使用，我只能推薦這兩種方法，但您必須確定最適合您的女巫