Jak spojit Next.js a Power Automate

2026-02-28

Úvod

"Potřebuji jen jednoduchý formulář." Věta, kterou se mnoho projektů zkomplikuje. Místo jednoduchého HTML formuláře skončíte nastavováním SMTP nebo placením předražených služeb jako Formspree. Při tvorbě tohoto webu jsem si položil otázku: "Proč nevyužit již dostupné nástroje a zjednodušit si život?"

V tomto článku vám ukážu, jak jsem spojil Next.js a Microsoft Power Automate. Výsledkem je kontaktní formulář, který se spustí jednoduchým HTTP požadavkem a o vše ostatní od vložení dat do excelové tabulky až po odeslání notifikace o nové zprávě se postará Power Automate. Tento způsob je velice podobný serverless funkcím, kde Power Automate fungují jako náš backendový endpoint.

Proč Power Automate?

Většina vývojářů sáhne po Node.js nebo externích službách. Ale oproti těmto způsobům nabízí Power Automate:

  1. Nulové náklady: Pokud máte Microsoft 365 se školní nebo pracovní licencí, máte i Power Automate.
  2. Flexibilita: Už nechcete dostávat notifikace do mobilní aplikace, ale raději do Teams? Žádný problém.
  3. Bezpečnost: Vše je v rámci Microsoft ekosystému, což znamená, že nemusíte řešit složité zabezpečení dat.

Kdy se to hodí (a kdy ne)

Tuto kombinaci doporučuji používat v případech, kdy potřebujete opravdu jen jednoduchý formulář bez backendu. Samozřejmě pokud nemáte licenci Microsoft 365, tak to není řešení pro vás. Ale pokud ano, je to skvělý způsob, jak rychle a efektivně zpracovat data z formuláře bez nutnosti nastavovat server nebo platit za externí služby. Kdy to tedy není vhodné řešení? Pokud očekáváte stovky požadavků denně, potřebujete, aby se uživatelé autentizovali nebo chcete mít plnou kontrolu nad backendem.

Krok za krokem

Příprava Power Automate

Nejdříve potřebujeme místo, kam budeme posílat data z formuláře. V Power Automate si vytvoříme nový okamžitý tok (Instant cloud flow) a jako spouštěč (trigger) zvolíme "When an HTTP request is received". Tento trigger po nás bude chtít definovat schéma požadavku. Můžete ho buď psát ručně nebo použít ukázkový JSON, který vypadá například takto:

{
  "name": "Jakub Pitner",
  "email": "jakub@zlepsiweb.eu",
  "message": "Tohle je test"
}

*Tip: Po uložení vám Power Automate vygeneruje URL. Tu si zkopírujte do souboru .env.local jako NEXT_PUBLICE_POWER_AUTOMATE_ENDPOINT. Je ale nutné říct, že bezpečnější přístup by bylo použít, alespoň server actions, protože prefix NEXT_PUBLIC ukazuje URL endpointu všem návštěvníkům. *

V této ukázce budeme počítat s validací dat na straně klienta, samozřejmě lze přidat podmínku pro kontrolu, zda jsou všechna pole vyplněná. Po zpracování dat přidáme další krok "Add a row into a table" a vybereme Excel soubor, který máme uložený na OneDrive. Do tohoto kroku namapujeme pole z HTTP požadavku na sloupce v Excelu. Nakonec přidáme krok "Send me a mobile notification" a nastavíme text notifikace, například "Nová zpráva od @{triggerBody()?['name']}". Takto nastavený tok nám zajistí, že po každém odeslání formuláře se vloží informace do excelové tabulky a nám přijde do mobilní aplikace Power Automate notifikace o nové zprávě. Připravený tok v Power Automate

Nastavení Next.js

V Next.js pouze vytvoříme jednoduchý formulář, který bude data ověřovat a odesílat pomocí fetch na URL, kterou nám Power Automate vygeneroval. Kód pro odesílání dat může vypadat například takto:

"use client";

export default function ContactForm() {
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget as HTMLFormElement);
    
    const response = await fetch(process.env.NEXT_PUBLIC_FORM_URL!, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: formData.get('name'),
        email: formData.get('email'),
        message: formData.get('message'),
      }),
    });

    if (response.ok) alert("Zpráva byla úspěšně odeslána!");
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Tady bude tvůj JSX kód formuláře */}
      <input type="text" name="name" placeholder="Vaše jméno" required />
      <input type="email" name="email" placeholder="Váš e-mail" required />
      <textarea name="message" placeholder="Vaše zpráva" rows={5} required></textarea>
      <button type="submit">Odeslat zprávu</button>
    </form>
  );
}

Závěr

Propojení těchto dvou systémů ušetří hodiny práce s nastavováním backendu a zabezpečením. Navíc je celé řešení škálovatelné a přizpůsobitelné podle vašich potřeb. Pokud máte Microsoft 365, neváhejte a vyzkoušejte tento způsob, jak zjednodušit komunikaci se zákazníky a automatizovat procesy.

← Zpět na seznam článků