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)
- Launch your Vercel URL in a browser
- Click the SAP Community button to submit your Week 4 answer
- You should see a success message confirming submission
- 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:
- Open the url https://v0.app/ in a browser
- You will see a text area where you can provide your prompt to vibe-code your app idea.
- Just below the text area, you will see the already available templates of the sites built by vibe-coding with v0
- 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
- 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.
Bluesky
