Next.js with XM Cloud EDGE and GraphQL
Building a Component with Next.js and GraphQL from Sitecore XM Cloud Edge — No JSS Required Goal: In this blog post, we’ll walk through how to create a simple component in Next.js that fetches data from Sitecore XM Cloud Experience Edge using GraphQL — without using any JSS libraries. 🧩 What You’ll Need from Your Sitecore XM Cloud Instance Before we start coding, we’ll need a few pieces of information from your Sitecore project: 1. Edge Token and GraphQL Endpoint Log in to your Sitecore XM Cloud project. Select your environment. Go to the "Details" tab. At the bottom, you’ll see Live GraphQL IDE (Experience Edge) . Click "Generate Delivery API Token" — this gives you the Edge API token and the GraphQL endpoint URL. We’ll use this token later in our .env.local file. 🛠️ Project Setup: Next.js + GraphQL 1. Create a Next.js App Run the following command to bootstrap your app: npx create-next-app@latest xmcloud 2. Install Gr...