时间戳

首页 > 解决方案 > 如何将数据发送到另一个 NextJS 页面？

javascript - 如何将数据发送到另一个 NextJS 页面？

问题描述

我想基于输入搜索。

为了能够将内容发送到另一个页面，然后该页面使用输入搜索的内容发出 API 请求。

基本上，我希望用户能够使用搜索栏，输入“某物”，并且我可以使用这个“某物”来发出 API 请求。

我的文件：

- index.js

- search

  - q.js

index.js：

...

form action="./search/q" method="get">
  <button type="submit">
    <i class="fas fa-search fa-2x"></i>
  </button>
  <input type="text" placeholder="Search" id="query" name="serach" />
</form>

q.js：

import Head from "next/head";

export default function Home({ articles }) {
  return (
    <>
      <Head>
        <title>Test</title>
      </Head>
      <main class="container">...</main>
    </>
  );
}

export async function getStaticProps() {
  const articles = await fetch(`...${query}`).then((r) => r.json());
  return {
    props: {
      articles,
    },
  };
}

标签： javascripthtmlnext.js

解决方案

你这样做的方式是不可能的。

您可以使页面服务器端呈现，将数据作为查询参数发送，然后您可以在 getServerSideProps 中访问路由器（有查询参数）。如果要制作静态页面，则可以在客户端获取数据。

推荐阅读