Next.js 获取请求 - Javascript

什么是 Next.js？

Next.js 是一个 React 框架，用于在服务器端和客户端呈现 React 组件。它是基于 Node.js 的框架，可以帮助开发者轻松地构建服务器渲染和静态站点。

使用 Next.js 获取请求

Next.js 中有一个 getInitialProps 方法，用于在组件加载时获取数据。此方法会在服务器和客户端均运行，因此您可以在适当的时间点获取所需的数据。

以下是一个简单的示例：

import React from "react";
import axios from "axios";

const Index = ({ data }) => (
  <div>
    {data.map(item => (
      <div key={item.id}>{item.title}</div>
    ))}
  </div>
);

Index.getInitialProps = async ctx => {
  const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
  const data = await res.data;

  return { data };
};

export default Index;

在上面的代码中，我们使用了 axios 库来获取一个 JSON 数据。然后，我们将所获取的数据作为 props 传递给组件。最后，我们按照惯例将组件导出到默认的 Next.js 模块导出。

结论

通过 Next.js，您可以使用 getInitialProps 方法获取数据，并将其作为 props 传递给组件。这使得开发过程变得更加轻松和快速。