import { useRef, useState } from 'react'
import { useRouter } from 'next/router'
import { Button } from './Button'
function MailIcon(props) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path
        d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
        className="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
      />
      <path
        d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
        className="stroke-zinc-400 dark:stroke-zinc-500"
      />
    </svg>
  )
}
function Spinner(props) {
  return (
    <div role="status">
      <svg
        aria-hidden="true"
        class="mr-2 h-8 w-8 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
        viewBox="0 0 100 101"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
          fill="currentColor"
        />
        <path
          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
          fill="currentFill"
        />
      </svg>
      <span class="sr-only">Loading...</span>
    </div>
  )
}
export function Newsletter() {
  const emailInputRef = useRef(null)
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  function registrationHandler(event) {
    event.preventDefault()
    const enteredEmail = emailInputRef.current.value
    setIsLoading(true)
    fetch('/api/newsletter', {
      method: 'POST',
      body: JSON.stringify({ email: enteredEmail }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => {
        if (response.ok) {
          return response.json()
        }
        return response.json().then((data) => {
          console.log(data)
          throw new Error(data.message || 'Something went wrong!')
        })
      })
      .then((data) => {
        console.log('Successfully registered email!')
      })
      .catch((error) => {
        console.log('Error registering email!')
        console.log(error)
      })
      .finally(() => {
        setIsLoading(false)
        router.push('/thank-you')
      })
  }
  return (
    <form
      action="/thank-you"
      onSubmit={registrationHandler}
      className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
    >
      <h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
        <MailIcon className="h-6 w-6 flex-none" />
        <span className="ml-3">Stay up to date</span>
      </h2>
      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
        Get notified when I publish something new, and unsubscribe at any time.
      </p>
      <div className="mt-6 flex">
        <input
          type="email"
          placeholder="Email address"
          aria-label="Email address"
          required
          className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
          ref={emailInputRef}
        />
        <Button type="submit" className="ml-4 flex-none">
          {isLoading ? <Spinner /> : 'Join'}
        </Button>
      </div>
    </form>
  )
}

React Newsletter Component

import { Newsletter } from '../components/newsletter'
function HomePage() {
  return (
    <div>
      // Other code here
      <Newsletter />
      // Other code here
    </div>
  );
}
export default HomePage;


React Newsletter Component - Homepage Content

import { connectDatabase, insertDocument } from '@/lib/db-utils'
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const userEmail = req.body.email
    if (!userEmail || !userEmail.includes('@')) {
      res.status(422).json({ message: 'Invalid email address.' })
      return
    }
    let client
    try {
      client = await connectDatabase()
    } catch (error) {
      res.status(500).json({ message: 'Connecting to the database failed!' })
      return
    }
    try {
      await insertDocument(client, 'newsletter', { email: userEmail })
      client.close()
    } catch (error) {
      res.status(500).json({ message: 'Inserting data failed!' })
      return
    }
    res.status(201).json({ message: 'Signed up!' })
  }
}

React Newsletter Component - API Route

import { MongoClient } from 'mongodb'
export async function connectDatabase() {
  const client = await MongoClient.connect(process.env.MONGODB_URI)
  return client
}
export async function insertDocument(client, collection, document) {
  const db = client.db()
  const result = await db.collection(collection).insertOne(document)
  return result
}


React newsletter Component - Database Connection

In this blog post, I will share my experience of adding a subscription form to my website and creating a database to store email addresses. I will explain why building an email list is important for businesses and how you can do it too. I will also provide step-by-step instructions on how to integrate a subscription form and database into your website using the same tools as me.

How I Integrated a Subscription Form and Database to Build My Email List

export const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID // GTM-XXXXXXX
export const pageview = (url) => {
  window.dataLayer.push({
    event: 'pageview',
    page: url,
  })
}

Save GTM ID in next.js

import { GTM_ID, pageview } from '@/lib/gtm'
import { useEffect } from 'react'
export default function App({ Component, pageProps, router }) {
  // Track pageviews when route changes
  useEffect(() => {
    router.events.on('routeChangeComplete', pageview)
    return () => {
      router.events.off('routeChangeComplete', pageview)
    }
  }, [router.events])
  return (
    <>
      {/* Google Tag Manager - Global base code */}
      <Script
        id="gtag-base"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer', '${GTM_ID}');
          `,
        }}
      />
      {/* End Google Tag Manager - Global base code */}
      <main>
        <Component {...pageProps} />
      </main>
    </>
  )
}

Save GTM script to head of next.js website

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { GTM_ID } from '@/lib/gtm'
export default function Document() {
  return (
    <Html className="h-full antialiased" lang="en">
      <Head />
      <body>
        <noscript>
          <iframe
            src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
            height="0"
            width="0"
            style={{ display: 'none', visibility: 'hidden' }}
          />
        </noscript>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}


Add GTM script to body of next.js website

This guide teaches you how to add Google Tag Manager (GTM) to your Next.js website. GTM is a tool that streamlines the management and deployment of tracking tags, such as Google Analytics and Facebook Pixel. With this guide, you will learn how to get started with GTM and enhance your tracking and analytics capabilities, regardless of whether you are a marketer, developer, or website owner.

Adding GTM to Your Next.js Website: A Guide

Discover how to master key events in Google Analytics 4 with our comprehensive guide. Learn to implement and leverage key events to unlock deeper insights and optimize your data analysis strategies.

Writing on analytics, programming, and the digital marketing industry.

How I Integrated a Subscription Form and Database to Build My Email List

Adding GTM to Your Next.js Website: A Guide

Mastering Key Events in Google Analytics 4