I am new to Next Js so apologies for the basic question. How can I achieve the below functionality the correct way in NextJs. The error I am getting is: Error: Hydration failed because the initial UI does not match what was rendered on the server.
I have been reading up on next and I know there are gaps in my knowledge here but I am wondering if anyone on here can help me get the answer quickly so I don't waste any more time.
I would like this app to be SEO friendly, so if there is an issue with the way I am doing the calculation then please let me know.
const calculateAbv = (original: number, final: number): number =>
(final - original) * 131.25;
const formatAbv = (abv: number) : string =>
`${Math.round((abv + Number.EPSILON) * 100) / 100}%`
Abv Calculator Component
const AbvCalculator = () => {
const [finalGravity, setFinalGravity] = useState(1.01);
const [originalGravity, setOriginalGravity] = useState(1.05);
const [abv, setAbv] = useState(calculateAbv(originalGravity, finalGravity));
useEffect(() => {
setAbv(calculateAbv(originalGravity, finalGravity));
}, [finalGravity, originalGravity]);
return (
<>
<Input
bordered
defaultValue={originalGravity.toString()}
type="number"
onChange={(e) => setOriginalGravity(parseFloat(e.target.value))}
/>
<Input
bordered
defaultValue={finalGravity}
type="number"
onChange={(e) => setFinalGravity(parseFloat(e.target.value))}
/>
<Input
readOnly
bordered
value={formatAbv(abv)}
type="text"
/>
</>
);
};
export default AbvCalculator;
And here is the next page:
const Abv: NextPage = () => {
return (
<div className={styles.container}>
<Head>
<title>Abv Calculator</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<PageContainer>
<h1>Abc Calculator</h1>
<p>
This calculator uses the original gravity and final gravity to
calculate the ABV.
</p>
<AbvCalculator/>
</PageContainer>
</main>
</div>
);
};
export default Abv;