Learn how to Visually Build at Scale with Builder.io and Netlify Register now!

Guides & Tutorials

Deploy Your Next.js + Nhost App Today!

Guides & Tutorials

Deploy Your Next.js + Nhost App Today!

We’ve got a brand new Nhost starter template for you! 🎉

Like what you see? You can check out the code and clone the project here: https://github.com/nhost/nhost-netlify-starter-nextjs-reactquery or click the button below to step through the process of creating a new repo, new Netlify project, and deploy it (you will need to add Nhost env vars to get full functionality).

Deploy to Netlify Button

For a full step-by-step tutorial, check out this YouTube video:

Deploy the Next App with Netlify

With this setup I'll guide you through deploying this Next app with Netlify and nhost. No credit card needed for any of the steps! We're going to start from the point of clicking the Deploy to Netlify button above, but you could also:

  • clone the repo listed above into your own repo
  • create a new Netlify project and connect it to your repo

Preview screen of Deploy to Netlify button

However, by using the Deploy to Netlify button you will now have

  • a repo with all the project files and
  • a deployed Netlify project linked to the new repo

To get the full functionality of the app, you'll need to create a new project with nhost and add two environment variables to your Netlify project via your dashboard under Site Settings > Build & deploy > Environment.

  • NEXT_PUBLIC_NHOST_SUBDOMAIN - Example: us-east-1
  • NEXT_PUBLIC_NHOST_REGION - Example: uhjouscilzxsrydrk

You can find these in the upper right of your nhost project dashboard under “Project Info”:

nhost project info screenshot

Once you’ve got those environment variables saved in Netlify, you just need to trigger a new deploy and everything will work as expected!

Next Steps

And with that, you’re off to the races and ready to develop your Next.js site with Netlify and nhost. As a reminder, if you need step-by-step instruction, be sure to check out the YouTube video we recorded!

A big thanks to the nhost team for helping to bring this to life. Looking forward to seeing what you all build with this new tech stack!

Keep reading

Recent posts

Book cover with the title Deliver web project 10 times faster with Jamstack enterprise

Deliver web projects 10× faster

Get the whitepaper