Hosting Sitecore XM Cloud Next.js frontend app in AWS Amplify

Next.js's creator, Vercel, is the preferred hosting solution. However, many other hosting providers have recently begun to support hosting frontend apps and various features of Next.js. One of them is Amazon Web Service (AWS) Amplify. 

AWS Amplify, backed by robust AWS infrastructure, is a hosting service provided by Amazon Web Service. You can host the frontend application like Next.js app or you can do full stack development using their Amplify Studio. AWS Amplify supports many features of Next.js but it lacks support on Edge API Routes (Edge middleware is not supported), On-Demand Incremental Static Regeneration (ISR), Internationalized (i18n) automatic locale detection, Next.js streaming, Running middleware on static assets and optimized images. You can refer this page for any updates on the Next.js feature support. 

To use AWS Amplify as the hosting provider, you can either use your existing subscription or sign up for trial AWS account which gives free access to some of their service for 12 months. 

Hosting XM Cloud Foundation Head

1. An XM Cloud project has been setup and Foundation template repository is cloned in your source control. 
2. Sign in to the AWS Management Console and open the Amplify console. 
   
   
   
   
3. In the AWS Amplify home page, click Get Started if you are using it for the first time.  
   
   
   
4. Click Get Started in Amplify Hosting. 
   
   
   
   
   
   
5. Select the source code location. In my case, it is GitHub. You will have to authorize Amplify to read/write your repository.  
   
   
   
   
   
   
6. Once the permission is set, you can choose the repository, branch and also check Connecting a monorepo and set the path as srx/sxastarter as the Next.js application is placed in that folder. 
   
   
   
   
   
   
7. When you click Next, you will see the build settings. You can see the build commands, app root folder and the artifacts base directory as well. 
   
   
   
   
   
   
8. Set the Sitecore related environment variables. You can get the SITECORE_EDGE_CONTEXT_ID from XM Cloud Deploy App --> Environment --> Details (Context ID (Live)).
   
   
   

   
   
   
9. Review the changes and click "Save and Deploy"
   
   
   
   
   
   
10. It will provision the environment, build and deploy it. You will get the AWS Amplify domain name at the end. https://*.amplifyapp.com/
    
    
    
    
    
    
    
    
    
    
    
    
11. When browsing the site https://main.d30qedhkgseqw4.amplifyapp.com/, you can see the content but it will be missing the styles. When checking the network tab, you can see the domain name for the static files as http://localhost:3000. 
    
    
    
    
    
12. You can go ahead and add an environment variable called PUBLIC_URL and add the newly generated amplifyapp.com URL including protocol. 
    
    
    
    
    
13. Now, your site will load perfectly with all the styles. https://main.d30qedhkgseqw4.amplifyapp.com/ 
    
    
    
    
    

PUBLIC_URL Environment Variable

The URLs which are generated for the static files depends on the domain name set by the hosting provider or the PUBLIC_URL Environment variable. PUBLIC_URL environment variable has higher precedence than any other environment variable. If it is not set, then it fall back to the hosting provider environment variable. 

Hosting providers like Vercel and Netlify provide the unique deployment URL in the system defined Environment variable by default. 

Vercel: VERCEL_URL.

Netlify: DEPLOY_URL

For AWS Amplify, as of now, the feature is not available and an issue is open in GitHub. The format of the Amplify URL is https://{branchName}.{AmplifyAppID}.amplifyapp.com. There are few ways to generate the URLs and I will discuss it in another post. 

To check how Sitecore Next.js SDK consume these URLs, please refer this Utils file in GitHub. 

Happy Learning!