hopefully works now?

src/app/contact/ContactComponent.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import SubmitContact from "@/components/contact";
-import { useActionState } from "react";
-import ReCAPTCHA from "react-google-recaptcha";
-
-export default function ContactComponent({
-  recaptchaSiteKey,
-}: {
-  recaptchaSiteKey: string | undefined;
-}) {
-  const inputStyle = {
-    backgroundColor: "#111",
-    color: "#eee",
-    borderWidth: 0,
-    padding: "1rem",
-  };
-  const [state, formAction, pending] = useActionState(SubmitContact, null);
-
-  return (
-    <>
-      Need to get in touch?
-      <br />
-      <br />
-      <form
-        action={formAction}
-        style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
-      >
-        <input
-          style={inputStyle}
-          type="text"
-          name="name"
-          placeholder="Your Name"
-          required
-        />
-        <input
-          style={inputStyle}
-          type="email"
-          name="email"
-          placeholder="Your Email"
-          required
-        />
-        <textarea
-          style={{ ...inputStyle, resize: "none", height: "5rem" }}
-          name="message"
-          placeholder="Your Message"
-          required
-        ></textarea>
-        {state && (
-          <span
-            style={{
-              padding: "1rem",
-              backgroundColor: "error" in state ? "#f003" : "#0f03",
-            }}
-          >
-            {"error" in state && state.error}
-            {"success" in state && "Submitted successfully!"}
-          </span>
-        )}
-        <ReCAPTCHA sitekey={recaptchaSiteKey ?? ""} theme="dark" />
-        <button
-          type="submit"
-          style={{
-            ...inputStyle,
-            backgroundColor: pending ? "#333" : "#111",
-            cursor: pending ? "default" : "pointer",
-          }}
-          onMouseEnter={(e) => {
-            if (!pending) e.currentTarget.style.backgroundColor = "#333";
-          }}
-          onMouseLeave={(e) => {
-            if (!pending) e.currentTarget.style.backgroundColor = "#111";
-          }}
-          disabled={pending || recaptchaSiteKey == null}
-        >
-          {pending ? "Sending..." : "Submit"}
-        </button>
-      </form>
-    </>
-  );
-}

src/app/contact/action.ts

@@ -0,0 +1,4 @@
+"use server";
+export async function getReCaptchaSiteKey() {
+  return process.env.RECAPTCHA_SITE_KEY;
+}

src/app/contact/page.tsx

@@ -1,12 +1,88 @@
-"use server";
+"use client";
 
-import ContactComponent from "./ContactComponent";
+import SubmitContact from "@/components/contact";
+import { useActionState, useEffect, useState } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
+import { getReCaptchaSiteKey } from "./action";
 
-export default async function ContactPage() {
-  const recaptchaSiteKey = await getSiteKey();
-  return <ContactComponent recaptchaSiteKey={recaptchaSiteKey} />;
-}
-
-async function getSiteKey() {
-  return process.env.RECAPTCHA_SITE_KEY;
+export default function ContactPage() {
+  const [recaptchaSiteKey, setRecaptchaSiteKey] = useState<string | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    getReCaptchaSiteKey().then(setRecaptchaSiteKey);
+  }, []);
+
+  const inputStyle = {
+    backgroundColor: "#111",
+    color: "#eee",
+    borderWidth: 0,
+    padding: "1rem",
+  };
+  const [state, formAction, pending] = useActionState(SubmitContact, null);
+
+  return recaptchaSiteKey == null ? (
+    <>Loading...</>
+  ) : (
+    <>
+      Need to get in touch?
+      <br />
+      <br />
+      <form
+        action={formAction}
+        style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+      >
+        <input
+          style={inputStyle}
+          type="text"
+          name="name"
+          placeholder="Your Name"
+          required
+        />
+        <input
+          style={inputStyle}
+          type="email"
+          name="email"
+          placeholder="Your Email"
+          required
+        />
+        <textarea
+          style={{ ...inputStyle, resize: "none", height: "5rem" }}
+          name="message"
+          placeholder="Your Message"
+          required
+        ></textarea>
+        {state && (
+          <span
+            style={{
+              padding: "1rem",
+              backgroundColor: "error" in state ? "#f003" : "#0f03",
+            }}
+          >
+            {"error" in state && state.error}
+            {"success" in state && "Submitted successfully!"}
+          </span>
+        )}
+        <ReCAPTCHA sitekey={recaptchaSiteKey ?? ""} theme="dark" />
+        <button
+          type="submit"
+          style={{
+            ...inputStyle,
+            backgroundColor: pending ? "#333" : "#111",
+            cursor: pending ? "default" : "pointer",
+          }}
+          onMouseEnter={(e) => {
+            if (!pending) e.currentTarget.style.backgroundColor = "#333";
+          }}
+          onMouseLeave={(e) => {
+            if (!pending) e.currentTarget.style.backgroundColor = "#111";
+          }}
+          disabled={pending || recaptchaSiteKey == null}
+        >
+          {pending ? "Sending..." : "Submit"}
+        </button>
+      </form>
+    </>
+  );
 }