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.

[waseem1713]

Week 4 Submission:

1. Ease of Use Next.js setup via create-next-app was seamless, providing a solid structure instantly. Vercel deployment took under two minutes—linking GitHub and setting CAP_SERVICE_URL was effortless.

2. Pain Points Formatting local assets to fit custom circular CSS layouts while navigating Next.js image optimization (@next/next/no-img-element) required minor tweaking.

3. Comparison Compared to standard SAP BTP HTML5 deployments requiring MTA builds and destination configs, Vercel offers an ultra-fast, zero-config CI/CD workflow with instant live previews.

4. Future Use Definitely. For fast prototyping, developer tools, and lightweight extension frontends, the Next.js + Vercel stack is unbeatable for speed and DX.

[Shakthi_Pranesh]

Completed Week 4 of the “August Developer Challenge – New Joule Studio”! 

It was really fun experimenting with "Vercel and Next.js". The challenge gave me a few ideas to explore, and I’m looking forward to building some fun applications with "Vercel" and getting more hands-on experience with it. 

[manishagb]

• Ease of use: Easy
• Pain points: Git-repository sync
• Future use: Certainly!

Thanks so much... Enjoyed the challenge and super-excited to explore more!

[Nitin_Vankadari]

Challenge Completed!!

Ease of Use: Vercel being linked with Github was really helpful, as automatically the changes done to my repository were immediately updated in the deployed app.

Future Use: I would really like to explore this further and build more projects. This being the new way forward and also Joule Studio being integrated with this would be really easy in building apps now

[butsch]

Ease of use: Very easy to setup vercel for my app.

Future use: Like to play around with Next.js and Vercel in the future.

[TMSingh_SAP]

Here is my submission.

[taksheelsaini]

https://taksheelsaini-sap.vercel.app/ 

Ease of use: Going from creating a new app to having it running locally took maybe two minutes, and it was genuinely painless. The Vercel import was smooth too. I pointed it at my GitHub repo, and it automatically detected Next.js without me having to touch a config file.

Pain points: The actual friction had nothing to do with Next.js. My repo was private, and Vercel’s GitHub App didn’t have access to it yet. So the first import attempt just returned a 403 without really explaining why. I had to dig through GitHub’s app permission settings and grant Vercel access manually. After deploying, I also found out that new Vercel projects on my account have “Vercel Authentication” enabled by default for the *.vercel.app URL. That meant the site was basically invisible to anyone who wasn’t logged into my Vercel account until I went into Deployment Protection and turned it off. Neither of these are really Next.js problems, but they’re exactly the kind of small issues that can easily eat up 20 minutes when you’re deploying for the first time.

Comparison: I don’t work with React or Vue day-to-day, so most of this was new to me. What stood out compared to setting up a normal Node server was how little I actually had to configure. No reverse proxy, no manual build pipeline. Just push to main and the app is live in under two minutes.

Future use: Definitely. For anything small and customer-facing, I’d probably choose this over setting up and maintaining my own hosting. The redeploy-on-push workflow alone makes it worth it.

[Amir_Sohail77]

Completed Week 4 — my business-card app was deployed successfully and the submission was accepted. ✅

Ease of use: Setting up the Next.js app and deploying it through Vercel was smooth. Connecting the GitHub repository, adding the CAP service environment variable, and deploying the app required only a few steps.

Pain points: The main challenge was understanding where to update the personal details and the hidden submission values in page.tsx. Once those were configured correctly, the SAP Community submission worked successfully.

Future use: I would use Next.js and Vercel for personal projects, prototypes, and lightweight web applications because the GitHub-to-deployment workflow is fast and convenient.

Thank you for the challenge!

[Shaini-Sabu]

week 4 completed

Pain Points:   Faced challenge in pushing the changes from local repository to Github. Github repo was getting conflicts between my Personal and Enterprise Github accounts. Faced challenge in environment variable handling CAP_SERVICE_URL.

[dakshaben_patel6a254b]

I really enjoyed working on this challenge. A big thank you to the SAP expert for putting together such an engaging and practical case!

Ease of Use: The case was quite straightforward. 

Challenge: The main hurdle was getting the CAP_SERVICE_URL to work. It took some troubleshooting, but I was happy to get it working successfully in the end!

[anushree_gupta]

Week 4 challenge completed

[SriGanesh10]

Completed: Week 4 Task

Link: Create Next App

• Pain points: As someone transitioning from classic ABAP to cloud-native development, my main hurdle was just configuring my local Windows environment—specifically troubleshooting PowerShell execution policies and setting up Git credentials.

• Ease of use: Once my local setup was ready, the Next.js and Vercel experience was seamless. Deploying straight from GitHub to a live URL took only minutes and felt like magic.

• Future use: I would absolutely use this again. It is a lightning-fast frontend option that will be great to pair with cloud projects.

[rmn1]

Week 4:

• Ease of use: Very beginner-friendly, have used vercel before so this one enhance the experience
• Pain points: -
• Comparison: Definitely much simpler than deploying manually to VPS
• Future use: Connecting it to github will have future deployment easily on vercel for development

[anissara_s]

Setting up Next.js was quite simple, and deploying on Vercel went smoothly for my first time. Connecting GitHub for automated deployment is highly efficient. I did not face any issues and will definitely use this stack again when I get the chance.

Thank you @shrinivasan_neelamegam for the challenge.

[mykhayloArtymyshyn]

[romi9035]

Ease of use: The Next.js setup was straightforward, and deployment with Vercel was very smooth. The integration between Next.js and Vercel made it easy to build and deploy the application with minimal configuration.

Pain points: As this was my first hands-on experience with Next.js and Vercel, understanding some Next.js concepts and the application structure took some time initially, but the overall experience was manageable.

Comparison: I have worked mainly with SAP UI5 for frontend development rather than React, Vue, or Angular. Compared with the deployment approaches I have used previously, Next.js with Vercel felt simpler and more developer-friendly for quickly building and deploying web applications.

Future use: Yes, I would consider using Next.js and Vercel for future projects, especially for prototypes and modern web applications, because of the quick setup, simple deployment, and good overall developer experience.