How to a Embed Mail Chimp Popup Signup to Next.js Application

You're on the right track! Adding a Mailchimp popup form script to a Next.js site is definitely doable, and there are a couple of approaches to consider.

While using next/head can work, Next.js actually provides a better solution: the next/script component. This is specifically designed for loading third-party scripts and gives you more control over when and how scripts load.

Here's why next/script is generally preferred over next/head for Mailchimp popup scripts:

Using the Next.js Script Component (Recommended)

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      <Script
        src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"
        strategy="lazyOnload"
      />
      <Script id="mcjs" strategy="lazyOnload">
        {`!function(c,h,i,m,p){...your mailchimp popup code...}(window,document,'script','mcjs');`}
      </Script>
      {children}
    </>
  )
}

Key advantages of the Script component:

• Loading strategies: You can use strategy="lazyOnload" to defer the Mailchimp script until after the page is interactive, improving performance
• Better performance: Next.js optimizes script loading automatically
• Prevents duplicates: Ensures scripts aren't loaded multiple times during client-side navigation
• Built-in error handling: Better debugging when scripts fail to load

Getting Your Mailchimp Script

From Mailchimp's Connected Site settings, you'll generate a script snippet (the mcjs code) when you create a popup form. It usually includes both the script source URL and an inline initialization script.

Where to Place It

For a site-wide popup, add the Script component to your root layout (app/layout.js in the App Router or _app.js in the Pages Router). For page-specific popups, add it to the specific page component.

If you're building a Sanity + Next.js site, this integrates seamlessly with your content workflow. You could even store Mailchimp configuration settings in Sanity and conditionally render the popup based on your content needs—check out the Next.js quickstart guide for integrating Sanity with Next.js if you haven't already!

The Next.js Script component documentation has more details on the different loading strategies and options available.