1

I would like to base an input search.

To be able to send the content to another page which then makes an API request with the content of the input search.

Basically I would like the user to be able with the search bar, type "something" and that this "something" I get it to make an API request with.

My file :

- 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,
    },
  };
}
DoctorPok
  • 86
  • 1
  • 11

1 Answers1

0

The way you are doing this it is not possible.

You can make page server side rendered, send data as query parameters and then you can access router (there are query params) in getServerSideProps. If you want to make static page, then you can fetch data client side.

shobe
  • 391
  • 2
  • 7
  • You can find example in first comment on this post https://stackoverflow.com/questions/61222726/dynamic-routing-with-getserversideprops-in-nextjs – shobe Jun 04 '21 at 10:05