Personalization in UX: Engaging Customers in Ashburn with Next.js Geolocation

Ilias Ism profile picture

Near πŸ‡ΊπŸ‡Έ the United States? - Personalization in UX is a good idea to go to the next level in the customer experience. Learn how to use user data, machine learning and best practices to create a personalized user experience.

UX Personalization examples near Ashburn

A picture of a Ashburn building

β€œUX designers love dynamic personalization for their target audience!” - Nielsen Norman Group reader in Ashburn πŸ‡ΊπŸ‡Έ the United States


Different apps

Tutorial: Next.js Geolocation in Edge Middleware with Vercel

This guide provides a straightforward approach to integrating geolocation-based personalization into your Next.js and Vercel application. Let's dive into some practical examples to illustrate the process.

Next.js Geolocation for local SEO

Here is an Next.js 13 App Router example how to use the headers from Vercel and geolocate the user by country and city. This is useful for local SEO and personalization.

This is how the above titles and content are made!

import { ArticleLayout } from '@/components/ArticleLayout'
import { generatePageMeta } from '@/core/seo'
import { headers } from 'next/headers'

// Show the city, the ISO country code or a fallback
const getCity = () => {
  const headersList = headers()
  return (
    headersList.get('x-vercel-ip-city') ??
    headersList.get('x-vercel-ip-country') ??
    'your city'
  )
}

export function generateMetadata() {
  return {
    title: 'Personalization: How to engage customers in ' + getCity(),
    description: `Personalization in UX...`,
  }
}

// Use the edge runtime for better speed
export const runtime = 'edge'

export default function Page() {
  const city = getCity()
  return (
    <div>
      <p>
        Personalization in UX is all about creating a tailored experience for
        your users. Learn how to use personalization to boost engagement and
        conversion rates.
      </p>

      <h2>What people in {city} are saying</h2>
      <p>
        β€œI love this article! It’s so helpful and informative. I can’t wait to
        read more from you.” <br />
      </p>
    </div>
  )
}

Geo-Targeted Images with Unsplash API

Continuing with the example above, let's create a localized header image that we source from Unsplash. It's the first image in this article.

async function getPicture() {
  try {
    const city = getCity() // from the code above

    const p = new URLSearchParams()
    p.append('query', `${city} city architecture building`) // insert our city keyword here
    p.append('per_page', '1')
    p.append('content_filter', 'high')
    p.append('orientation', 'landscape')

    const headers = {
      // get the Unsplash API key first
      Authorization: `Client-ID ${keys.key}`,
    }

    const _url = 'https://api.unsplash.com/search/photos'
    const url = `${_url}?${p.toString()}`
    const res = await fetch(url, { headers })
    const results = (await res.json()).results

    for (const result of results) {
      return result.urls.regular as string
    }
  } catch (e) {
    console.error('failed to getPicture', e)
  }

  return '' // empty string on failures
}


export default function Page() {
  const img = await getPicture()
  return (
    {img && (
      <Image
        src={img}
        alt={`A picture of a ${city} building`}
        width={800}
        height={600}
      />
    )}
  )
}

Country Flag Emoji based on IP Address location

To show an emoji for the user's country πŸ‡ΊπŸ‡Έ the United States, create a small Flag component. First we'll need a list of countries.

  1. Copy this to countries.json: https://github.com/risan/country-flag-emoji-json/blob/main/dist/by-code.json
  2. I removed the unicode and image fields to make it lighter
  3. Create the component below
import { emojis } from './by-code' // the list you copied, I changed it to typescript

const Flag = () => {
  const headersList = headers()

  const _country = headersList.get('x-vercel-ip-country') ?? 'US'

  const country = emojis[_country] ?? {
    emoji: 'πŸ‡ΊπŸ‡Έ',
    name: 'United States',
  }

  return (
    <span className="font-bold">
      <span role="img" aria-label={country.name}>
        {country.emoji}
      </span>{' '}
      {country.name}
    </span>
  )
}

export default function Page() {
  return (
    <div>
      You are from <Flag />
    </div>
  )
}

Why is Geolocation-Based Personalization Important?

Geolocation-based personalization is the process of customizing a website's content, design, and functionality based on the user's location. This strategy can greatly enhance user engagement, conversion rates, and overall user experience by focusing on individual user behavior and needs.

Benefits of Geolocation-Based Personalization

  1. Increased engagement: By providing relevant content based on users' locations, you can create a more engaging experience for your audience.
  2. Higher conversion rates: Personalized content can lead to higher conversion rates, as users are more likely to engage with content that is relevant to their needs and preferences.
  3. Improved customer satisfaction: Personalization can help you stand out from the competition and increase customer satisfaction by meeting their expectations for tailored experiences.
  4. Better targeting: Geolocation-based personalization allows you to target specific audiences based on their location, which can lead to more effective marketing campaigns and better return on investment.

UX Personalization Examples That Work in 2023

  1. Changing headlines: Personalize headlines based on the user's location to make the content more relevant and engaging.
  2. Adjusting hero images: Tailor hero images on the homepage to reflect the user's location, making the website more visually appealing and relevant.
  3. Promoting local events: Showcase events happening in the user's area, increasing the likelihood of their participation.
  4. Offering location-specific products or services: Display products or services that are relevant to the user's location, such as winter products for cold regions or summer products for hot areas.
  5. Onboarding: Personalize the onboarding experience based on the user's location to make it more relevant and engaging. Prefill data.
  6. Using AI: Write different copy for different locations. For example how we did it for MagicBuddy.chat. Note the different examples.

More reading

Exclusive offers

The best deals for makers and creators.

Link Building Service
Guest posts, niche edits, outreach. The best white hat links.
Buy Backlinks
MagicBuddy
Get 10 free credits for MagicBuddy, the AI chatbot for Telegram.
Chat Now
Article to Video AI
Convert your articles to videos with TypeFrames.
Convert Now
Gradient Wallpapers
Discover GradientPage, your source for gradient wallpapers.
Get Wallpapers