Deploy on Netlify

Create the Project

Access your Netlify account at

Click on the "New site from Git" button, then authenticate to your Git provider and select the repository you created for this tutorial.

On the "Deploy settings" screen, leave all the default options for a Next.js project (`yarn build` command and `.next` publish directory), but click on "Show advanced" and use the "Add variable" button to add the two environment 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 Netlify

Now, click the "Deploy site" button.

You will see "Site deploy in progress". Netlify will fetch the code from the Git repository and will start the build process. As soon as it finishes, you will see a green URL assigned by Netlify:

React Bricks deployed on Netlify

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

Set up a build hook

The website will be rebuilt automatically by Netlify 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 Netlify 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 "Site settings", then "Build & deploy" from the left sidebar. Scroll down to "Build Hooks". Click on "Add build hook".

Netlify deploy hook for React Bricks

Give a name to your hook, click on "Save". Then copy the hook URL.

Go to your React Bricks website (either local or the newly published one on Netlify) 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 Netlify.

You are great! You just published your React Bricks app on Netlify!

Time to get points

What do you need to do to let editors deploy a static site when content changes?

Subscribe to our newsletter!

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