Landing page dla Google Ads w Next.js, czyli jak budować strony, które konwertują

// app/lp/[slug]/page.tsx
import type { Metadata } from "next";
import { getAllLandingPages, getLandingPage } from "@/lib/cms";
import { LandingPageContent } from "./LandingPageContent";
 
// Statyczna generacja
export async function generateStaticParams() {
  const pages = await getAllLandingPages();
  return pages.map((page) => ({ slug: page.slug }));
}
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const page = await getLandingPage(slug);
 
  return {
    title: page.metaTitle,
    description: page.metaDescription,
    robots: {
      index: page.indexable ?? false,
      follow: page.indexable ?? false,
    },
  };
}
 
export default async function LandingPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const page = await getLandingPage(slug);
 
  return <LandingPageContent page={page} />;
}

// 1. Hero image jako element LCP
import Image from "next/image";
 
<Image
  src="/lp/hero-product.webp"
  alt="Produkt XYZ"
  width={1200}
  height={600}
  preload
  sizes="100vw"
  quality={85}
/>;
 
// 2. next/font obsługuje preload fontów automatycznie
import { Inter } from "next/font/google";
 
const inter = Inter({
  subsets: ["latin", "latin-ext"],
  display: "swap",
});

// 1. Zawsze podawaj wymiary obrazków
<Image width={400} height={300} ... />
 
// 2. Zarezerwuj miejsce dla dynamicznych elementów
<div className="min-h-[60px]"> {/* cookie banner space */}
  <CookieBanner />
</div>
 
// 3. Font display swap + size-adjust
import { Inter } from "next/font/google";
 
const font = Inter({
  subsets: ["latin"],
  display: "swap",
  adjustFontFallback: true, // Next.js automatycznie dopasuje fallback
});

// components/lp/DeferredSections.tsx
"use client";
 
import { useEffect, useRef, useState } from "react";
import dynamic from "next/dynamic";
 
const Testimonials = dynamic(() => import("./Testimonials"), {
  loading: () => <div className="h-[400px]" />,
});
 
const FAQ = dynamic(() => import("./FAQ"), {
  loading: () => <div className="h-[300px]" />,
});
 
// 1. Załaduj sekcje dopiero tuż przed wejściem w obszar widoczny
export function DeferredSections() {
  const [shouldRender, setShouldRender] = useState(false);
  const markerRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    const marker = markerRef.current;
    if (!marker) return;
 
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setShouldRender(true);
        observer.disconnect();
      }
    }, { rootMargin: "200px" });
 
    observer.observe(marker);
    return () => observer.disconnect();
  }, []);
 
  return (
    <div ref={markerRef}>
      {shouldRender && <><Testimonials /><FAQ /></>}
    </div>
  );
}
 
// 2. Nie wrzucaj ciężkiej pracy do handlera submit
// ❌ Źle
const handleSubmit = async () => {
  const validated = heavyValidation(formData); // blokuje main thread
  await sendForm(validated);
};
 
// ✅ Dobrze — handler jest lekki, cięższa walidacja trafia na serwer
const handleSubmit = async () => {
  setLoading(true);
  await fetch("https://api.example.com/leads/validate-and-send", {
    method: "POST",
    body: formData,
  });
  setLoading(false);
};

import Script from "next/script";
 
// Tag pomiarowy, który musi wystartować wcześnie
<Script src="https://www.googletagmanager.com/gtag/js?id=AW-XXX"
  strategy="afterInteractive" />
 
// Widget supportowy, który może poczekać
<Script src="https://widget.intercom.io/widget/xxx"
  strategy="lazyOnload" />

// components/lp/HeroSection.tsx
export function HeroSection({ page }: { page: LandingPage }) {
  return (
    <section className="min-h-screen flex flex-col justify-center px-4 md:px-8">
      {/* 1. Headline odpowiadający na intencję reklamy */}
      <h1 className="text-4xl md:text-5xl font-bold">
        {page.headline}
      </h1>
 
      {/* 2. Subheadline z value proposition */}
      <p className="text-xl text-gray-600 mt-4 max-w-2xl">
        {page.subheadline}
      </p>
 
      {/* 3. CTA – widoczny od razu */}
      <div className="mt-8 flex gap-4">
        <a
          href="#formularz"
          className="bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-semibold"
          data-testid="hero-cta"
        >
          {page.ctaText}
        </a>
      </div>
 
      {/* 4. Social proof */}
      <div className="mt-6 flex items-center gap-2 text-sm text-gray-500">
        <span>⭐⭐⭐⭐⭐</span>
        <span>4.8/5 na podstawie 2,340 opinii</span>
      </div>
    </section>
  );
}

// components/lp/LeadForm.tsx
"use client";
 
import { useState } from "react";
import { analytics } from "@/lib/analytics";
import { adsConversions } from "@/lib/ads-tracking";
 
export function LeadForm({ formId }: { formId: string }) {
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
 
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus("loading");
 
    const formData = new FormData(e.currentTarget);
 
    try {
      const response = await fetch("https://api.example.com/leads", {
        method: "POST",
        body: formData,
      });
 
      if (!response.ok) {
        throw new Error("Request failed");
      }
 
      setStatus("success");
 
      // Track conversions
      adsConversions.lead(formId);
      analytics.formSubmit(formId, true);
    } catch {
      setStatus("error");
      analytics.formSubmit(formId, false);
    }
  };
 
  if (status === "success") {
    return (
      <div className="text-center p-8">
        <h3 className="text-2xl font-bold text-green-600">Dziękujemy!</h3>
        <p>Skontaktujemy się w ciągu 24 godzin.</p>
      </div>
    );
  }
 
  return (
    <form onSubmit={handleSubmit} id="formularz" className="space-y-4">
      {/* Minimum pól = maksymalna konwersja */}
      <div>
        <label htmlFor="email" className="block text-sm font-medium">
          Email *
        </label>
        <input
          id="email"
          name="email"
          type="email"
          required
          autoComplete="email"
          className="w-full p-3 border rounded-lg"
        />
      </div>
 
      <div>
        <label htmlFor="phone" className="block text-sm font-medium">
          Telefon
        </label>
        <input
          id="phone"
          name="phone"
          type="tel"
          autoComplete="tel"
          className="w-full p-3 border rounded-lg"
        />
      </div>
 
      <button
        type="submit"
        disabled={status === "loading"}
        className="w-full bg-blue-600 text-white p-4 rounded-lg text-lg font-semibold"
      >
        {status === "loading" ? "Wysyłam..." : "Wyślij zapytanie"}
      </button>
 
      {status === "error" && (
        <p className="text-red-600 text-sm" role="alert">
          Wystąpił błąd. Spróbuj ponownie.
        </p>
      )}
    </form>
  );
}

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export function AttributionFields() {
  const searchParams = useSearchParams()
 
  return (
    <>
      <input
        type="hidden"
        name="gclid"
        value={searchParams.get('gclid') ?? ''}
      />
      <input
        type="hidden"
        name="utm_source"
        value={searchParams.get('utm_source') ?? ''}
      />
      <input
        type="hidden"
        name="utm_campaign"
        value={searchParams.get('utm_campaign') ?? ''}
      />
    </>
  )
}

// proxy.ts – prosty A/B split
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function proxy(request: NextRequest) {
  if (request.nextUrl.pathname === '/lp/produkt') {
    const variant = request.cookies.get('ab-variant')?.value
 
    if (!variant) {
      const newVariant = Math.random() < 0.5 ? 'a' : 'b'
      const url = request.nextUrl.clone()
      url.pathname = `/lp/produkt-${newVariant}`
      const response = NextResponse.rewrite(url)
      response.cookies.set('ab-variant', newVariant, {
        maxAge: 60 * 60 * 24 * 30,
      })
      return response
    }
 
    const url = request.nextUrl.clone()
    url.pathname = `/lp/produkt-${variant}`
    return NextResponse.rewrite(url)
  }
 
  return NextResponse.next()
}
 
export const config = { matcher: '/lp/produkt' }