„SendFox“ naujienlaiškio registracijos formos sukūrimas programoje Next.js: pamoka

Įvadas

„SendFox“ yra populiari „AppSumo“ sukurta naujienlaiškių paslauga. Bendrovė garsėja savo parduotuve su visą gyvenimą trunkančiais programinės įrangos pasiūlymais. Produktas turi apribojimų ir nėra tobulas sprendimas, bet jei jums reikia patikimo įrankio su nuspėjama kaina, jis gali būti kaip tik jums tinkamas. Taip pat yra dosni nemokama pakopa.

Internete nėra daug pavyzdžių, kaip sukurti registracijos formą be jos įdėjimo. Jie neatrodo geriausiai ir nežaidžia gražiai su JS karkasais.

Sukurkime Next.js formos komponentą ir API maršrutą, kuris suteiks mums visišką kontrolę.

aš naudoju shadcn/ui UI komponentams ir lucide-react piktogramoms. Šiuos komponentus galite lengvai pakeisti kažkuo kitu.

Sąranka

Praleiskite, jei pridedate tai prie esamos programos.

Jei norite sekti šią mokymo programą nuo nulio, atlikite šiuos veiksmus.

1. Nustatyti Next.js programą naudodami shadcn/ui – nuoroda

2. Pridėti komponentų: npx shadcn-ui@latest add button input

3. Įdiekite piktogramų paketą: npm i lucide-react

Viskas gerai.

SendFox API

„SendFox“ turi labai paprastą API dokumentaciją, kurią galite rasti čia: https://help.sendfox.com/article/278-endpoints.

Iš savo „SendFox“ paskyros turėsite gauti API raktą. Eikite į nustatymai, API skiltis, ir spustelėkite „Sukurti naują prieigos raktą“.

Nukopijuokite ir saugiai saugokite.

API maršrutas

Pradėkime nuo API maršruto, kuris tvarkys mūsų prisiregistravimo logiką.

Prie šio kodo galite pridėti daugiau patvirtinimų, kad iš anksto filtruotumėte prisiregistravimus su šlamštu.

Taip pat galbūt norėsite išsaugoti el. laiškus kitur, o ne „SendFox“, kad būtų atleistas.

Sukūriau failą app/api/newsletter/route.ts su tokiu turiniu:

export async function POST(request: Request) {
  const { email } = await request.json();

  if (!email) {
    return Response.json({ error: "Email is required" }, { status: 400 });
  }

  const response = await fetch("<https://api.sendfox.com/contacts>", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.SENDFOX_TOKEN}`,
    },
    body: JSON.stringify({
      email,
    }),
  });

  if (!response.ok) {
    return Response.json({ error: "Failed to subscribe" }, { status: 500 });
  }

  return Response.json({ message: "Subscribed successfully" });
}

Galite tai išbandyti programoje „Postman“ arba per „curl“ arba tiesiog prisijungti ir sukurti formą.

Formos komponentas

Sukurkite failą app/components/send-fox-form.tsx su tokiu turiniu:

"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Loader2 } from "lucide-react";
import { useState } from "react";

type FormStatus = "idle" | "loading" | "success" | "error";

const ButtonLoading = () => (
  <Button disabled>
    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
    Please wait
  </Button>
);

const SendFoxForm = () => {
  const (email, setEmail) = useState("");
  const (status, setStatus) = useState<FormStatus>("idle");
  const (errorMessage, setErrorMessage) = useState("");

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setStatus("loading");
    setErrorMessage("");

    try {
      const response = await fetch("/api/newsletter", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ email: email.trim().toLowerCase() }),
      });

      const data = await response.json();
      if (response.ok) {
        setStatus("success");
      } else {
        setStatus("error");
        setErrorMessage(data.message || "Failed to subscribe");
      }
    } catch (error) {
      setStatus("error");
      setErrorMessage("An error occurred while trying to subscribe.");
    }
  };

  return (
    <div className="w-full">
      <form
        onSubmit={handleSubmit}
        className="flex w-full max-w-md items-center space-x-2 mx-auto"
      >
        <Input
          className="w-full"
          type="email"
          placeholder="Email"
          name="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          disabled={status === "loading" || status === "success"}
        />
        {status === "loading" ? (
          <ButtonLoading />
        ) : (
          <Button type="submit" disabled={status === "success"}>
            {status === "success" ? "Subscribed!" : "Subscribe"}
          </Button>
        )}
      </form>
      <div className="pt-2 min-h-(1em)">
        {(status === "idle" || status === "loading") && <p>&nbsp;</p>}
        {status === "error" && (
          <p className="text-sm text-red-500 text-center">{errorMessage}</p>
        )}
        {status === "success" && (
          <p className="text-sm text-muted text-center">
            Subscription successful! Thank you for joining.
          </p>
        )}
      </div>
    </div>
  );
};

export default SendFoxForm;

The SendFoxForm komponentas tvarko prenumeratos logiką ir vartotojo sąveiką. Jis naudoja useState valdyti formos būseną ir vartotojo įvestį. Formą sudaro trys būsenos: idle, loadingir successkiekvienas nukreipia vartotoją per prenumeratos procesą ir pateikia atitinkamą atsiliepimą.

Verslo logikos apžvalga:

1. Formų pateikimo tvarkymas:

   • Kai forma pateikiama, ji neleidžia vykdyti numatytosios formos ir nustato būseną į loading.

   • El. pašto įvestis apkarpoma ir konvertuojama į mažąsias raides prieš siunčiant į serverį.

2. API sąveika:

   • Forma pateikia POST užklausą /api/newsletter maršrutą su vartotojo el.

   • Jei atsakymas buvo sėkmingas (response.ok), būsena pasikeičia į success.

   • Jei įvyksta klaida, būsena pasikeičia į errorir rodomas atitinkamas klaidos pranešimas.

3. Vartotojų atsiliepimai:

   • Kol forma pateikiama, rodomas įkėlimo mygtukas, informuojantis vartotoją, kad reikia palaukti.

   • Jei prenumerata sėkminga, pasirodo „Prenumeruota! rodomas pranešimas, o tolesnis įvestis išjungtas.

   • Jei įvyksta klaida, rodomas klaidos pranešimas, nurodantis vartotoją ištaisyti problemą.

Išvada

Dabar savo Next.js programoje turite veikiančią SendFox naujienlaiškio registracijos formą.

Nors SendFox jokiu būdu nėra tobulas, tai gali būti tinkamas pasirinkimas jūsų pirmajam naujienlaiškiui ar šalutiniam projektui.

Asmeniškai aš jį naudojau viename iš savo būsimų projektų ir iki šiol tai buvo gera patirtis. Jame trūksta funkcijų, susijusių su kelių kontaktų sąrašų tvarkymu, todėl tai gali būti ne geriausias pasirinkimas, jei vykdote kelis projektus su atskirais domenais.

Prenumeruokite mano profilį kairėje įvesdami savo el. pašto adresą ir gaukite naujausią informaciją apie mano straipsnius! Netrukus išleisiu beprotiškai įdomų projektą, kuriame naudojamas šis sprendimas!

Nepamirškite sekti manęs Twitter @horosinir užsiprenumeruokite mano tinklaraščio naujienlaiškį, kad gautumėte daugiau patarimų ir įžvalgų!