August Developer Challenge Week 4 - Vercel

[shrinivasan_neelamegam]

This is part of the August Developer Challenge on Joule Studio.

SAP and Vercel have partnered to enable developers to build lightning-fast, modern frontends (using React and Next.js) for enterprise applications and AI agents, while securely connecting to SAP’s robust backend infrastructure in the newly announced Joule Studio. Vercel will become available within Joule Studio to give developers an unparalleled choice for custom frontend design. Hence, now let’s understand what Vercel, Next.js and v0 are, how they are connected to each other, and how they relate to the new Joule Studio. 

 I. Next.js: 

Next.js is a React framework for building full-stack web applications. Created by Vercel, this framework takes the power of React.js which is a popular library for building dynamic user interfaces, and supercharges it with features like server-side rendering (SSR), static site generation (SSG), and a built-in routing system, all out of the box. Developers can rapidly build highly flexible, custom web interfaces using popular frameworks like Next.js using the new Joule Studio platform. 

Let's create a new Next.js app from scratch to see it in action: 

1. System requirements: 

• Minimum Node.js version: 20.9, install from here: https://nodejs.org/en/download . Check with node –v  command on your terminal to see the current node version installed.
• Operating systems: macOS, Windows or Linux 
• Git installed 
• VS Code or another code editor with integrated terminal or a standalone terminal such as PowerShell on Windows or Terminal App/iTerm on Mac OS 
• A GitHub Account 

2. Run these commands one by one on the terminal: 

npx create-next-app@latest business-card-app --yes 
cd business-card-app 
npm run dev 

npx is a powerful tool bundled with Node.js that executes JavaScript packages directly from the registry without requiring you to install them globally 

create-next-app is the official command-line interface (CLI) tool used to instantly bootstrap and set up a new Next.js application 

npm is a command-line tool used by developers to install, share, and manage project dependencies. It is automatically installed whenever you download Node.js. 

--yes skips prompts using saved preferences or defaults. The default setup enables TypeScript, Tailwind CSS, ESLint, App Router, and Turbopack. 

• View the business-card-app at the http://localhost:3000 url 

• Optionally, you may use this link to the Quick Start guide from Next.js https://nextjs.org/docs/app/getting-started to increase your understanding of the framework and explore the various possibilities. 

3. Open the project folder in VS Code and observe the folder structure (app, public folders): Next.js uses file-system based routing, meaning you can use folders and files to define routes. 

• View the code in the layout.tsx file contents in the app folder 
• View the code in the page.tsx file contents in the app folder 
• View the package.json file contents at the root level 

 A .tsx file is a TypeScript source file that contains JSX, an XML-like  syntax used to describe UI in React.  

 4. Replace the contents of the page.tsx with the below content 

• Copy code from gist here and overwrite the code in page.tsx 
• https://gist.github.com/neelamegams/c43329a01aa0a8ee288adeb4bb4bdf2e  

5. In the newly updated page.tsx code, scroll to the bottom of the file. 

• Search for type="hidden" within the form tag in the page.tsx. Replace the hidden values for communityId with your SAP Community username by updating the value attribute. 
• Replace the value attributes: 
  • communityId: your SAP Community username 
  • answer: your answer to the below question (one word answer)
  • week: keep as "week4" 

S-User, P-User, the email associated with SAP Community portal are not valid Community Ids. To get your SAP Community Id, follow the instructions as per the screenshot below. 

Question: When frameworks use server-side rendering, the server delivers raw, non-interactive HTML to the browser. Name the process that attaches event listeners to this static HTML inside the browser to make the page interactive. 

• View the business-card-app at the http://localhost:3000 url 
• Stop the local development server by pressing Ctrl+C (Mac/Windows/Linux) in the terminal before continuing to the next steps. 

 6. Commit and push these changes to your GitHub repository. In the next step, we shall deploy this app to Vercel.  

• If you are new to git, here is a link with video instructions on how to use git to push your code to a remote GitHub repo with VS Code editor. https://code.visualstudio.com/docs/sourcecontrol/overview 

II. Vercel 

Vercel is a cloud platform for developers that provides the infrastructure to host, build, and deploy web applications instantly. You can easily link your GitHub repository to Vercel and deploy those GitHub projects. Once deployed, you can view your site/app from a live URL hosted on the Vercel platform. 

1. Sign up to the Vercel platform from https://vercel.com/signup 

2. Choose the Continue with GitHub option and use the same GitHub account that you pushed your repository to in the previous step. Once logged in, add a new project using the Add New option in the top right corner. 

Here is a short video showing how to link your GitHub repository to Vercel https://www.youtube.com/watch?v=GthkPo8xFqQ 

3. Your newly created GitHub repository is available for import to Vercel. Click on Import. 

4. Expand the Environment variables and provide the CAP_SERVICE_URL as 

https://community-challenge.cfapps.us10.hana.ondemand.com and Click Deploy. 

5. It only takes a few minutes to deploy your app. You could notice how easily you were able to deploy an app to Vercel. As soon as it is deployed, your site is live. You will be able to view your business card app with a URL unique to your deployment. 

6a: Test Your Deployment (Required) 

1. Launch your Vercel URL in a browser 
2. Click the SAP Community button to submit your Week 4 answer 
3. You should see a success message confirming submission 
4. Post a comment on this blog post with: 
   • A screenshot showing your deployed business-card-app URL in browser 

6b: Enhance Your Card (Optional ) 

Want to customize further? Edit lines in page.tsx containing: 

• Your name and title 

• GitHub profile URL (replace https://github.com) 

• LinkedIn profile URL (replace https://linkedin.com) 

Commit and push to GitHub. Vercel auto-deploys changes in less than 2 minutes. Refresh your Vercel URL to see updates. 

7. Add a comment answering at least 2 of these: 

• Ease of use: How smooth was Next.js setup and Vercel deployment? 

• Pain points: Where did you get stuck or confused? 

• Comparison: Do you use React/Vue/Angular or Netlify/AWS Amplify or some other tool that does something similar? How does this compare? 

• Future use: Would you use Next.js + Vercel for your projects? Why/why not? 

III. v0 in Vercel 

v0 empowers anyone to build functional web applications faster without writing code manually. v0 generates production-ready UI components and frontend code, utilizing a modern web stack that includes Next.js, React architecture, Tailwind CSS, shadcn/ui, and the Vercel AI SDK. The code generated is ready to be deployed on the Vercel's globally scalable infrastructure. 

What is Vercel's relationship with v0?  

Vercel created v0 and provides the underlying infrastructure. This deep integration enables one-click deployment to enterprise-grade infrastructure, adhering to compliance, strong security, and global scalability. v0's code is optimized for the Vercel platform, ensuring a smooth path from idea to production.  

In the first Next.js exercise, you manually created the app and updated the page.tsx with the code provided in the exercise. You would further enhance the pages by editing the code manually without v0.  

With v0, you will be able to provide prompts to create such UIs or modify existing code imported from an existing GitHub repository.  

Joule Studio embeds Vercel's vibe-coding platform v0 natively in the browser, so users can generate modern, powerful React/Next.js front-end applications without ever leaving the Studio. 

This exercise below about v0 is an optional exercise. We included it here because v0 is the key part of Vercel that will be embedded into Joule Studio. 

Note: Though vibe-coding is a key feature in v0, we are not asking you to do vibe-coding in this exercise because you get $5 credit per month in the free trial account and you would likely expend that very quickly. 

Optional Exercise: 

1. Open the url https://v0.app/ in a browser 
2. You will see a text area where you can provide your prompt to vibe-code your app idea.  
3. Just below the text area, you will see the already available templates of the sites built by vibe-coding with v0 
4. Open the template with the title Optimus - The AI platform to build and ship and scroll through the page and access various tabs within this site 
5. Custom landing pages such as these can be created with vibe-coding on the v0 app. You can also use v0 to build anything, from landing pages, dashboards, e-commerce stores, and AI apps to full-stack applications.

In short: 

Vercel provides the deployment and hosting platform, while v0 is the AI-powered vibe-coding tool used to generate React and Next.js applications from natural language prompts.

[nanda_kishore_27]

Week 4 Submission

• Ease of use:  Really easy and super fast  

• Pain points: No it was very clear and easy to use 

• Comparison: Always been a UI5/Fiori CAP developer , compared to our mta build and deployment times this was super fast , but given this is is just a light weight front end app it was expected ... would like to know how quick and easy would it be to deploy a full blown full stack app on vercel

• Future use:  Definetly will try to use , it looks simple and elegant but would like to explore all posibilities that vercel brings first ...
  
  how does this fit in SAP world ?
  Is it something our agents can use to show UI , how does this fit in Joule studio 2.0's agent building capabilities ?
  What can we do in joule studio with vercel and v0 , is it something joule studio internally uses or something developers should use to extend out of box UIs from Joule studio created agents....
  
  Lot of questions 🙂
  Will have to wait for Joule studio 2.0 trail to try out and know more

[Muthu031]

Hi @shrinivasan_neelamegam ,

Thanks for introducing Vercel and v0 in August month week4 challenge.

• Ease of use: Vercel platform is simple and easy to use, deployment takes less than a minute(week 4 exercise). Adding v0 is very useful, reduces development efforts.
  
  • Vercel Platform - Reduces Deployment complexity.
  • v0 - Reduces Development complexity.

• Future use: Need to explore destination, connectivity, SSO, and other concepts. Looking forward for real time examples connecting SAP system.

Thanks,

Muthu.

[denismih]

Ease of use: Very nice and smooth experience

Pain points: I was stuck with corporate git, didn't find a way to connect it to Vercel

Future use: It is very interesting how it will be connected to SAP internal infra. Can't wait to try it!

[Cocquerel]

Ease of use: the small challenge was easy but I have not enough experience to evaluate how easy that will be with real project
Pain points: My change was not automatically reflected in Vercel platform after updating my github repository. After some time or maybe because I have trigger a manual redeployment, it was finally reflected.
Future use: I wonder what is the SAP strategy in introducing Vercel / Next.js instead of using CAP / SAPUI5 framework. I'm also wondering how it will integrate with components like Workzone, Joule Work, S/4HANA,...

[Dan_Wroblewski]

[sasbro]

• Ease of use: Out of the box. Setting up an account with 2FA needed more effort than deploying.

• Pain points: Nowhere.

• Comparison: Angular in the past, but Next.js is more modern and simpler (imho)

• Future use: For personal small projects of course

[Klingbeil_Thorsten_swm]

Hello @shrinivasan_neelamegam,

great Challenge - I really enjoyed it!

• Ease of use: Vercel is simply wonderful! easy, fast, great DX
• Pain points: Tailwind was not installed and integrated right from the start - maybe i missed it during the app init
• Comparison: we're using BTP (CF) with HTML5-repo and UI5 Apps 
• Future use: would use Vercel / Next for certain use-cases (e.g. consumer-apps)

br & thx!

Thorsten

[JensR]

• Ease of use: really simple!
• Pain points: searching for my github.com credentials was most pain 🙂
• Comparison: normally using CF with CAP&UI5/Fiori. This looks much nicer
• Future use: Definitely want to try it. But let's see how it is integrated in new Joule Studio...

[FerCucci]

Deployed and submitted, result Accepted.

 

Ease of use: the setup was fast. create-next-app gave me a running project in about a minute, and the Vercel import detected the framework by itself. The only manual step was the CAP_SERVICE_URL environment variable. After that, every push to main redeploys in less than two minutes.

Comparison: my usual front end work is SAPUI5 and Fiori elements on BTP, deployed to Cloud Foundry or the ABAP repository. Next.js on Vercel removes almost all of the build and deploy configuration. The trade off is what UI5 gives for free: OData V4 model binding, Fiori elements floorplans, and launchpad integration. In Next.js the backend call is a plain fetch inside a server action, so the data layer is your own responsibility.

One question for the SAP team: with Vercel and v0 arriving in Joule Studio, what is the recommendation for choosing between SAPUI5 and Next.js in a new project? Is Next.js meant for customer facing and AI agent frontends, while UI5 stays for launchpad and core transactional apps, or is the scope wider?

[KalEl]

An SAP challenge that felt the least like SAP of any of them so far 🙂 — and I mean that as a compliment.

• Ease of use: Very smooth. Pushing to GitHub triggered an auto-deploy that was live in about two minutes without touching anything.
• Pain points: The environment variable handling. CAP_SERVICE_URL is not bound to the individual deployment I created — it is defined at the project/environment level, so every deployment in that environment inherits it.
• Future use: Yes — specifically for customers who want a more modern, visually richer UI than Fiori gives them.

[nguyenhoangthaihuy]

Hello everyone,

• Ease of use: The Next.js setup and Vercel deployment were very smooth and fast. Connecting the GitHub repository to Vercel was straightforward, and every push automatically triggered a new deployment.

• Pain points: The main point I needed some time to understand was the difference between Server Components and Client Components, especially when "use client" is required. Apart from that, the overall process was clear and easy to follow.

• Comparison: I mainly work with SAPUI5, CAP, and SAP BTP. Compared with the MTA build and deployment process to Cloud Foundry or the HTML5 Application Repository, Vercel felt much faster and simpler for a lightweight web application. However, SAP BTP remains more suitable for enterprise scenarios requiring authentication, destinations, governance, and deep S/4HANA integration.

• Future use: I would definitely use Next.js and Vercel for prototypes, hackathons, public websites, and standalone AI applications. For enterprise SAP projects, I would evaluate Vercel, SAP BTP, or a hybrid architecture depending on the security and integration requirements.
  
  

Best Regards,
Huy Nguyen Hoang Thai

[S0012164523]

• Ease of use: Very Nice and smooth to use and deploy

• Pain points: I've been confused in Environment Variable but got it from settings later. It was so easy to find

Waiting to see it in Joule studio

[hrushikeshraju_yerram]

Ease of use: Vercel deployment was simple because it can directly connect to a GitHub repository and automatically build and deploy the Next.js application.

Future use: I would definitely prefer using vercel and v0 for my future web application projects. Very easy deployment and AI assistant for UI creation.

[cristiansolisc]

Week 4 done. Deployed to Vercel, submitted, result Accepted. Screenshots below.

Ease of use: about ten minutes from create-next-app to a live URL. The only manual step was the CAP_SERVICE_URL variable.

Future use: yes, for anything customer facing where Fiori would be too heavy. For core transactional apps I'd still stay on UI5.

Thanks for the challenge.

[bhupenderjeet]

• Ease of use: Deployment was explained very well in steps and it was very easy go configure.

• Pain points: I faced challenge while pushing the changes from local reposiotry to github. Github repo was getting the changes but vercel deployment didnt get the changes and got conflicts between my Personal and Enterprise github accounts. As a workaround i have to deploy a new project in vercel each time to incorporate my changes in repository. Though later i noticed the repository can be deployed directly in versel as well and github can be skipped.

• Comparison: I have used netlify and its also very simple as vercel but vercel seems to have much more options. Looking forward to explore it more. 

• Future use: Looking forward to use it in future especially eager to see how it integrates with Joule studio.

[TinhLeo]

Hallo all,

• Ease of use: Fast, seamless Next.js setup and Vercel auto-deployment via GitHub integration.

• Pain points: Learning the distinction between Server and Client Components (when to use "use client").

• Comparison: Vercel is much faster and simpler for lightweight apps compared to SAP BTP (MTA/Cloud Foundry). However, SAP BTP remains superior for complex enterprise scenarios (governance, security, S/4HANA integration).

• Future use: Next.js/Vercel for prototypes, hackathons, and standalone apps. For enterprise SAP projects, a choice between Vercel, SAP BTP, or a hybrid approach will depend on specific requirements.

[IanHuhn]

• Ease of use: Next.js setup and Vercel deployment was really easy, even easier than SAP BTP deployment.

• Pain points: I got stuck with the corporate Github blocking me from installing Vercel on my personal account (not allowed). Instead, I exported zip file and imported it. It's okay for the exercise but it should be avoided for production use. 

• Comparison: Only comparison I can provide is with Fiori apps deployment on S/4Hana on-premise or BTP. I would love to have a similar experience on these.

• Future use: As I am working mainly on Fiori apps, this kind of app/UI/architecture is completely out of our scope as we would lose all benefits we get from Fiori and ERP integration. However, for a use case completely unrelated with the ERP, why not, but we would need to have a specific team with enough skills to ensure quality, conformity and security of such an app, which is not the case currently.

[i_Dani]

• Ease of use: Next.js setup was pretty smooth, and Vercel made the deployment process really simple. Connecting GitHub and getting the app live was quick.
• Pain points: I initially had some confusion around the Next.js project structure and environment variables. Once that was clear, the rest was straightforward.
• Comparison: I’ve mainly worked with Angular, so Next.js felt more lightweight and flexible. Vercel also makes deployment much easier compared to traditional approaches.
• Future use: Yes, I would definitely consider using Next.js + Vercel for future projects. The development and deployment experience is simple and fast.
  
  
  @shrinivasan_neelamegam Thanks for organizing this challenge—it was a great hands-on experience to explore Next.js and Vercel!
  
  Thanks to the August Developer Challenge team! Really enjoyed the challenges and the hands-on learning experience.

[MAHERG]

Hello Shrinivasan,
Thank you for this awesome challenge.

                                                        

Ease of Use : The Next.js setup and Vercel deployment process were very smooth and straightforward.

Pain Points : Everything was well documented and clearly explained, so no significant pain points encountred.

Future Use : I’m looking forward to using these technologies in future projects, and I’m especially eager to explore how they integrate with Joule Studio.