编辑“︁Next.js状态同步”︁（章节）

== 实现方法 ==

=== 使用页面属性（Props） ===
最直接的方法是通过页面组件的`getServerSideProps`或`getStaticProps`获取数据，然后作为props传递给组件：

<syntaxhighlight lang="javascript">
// pages/index.js
export async function getServerSideProps() {
  const initialData = await fetchData(); // 从API获取数据
  return { props: { initialData } };
}

function HomePage({ initialData }) {
  const [data, setData] = useState(initialData);
  // 客户端可以更新状态
  return <div>{JSON.stringify(data)}</div>;
}
</syntaxhighlight>

=== 使用Context API ===
对于全局状态，可以结合React Context：

<syntaxhighlight lang="javascript">
// context/AppContext.js
import { createContext, useContext, useState } from 'react';

const AppContext = createContext();

export function AppProvider({ children, initialState }) {
  const [state, setState] = useState(initialState);
  return (
    <AppContext.Provider value={{ state, setState }}>
      {children}
    </AppContext.Provider>
  );
}

// pages/_app.js
function MyApp({ Component, pageProps }) {
  return (
    <AppProvider initialState={pageProps.initialState}>
      <Component {...pageProps} />
    </AppProvider>
  );
}
</syntaxhighlight>

=== 使用第三方状态库 ===
流行库如[[Redux]]、[[Zustand]]或[[Jotai]]也可用于状态同步：

<syntaxhighlight lang="javascript">
// store.js (Zustand示例)
import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
}));

// 在组件中使用
function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>{count}</button>;
}
</syntaxhighlight>