NextJS中如何将API获取的JSON对象传递至另一页面？

嘿，刚接触Next.js和React的话，这个跨页面传递数据的问题确实容易懵，我给你几个实用的方案，你可以根据自己的需求选～

方案1：通过URL查询参数传递（适合小体量数据） #

如果你的response数据结构不复杂、体积不大，可以把它转成字符串后通过URL参数传递。优点是刷新页面后数据不会丢失，缺点是数据会暴露在URL里，且有长度限制。

修改Page A的跳转逻辑 #

把IconButton的href改成拼接了序列化数据的地址：

import React from "react";
import Head from "next/head";
import { params } from "../components/ApiParams";
import fetch from "node-fetch";
import { IconButton, ChevronRightIcon } from "@mui/material"; // 假设你用的是MUI组件

const Chapter = ({ response }) => {
  return (
    <div>
      <Head>
        <title>Chapter</title>
      </Head>
      <div>
        {response.data.mainValue}
        {/* 把response转成编码后的字符串拼到URL里 */}
        <IconButton href={`/chapters/secondPage?data=${encodeURIComponent(JSON.stringify(response))}`}>
          <ChevronRightIcon />
        </IconButton>
      </div>
    </div>
  );
};

// 原getFetch和getServerSideProps代码不变
const getFetch = async (params) => {
  const chapterUrl = `https://localhost/chapter/data-provider`;
  const response = fetch(chapterUrl, params);
  return response;
};

export const getServerSideProps = async (context) => {
  try {
    const res = await getFetch(params);
    const response = await res.json();
    return { props: { response } };
  } catch (error) {
    console.log("Error in getServerSideProps function: ", error);
  }
};

export default Chapter;

在Page B接收数据 #

可以用getServerSideProps或者客户端的useRouter来解析参数：

import React from "react";
import Head from "next/head";
import { useRouter } from 'next/router';

export default function secondPage(){
  const router = useRouter();
  // 解析URL里的参数
  const responseData = router.query.data 
    ? JSON.parse(decodeURIComponent(router.query.data)) 
    : null;

  return(
    <div>
      {responseData ? (
        <div>{responseData.data.mainValue}</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

方案2：用Next.js Router的状态传递（不暴露数据） #

如果不想把数据放在URL里，可以用Next.js路由的state参数传递，数据会存在客户端内存里。优点是数据不暴露，缺点是刷新Page B后状态会丢失。

修改Page A的跳转逻辑 #

改用useRouter的push方法带状态跳转：

import React from "react";
import Head from "next/head";
import { params } from "../components/ApiParams";
import fetch from "node-fetch";
import { IconButton, ChevronRightIcon } from "@mui/material";
import { useRouter } from 'next/router';

const Chapter = ({ response }) => {
  const router = useRouter();

  const goToSecondPage = () => {
    router.push(
      '/chapters/secondPage',
      undefined,
      { state: { response } } // 把response存在路由状态里
    );
  };

  return (
    <div>
      <Head>
        <title>Chapter</title>
      </Head>
      <div>
        {response.data.mainValue}
        <IconButton onClick={goToSecondPage}>
          <ChevronRightIcon />
        </IconButton>
      </div>
    </div>
  );
};

// 原getFetch和getServerSideProps代码不变
const getFetch = async (params) => {
  const chapterUrl = `https://localhost/chapter/data-provider`;
  const response = fetch(chapterUrl, params);
  return response;
};

export const getServerSideProps = async (context) => {
  try {
    const res = await getFetch(params);
    const response = await res.json();
    return { props: { response } };
  } catch (error) {
    console.log("Error in getServerSideProps function: ", error);
  }
};

export default Chapter;

在Page B接收状态 #

通过useRouter获取路由状态：

import React from "react";
import Head from "next/head";
import { useRouter } from 'next/router';

export default function secondPage(){
  const router = useRouter();
  // 从路由状态里取response
  const { response } = router.state || {};

  return(
    <div>
      {response ? (
        <div>{response.data.mainValue}</div>
      ) : (
        <div>No data received</div>
      )}
    </div>
  );
}

方案3：在Page B重新请求API（最可靠） #

如果你的API支持通过唯一标识（比如response.data.id）获取数据，最推荐的方式是Page A只传这个标识，Page B自己调用API获取数据。优点是刷新页面数据不会丢，且数据始终保持最新，适合大数据或需要持久化的场景。

修改Page A的跳转逻辑 #

只传递数据的唯一标识：

<IconButton href={`/chapters/secondPage?id=${response.data.id}`}>
  <ChevronRightIcon />
</IconButton>

在Page B重新请求数据 #

复用Page A的请求逻辑，根据ID获取数据：

import React from "react";
import Head from "next/head";
import fetch from "node-fetch";
import { params } from "../components/ApiParams";

const secondPage = ({ response }) => {
  if (!response) return <div>Loading...</div>;
  
  return(
    <div>
      {response.data.mainValue}
    </div>
  );
};

export const getServerSideProps = async (context) => {
  const { id } = context.query;
  try {
    // 根据ID请求对应的数据
    const chapterUrl = `https://localhost/chapter/data-provider/${id}`;
    const res = await fetch(chapterUrl, params);
    const response = await res.json();
    return { props: { response } };
  } catch (error) {
    console.log("Error in getServerSideProps function: ", error);
    return { props: { response: null } };
  }
};

export default secondPage;

内容的提问来源于stack exchange，提问作者Sebastian Diaz