Next.js getServerSideProps 无法正常运行

问题描述

我正在尝试更深入地研究 Next.js，目前我在 getServerSideProps() 函数中。我不知道为什么，看起来这个函数没有工作/运行，我使用 console.log 并且它没有显示我试图显示的日志。

这是我的代码：

import React from "react";

export default function Get({ results: query }) {
  return (
    <div>
      <h1>Check getServerSideProps</h1>
      {query.map((q,index) => {
        <div key={index}>
          <h1>{q.title}</h1>
          <p>{q.body}</p>
        </div>;
      })}
    </div>
  );
}

export async function getServerSideProps(context) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/?q=${context.params.query}`
  );
  console.log("CHECK");
  const datas = await res.json();
  return { props: { results: datas } };
}

这是结果：

以下是我的 package.json 文件的详细信息：

{
  "name": "doqmentnew","version": "0.1.0","private": true,"scripts": {
    "dev": "next dev","build": "next build","start": "next start"
  },"dependencies": {
    "next": "10.0.5","react": "17.0.1","react-dom": "17.0.1"
  }
}

解决方法

getServerSideProps 顾名思义是一个在服务器上运行的函数。您在那里看到的是客户端控制台，这意味着您会在那里看到由应用程序的客户端版本制作的任何 console.log。要查看您想要的 console.log，您应该尝试查看启动应用程序的终端。 （您运行 yarn dev/npm run dev 的地方）

,

我找到了我的答案，顺便说一下，最后一个任务是显示数据，所以我要做的是在 useEffect 中使用 useState 将数组（获取的数据）置于状态，并像往常一样显示它。 .