Hosting your NextJS App on Vercel.

🎉 We're nearing the end of this guide. I've decided to take a different approach to the final lessons I plan to write.

Click here to skip the introduction and get straight into the lesson.

This series has grown much larger than I intended it to, so I want to wrap it up cleanly. By that I mean I would like to have the core of this project completed with this lesson.

But that in no way means this is the last lesson, just that by the end of this page you will have your blog hosted for everyone to read.

I am going to include additional lessons after this one that involve...

• More styling

  • If you recall I left the homepage styling up to you. Well I'm going to revisit that and add my own after this so you can see how I go about designing pages.

• How to host your Sanity Studio on Vercel

  • I'm going to show you in this writeup how to have your Sanity Studio online so you can make new posts. The only downside is it will have a unique url not tied to your website. We can change that and I will show you how to in the extra lessons.

• Anything else I think of?

  • This is a fun project for me and if I come up with anything I would like to include in the future I will write a post about it and add it to this Sanity Blog series.

• Suggestions!

  • If you have something you would like to accomplish with this blog but need a little help with let me know. If the topic is large enough for a post I will create one explaining my process for implementing the feature.

Now after all of those words, let's get into it.

Pushing to GitHub

Before doing any of this, make sure you have .env in your .gitignore file.

If you have made it this far I'm going to assume you have an understanding of GitHub.

If you haven't already created a repo on GitHub for this project, go ahead and create a repo and push your code.

Hosting on Vercel

Once your project is on GitHub, we will need somewhere to host it. Luckily Vercel is made for NextJS so this is rather simple.

Travel to Vercel.com and create an account if you don't already have one. I just signin with the GitHub option to make things easier.

After you have an account you should be routed to Vercel's Dashboard.

In the upper right you should see a New Project button. Click that button to be taken to the import page.

If you used GitHub as your login then this is automatic, but if you didn't then you can connect to your GitHub from here with the Add GitHub Account option.

After you are connected to your GitHub account you should see Import Git Repository with a list of recent repos. Your project should be in this list but if it isn't you can search for it with the search bar. Click Import next your your project.

You should now be seeing a screen that says Configure Project.

Each of these sections are important.

1. This is your project name on GitHub.

   • I only include this so you can double check that you are importing the right project.

2. Click this dropdown menu to add you Environment Variables.

   • These are the lines of code inside of your .env file we created at the start.
   • For every line in your file, copy the name of the variable and paste it into the NAME input (3).
   • Then copy the value of the variable and paste it into the VALUE input (4).

3. Once you have the variable name and value entered, click Add.

You should now have the 5 variables from your .env file input and you can see them below.

Once you have all 5 entered, click the Deploy button and vercel will deploy your project to a custom url.

If it deployed successfully you should now see confetti and a few different urls that take you to your site.

🥳 If everything worked then you should now be able to use the urls on your project page to travel to your blog website!

Congratulations!!

Hosting Sanity Studio

You have a blog on the internet for everyone to see, that's pretty cool. But what about our Sanity dashboard? It's not very convenient to use in it's current state. Let's host that using Sanity's own service!

Go back into your command line for your project and cd into your studio folder like you do to start your Sanity Dashboard.

When you are inside of that folder run...

sanity deploy

It will ask you for your project name, this will be in your url so you can pick whatever you want. I personally just use my project's name so I chose example-blog.

After choosing your studio hostname, it will take a little bit to complete but afterwards you should see this.

Go to the url that it prints out and tada! Your dashboard is now hosted online for you to create new posts!

Only people that you have given access to your Sanity project can access this.

You can assign permissions in your Sanity project page online.

This way we don't have to run sanity start to edit or create new posts!

One thing you can do is add a button element to your page that takes you to this url, but without authentication everyone will be able to go to it. Even if they don't have access to see your dashboard it's still a little weird having people be able to go to it so I just save the url to go to when I need it.

Problems Arise

I mentioned something at the very start of this series.

There are a few problems that will arise with trying to use v3 of Sanity.

• There is no current way (that I know of) to redeploy your Vercel site when you create a new post, you have to do this manually

• There are only a few plugins that currently work with v3, so options are limited

Now... the first bullet means when you make any edits to posts or add a new post you will have to manually redeploy your entire website on Vercel. It's not too hard to do, but it is annoying so I'm really hoping they release v3 of the Sanity Vercel plugin soon.

So I might as well go ahead and give a quick description of how to actually redeploy your site.

In your project dashboard on Vercel that shows all of your urls, you should see a Deployments button at the top. Click that.

You will now be on the Deployments page where you should see 1 entry for when you made you first deployed your project from Github. On the far right side of that deployment you should see 3 little dots, click those and then click Redeploy from the dropdown.

Now Vercel will run the redeploy and after around 1 minute your site will be hosted again with the changes you made in your Sanity Dashboard!

On the topic of the second bullet describing plugin support for v3. There is a very useful Github discussion about which plugins are currently available for v3 and which ones are being requested.

Vercel Deploy is on the list to be requested but there hasn't been any updates so we are still waiting unfortunately.

I do plan on making a quick little post explaining how plugins work with Sanity v3, I just felt like it wasn't that important for the scope of this series so it got skipped over for now.

Final Notes

After way too many delays in getting this series out, the core project is finally completed. You now have your own blog hosted online with a CMS dashboard!

Like I mentioned at the top, there is more to come but they are all extra features that aren't needed.

I appreciate anyone who has followed along, this is my first time attempting to create a series of posts walking through a project rather than 1 post per topic so I'm still learning how to convey so much information.

If you have any questions, difficulties, anything at all, don't hesitate to message me on Twitter and I will get back to you as soon as I can.

Thank You!!!♥