使用 Next.js 在兩個頁面之間持久化數據

Question

我想重構我的 Next.js webapp 讓不同的頁面處理不同的屏幕。 目前，我有這個組件持有幾個狀態來知道我在哪個屏幕中。在 jsx 部分，我使用{value &&... }來呈現正確的組件。

但是我覺得這不是很好的設計，當屏幕越來越多時將無法維護。

我也想避免 Redux 因為它對我的項目來說太過分了。

我正在考慮在 cookies 中保留數據，以便在呈現新頁面時可以在每個組件中使用 getInitialProps 檢索它們，但是有沒有更優雅的方法？

我已經閱讀了有關調整_app.js的信息，但我不確定這樣做的后果，以及它如何幫助我..

有什么建議嗎？

Answer 1

當您的多個頁面需要使用相同的數據時，您可以使用 Context 來存儲結果。 這是一種無需使用復雜且更自給自足的庫（如redux即可進行集中存儲的好方法

您可以在 _app.js 文件中實現上下文，該文件必須位於根文件夾中。 這樣 next.js 將其視為根包裝器，您只需要使用 1 個 Context 實例

上下文/appContext

import React from 'react';
const AppContext = React.createContext();
export const AppProvider = AppContext.Provider;
export const AppConsumer = AppContext.Consumer;
export default AppContext;

_app.js

import React from 'react'
import App from 'next/app'
import AppProvider from '../contexts/appContext';
class MyApp extends App {
  state={
    data:[]
  }
  render() {
    const { Component, pageProps } = this.props;
    // You can implement logic in this component to fetch data and update state
    return (
      <div>
        <AppProvider value={this.state.data}> // pass on value to context
          <Component {...pageProps} />
        </AppProvider>
      </div>
    )
  }
}
export default MyApp

現在進一步每個組件可以通過使用 AppConsumer 或useContext如果你使用鈎子來使用上下文值

請在此處閱讀有關如何使用上下文的更多信息