Javascript 如何将数据发送到另一个NextJS页面？_Javascript_Html_Next.js

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

javascript html next.js

Javascript 如何将数据发送到另一个NextJS页面？,javascript,html,next.js,Javascript,Html,Next.js,我想以输入搜索为基础能够将内容发送到另一个页面，然后该页面使用输入搜索的内容发出API请求基本上，我希望用户能够使用搜索栏，键入“something”，然后我得到这个“something”来发出API请求我的档案： - index.js - search - q.js index.js： ... form action="./search/q" method="get"> <button type="submit

我想以输入搜索为基础

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

基本上，我希望用户能够使用搜索栏，键入“something”，然后我得到这个“something”来发出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>

。。。
form action=“./search/q”method=“get”>

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,
    },
  };
}

从“下一个/Head”导入Head；
导出默认函数Home（{articles}）{
返回(
试验
...
);
}
导出异步函数getStaticProps（）{
const articles=wait fetch（`…${query}`）。然后（（r）=>r.json（））；
返回{
道具：{
文章,，
},
};
}

您这样做是不可能的

您可以使页面服务器端呈现，将数据作为查询参数发送，然后可以访问getServerSideProps中的路由器（有查询参数）。若你们想创建一个静态页面，那个么你们可以从客户端获取数据。

你们有一个示例代码吗？你们可以在这篇文章的第一条评论中找到这个示例