Configuring Custom Media Domain in Sitecore XP 10 + Next.js

Enabling Custom Domain URLs for Media Files in a Sitecore Headless (JSS + Next.js) Project

Recently, while working on a Sitecore XP 10 solution integrated with Next.js (JSS), I came across a requirement to serve media assets via a custom domain instead of the default Sitecore CM/CD URLs.

This is a common scenario when optimizing for performance, SEO, and CDN configurations — especially when you want to serve images from a brand-specific or region-specific domain like
https://Customdomain.com instead of the default https://sitecore-cd.azurewebsites.net.

Step 1: Define Media Base URL in Next.js

In your Next.js environment configuration, add a new variable to define the media domain:

NEXT_PUBLIC_MEDIA_BASE_URL= https://Customdomain.com 



This allows your front-end components to dynamically resolve Sitecore media URLs from the correct domain at runtime.

Step 2: Configure Site Definition in Sitecore

Next, you need to update the Sitecore site definition to use the same domain for generating media links.

In your Sitecore configuration (usually in App_Config/Include/Project/SiteDefinition.config or similar), add the following attribute inside your <site> node:

<site

    name="brand-site"

    hostName="branddomain.com"

    rootPath="/sitecore/content/brand-site"

    startItem="/home"

    database="master"

    mediaLinkServerUrl="https://Customdomain.com"

    patch:source="Project.Brand.SiteDefinition.config" />

This ensures that when Sitecore generates media URLs (for example in Rich Text fields, image fields, or through the Layout Service), it uses your custom domain instead of the default one.

Result

Now, your Sitecore items and components in Next.js will load images from your custom domain:

https://Customdomain.com/-/media/Project/Images/banner.jpg

instead of:

https://sitecore-cd.azurewebsites.net/-/media/Project/Images/banner.jpg
This small change improves content delivery performance, ensures consistent branding, and simplifies CDN caching strategies across environments.

Final Thoughts

Using NEXT_PUBLIC_MEDIA_BASE_URL on the Next.js side and mediaLinkServerUrl in Sitecore’s site definition is a clean, environment-agnostic way to handle custom media domains.
It’s especially helpful when you have multiple sites or regions under one Sitecore instance sharing the same backend but different front-end domains.

Comments

Post a Comment

Popular posts from this blog

XM Cloud Basics – Part 1

 🚀 Connecting Next.js with Sitecore XM Cloud: A Developer’s Guide: With the evolution of Sitecore into a composable DXP platform, Sitecore XM Cloud stands out as the cloud-native, headless-first CMS designed for speed, scalability, and modern front-end frameworks like Next.js . In this post, we’ll walk through how to connect Next.js to Sitecore XM Cloud using the official SDKs and headless services. 🔍 What is Sitecore XM Cloud? Sitecore XM Cloud is a SaaS version of Sitecore Experience Manager. It provides: Headless content delivery Integrated personalization A fully managed cloud platform Native support for front-end frameworks like Next.js and React XM Cloud replaces the need for hosting your own Sitecore infrastructure, while still providing all the benefits of Sitecore's flexible content model and editing tools. 🛠️ Prerequisites Before diving in, make sure you have: A Sitecore XM Cloud environment provisioned Access to the Sitecore Cloud Portal Nod...
Read more

Sitecore 10.4 + Docker + Next.js: A Complete Setup Guide for JSS Developers

Image
  Setting Up Sitecore xp 10.4 with Docker and Next.js (JSS Connected Mode) Setting up a modern Sitecore solution using Docker and Next.js enables rapid local development with a clean separation of front-end and back-end concerns. In this post, we’ll walk through how to set up Sitecore XP 10.4  using Docker along with Next.js in connected mode , using Sitecore JSS Prerequisites Before starting, make sure you have the following installed: Windows 10/11 Pro or Enterprise (for Docker Desktop with Hyper-V) Docker Desktop (configured for Windows containers) .NET SDK 6.0+ Node.js v18+ Git Sitecore Container Deployment Packages (WDPs) Sitecore License File JSS CLI Steps:    1. Enable hyer-v      Control panel --->programs --> program and feature 2. Download and Install docker using below link        Click here to download and install docker 3. Install the template   Open PowerShell with administ...
Read more

Deploying Next.js + Sitecore JSS: Real-World Azure PaaS Setup

Image
Deploying Next.js + Sitecore JSS on Azure PaaS  Overview: Deploying a Sitecore JSS (JavaScript Services) app with Next.js can be challenging when moving to production or any upar enviroment, especially in Azure PaaS . This post outlines a clean separation of concerns deployment architecture where: CM handles only content authoring (no Next.js). CD acts as the Sitecore backend API provider for the JSS app. Web App hosts the Next.js SSR app (head) independently. This architecture ensures performance , security , and scalability for modern composable solutions. Architecture Overview: Setup Breakdown:  Sitecore CM (Content Management) Purpose : Only used by authors to manage content. Does NOT include : JSS app, rendering host config. Deployment : Done via Sitecore Azure Toolkit or ARM templates. Benefit : Keeps CM clean and lightweight. Sitecore CD (Content Delivery) Purpose : Serves layout data & APIs for JSS app. Configured with :...
Read more