Try for free

Deploy on Vercel

Create the Project

Access your Vercel account at Vercel.com

Click on the "Create Project" button, then use the "Import Git Repository" section to authenticate to your Git provider, select the repository you created for this tutorial and click the "Import" button.

On the "Import project" page, leave all the default options for a Next.js project, but expand the "Environment Variables" section. Add the two variables that you can find in your project .env file:

  • API_KEY, the secret key to access your APIs.
  • NEXT_PUBLIC_APP_ID, a string identifying your app. It is prefixed by "NEXT_PUBLIC" so that it will be accessible by the client (browser) app.
Environment variables on Vercel

Now, click the "Deploy" button.

Vercel will fetch the code from the Git repository and will start the build process. As soon as it finishes, you should see something like this:

React Bricks deployed on Vercel

Congratulations! Your React Bricks website is up and running! 🎉🍻

Set up a deploy hook

The website will be rebuilt automatically by Vercel each time we push new commits from the git repository. We want the website to be rebuilt also when content is updated.

To do this we need to create a build hook on Vercel and put it into the React Bricks app settings. In this way your users will see a "Deploy now" button in React Bricks to rebuild the website when content is updated.

Click on the "Open Dashboard" button to enter the Vercel App dashboard. Click on "Settings" in the upper menu and then on "Git" on the left menu. Scroll down to "Deploy Hooks".

Vercel deploy hook for React Bricks

Give a name to your hook, set the "master" branch name and click on "Create hook". Then copy the hook URL.

Go to your React Bricks website (either local or the newly published one on Vercel) and click on the "App Settings" tab then on the "Deploy Hooks" button.

Save deploy hook to React bricks App settings

From the Dashboard, paste the deploy hook in the "Hook URL" field and click "Save".

Save deploy hook to React bricks App settings

Now you see that the "Deploy to Production" button on the App Settings tab of React Bricks is active.

Click it and verify that it triggers a rebuild process on Vercel.

You are great! You just published your first React Bricks app on Vercel!

Time to get points

What configuration setting is needed on the Vercel project?

Subscribe to our newsletter!

Be the first to discover our latest news. No spam, promise.