hack css handling

solves vercel/next.js#5598

components/Nav.js

@@ -12,10 +12,10 @@ const Nav = () => {
       <Link href="/">
         <a>{t("invite")}</a>
       </Link>
-      <Link href="info">
+      <Link href="/info">
         <a>{t("info")}</a>
       </Link>
-      <Link href="rsvp">
+      <Link href="/rsvp">
         <a>{t("rsvp")}</a>
       </Link>
     </NavStyles>

pages/_app.js

@@ -1,6 +1,7 @@
 import App from "next/app";
 import { ThemeProvider, createGlobalStyle } from "styled-components";
 import "../common/i18n";
+import "../public/empty.css";
 
 import Page from "../components/Page";
 

pages/info.js

@@ -17,7 +17,7 @@ const Info = () => {
   const { t } = useTranslation();
 
   return (
-    <div>
+    <>
       <Section title={t("date")} image="date.svg">
         <h2>{t("saturday")}</h2>
       </Section>
@@ -59,7 +59,7 @@ const Info = () => {
       <Section title={t("map")} image="map.svg">
         <Map />
       </Section>
-    </div>
+    </>
   );
 };
 

pages/rsvp.js

@@ -8,10 +8,10 @@ import {
 } from "../components/styles/AttendanceStyles";
 import Form from "../components/Form";
 
-const RSVP = () => {
+const Rsvp = () => {
   const { t } = useTranslation();
   const [selected, setSelected] = useState(false);
-  const [attending, setAttending] = useState("");
+  const [attending, setAttending] = useState(null);
 
   return (
     <>
@@ -37,9 +37,9 @@ const RSVP = () => {
           <span>{t("decline")}</span>
         </DeclineButton>
       </Attendance>
-      <Form selected={selected} attending={attending} />
+      {selected ? <Form selected={selected} attending={attending} /> : null}
     </>
   );
 };
 
-export default RSVP;
+export default Rsvp;