Rozdziel pages na mniejsze komponenty. Taki pages/index.js jest za ciężki do czytania. Tyle tam stanów, że łatwo się pogubić. Możesz zrobić context do zarządzania logiką, lub ogarnąć własny hook, który po prostu przeniesie logikę poza wygląd.
Jest też sporo <svg>, może warto by było ogarnąć z tego osobne komponenty jako ikonki ;)
Używasz array.map i w środku jest tona jsx'a, a mógłby być to osobny komponent.
pages/components/Nav.js chyba wygeneruje Ci route (https://cal-calculator-portfolio-project.netlify.app/components/nav), czyli przeczytaj o routingu w nextjs, i przenieś components poza pages
Masz tam: typeof window === !"undefined", to chyba miało sprawdzać, czy jest uruchomiony na kliencie, ale typeof window zawsze zwraca string, a !"undefined" zwróci boolean - false, czyli w złym miejscu jest wykrzyknik, teraz wynik tego porównania zawsze zwróci false, przez co hideButton się nie wykona na scroll. Fajnie jakby to był const, którego możesz zaimportować, np:
// np utils/runtime.js
export const isServer = typeof window === 'undefined';
export const isClient = !isServer;
funkcja hideButton nie powinna używać document.querySelector. Elementy w react/next chwytamy za pomocą ref (np z useRef). Zamiast używać domElement.classList, powinieneś ogarnąć to przez className danego elementu. Staramy się nie zmieniać bezpośrednio elementów DOM.
To pierwsze z rzeczy z pages/index.js, które możesz poprawić. Powodzenia
offtop:nie jestem fanem tailwind, do szybkiego protypowania to spoko, ale tak na co dzień wolę styled-components,