Deploy on Netlify

Add the export script

In order to publish on Netlify, we need to change a setting in the build command of Next.js. Open the package.json file and change the "build" script, adding && next export:

...
"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
  "start": "next start"
},

Create the Project

Access your Netlify account at app.netlify.com

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 `/out` 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.

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:

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".

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.

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

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!