Next js fetch API query - next.js

Question

const Fetch = ({nationalize}) => {
return (
<div>
<h1>Nationalize</h1>
<h5>
<h4>You're {nationalize.name} and here's your results</h4>
{nationalize.country.map((i)=>{
return(
<div key={i.country_id}>
<h5>{(i.probability)*100}% {i.country_id} </h5>
</div>
)
})}
</h5>
</div>
);
}
export const getStaticProps = async (ctx) => {
const res = await fetch('https://api.nationalize.io?name=joe')
const nationalize = await res.json()
return {
props:{
nationalize,
}
}
}
export default Fetch;
So this is my NextJs page fetch API from nationalize.io, the API takes a name as a query. The code works just fine but I wanted to take the name query from an input field instead of being set manually. In this example it is Joe 'https://api.nationalize.io?name=joe', any suggestion? thank you

Answer 1

You use getStaticProps which pre-builds the page before sending it to your browser, so all data inside getStaticProps has to be static as the name says, and not being taken from any user input or query params.
If you'd like someone to change the name, you can either render it on the server using getServerSideProps and taking the name from the params, or fetch it on client-side via a user input as you mentioned:
import { useState } from "react";
const Fetch = () => {
const [name, setName] = useState("");
const [nationalize, setNationalize] = useState();
const submitName = async (name) => {
const res = await fetch("https://api.nationalize.io?name=" + name);
const nationalizeJson = await res.json();
setNationalize(nationalizeJson);
};
return (
<div>
<h1>Nationalize</h1>
{nationalize && (
<>
<h4>You're {nationalize.name} and here's your results</h4>
{nationalize.country.map((i) => {
return (
<div key={i.country_id}>
<h5>
{i.probability * 100}% {i.country_id}{" "}
</h5>
</div>
);
})}
</>
)}
<div>
<input
id="input"
type="text"
placeholder="Enter your name"
value={name}
onChange={(e) => setName(e.target.value)}
style={{ padding: "10px" }}
/>
<button
onClick={() => {
if (!name) return;
submitName(name);
}}
>
Submit
</button>
</div>
</div>
);
};
export default Fetch;
Here's how it works:
Let user enter his name with a controlled text input (https://reactjs.org/docs/forms.html#controlled-components) and store the value in the state name
When a user clicks the "Submit" button, call the api as you did in getStaticProps but take the name from the state name, and store the returned JSON from the api in the state nationalize.
In the JSX part, check if nationalize is defined, and only then display the information fetched from the api.
This is obviously just a demo and could use some optimization like styling or a loading indicator.