So I already said goodbye to you but I forgot that I want to explain to you how to deploy. So, first things first, let's check if we are ready to deploy at all. So I'm gonna go ahead and do the following. Inside of your project, you can now close everything, you don't need to have anything running. Go ahead and do npm run build.
This must not have any errors for us to be able to deploy. So we can save some time instead of wasting time on Vercel. And as you can see, at least on my version of Next.js I am getting an error Expert encountered errors on the following paths Dashboard and not found. It looks like there is a pre-rendering error So let's go ahead and see what's going on. I believe that is because of our convex provider.
So let's go ahead and do the following. Inside of our app folder, inside of layout.vsx, let's wrap our entire convex client provider in a suspense from React. So let me do this like that. Make sure you import suspense from react and I'm gonna move it here to the top. And we're gonna have a nice fallback here to be our loading from components outloading.
We already have this prepared. We use it. It's just our logo in the center. Great. And let's go ahead and try that out now.
So I'm gonna go ahead and do npm run build again. So let's see if that resolved our pre-rendering error. And do we have any more errors we need to resolve. So it looks like this is now working completely fine. Great!
And here's one more thing I want to do before we push this to GitHub and that is that inside of your app folder API live blocks out we are just plainly passing this secret key here so let's copy it from here and let's add it to our environment variables and you can see that I already did that here because I was practicing before this chapter. So just create a new key, LiveBlocks secret key and paste it inside with your key like this and then go ahead back here and replace this with process.environment LiveBlocks secret key and add an exclamation point at the end like that. Perfect! So now we are ready. Let's go ahead and do the following.
Let's go ahead and write git add and then do git commit and write your message And then go ahead inside of your GitHub and create a new repository. So I'm going to call this Next14-board-clone or board-tutorial. I'm going to mark this as a private repository and I'm going to click create repository. After this, go ahead and copy the second option for an existing repository right here and paste it and run the commands. After this has been pushed, you can reset, refresh this page right here and now you should see your repository right here.
Perfect! Now let's go ahead and let's see what we have to do next. So I'm following the instructions here from convex to deploy on Vercel. So let's go ahead and deploy something on vercel.com slash new. So I'm going to choose this latest repository that I have here which I just added in my github and what we're going to do first is we're going to override the build command.
So let's use npx convex deploy dash dash cmd npm run build here. So I'm gonna go ahead and click on build and output settings override and I'm gonna paste that here. And then we have to do the environment variables. So I'm gonna go ahead inside of my .environment.local here, copy everything and I'm gonna go ahead and paste that here. Like this.
But there is something we have to change here and that is inside of here we need to request our convex deploy key and we need to use the production version. So let's go ahead inside of our dashboard here on convex and switch from dev to production right here. And in here go ahead and go to settings and click on generate a production deploy key. So go ahead and copy this and now we need to add a new convex underscore deploy underscore key if I believe that's the correct one convex deploy key and we have to add that here so you can just click add and now if you want to you can also go ahead inside of your live blocks and you can change from development to production, right? So you have two instances here.
So you can change to production and change the API keys here as well. Generate a new secret key. Let me try and generate it. For some reason I cannot copy it. Also now it's appearing.
Okay, I'm just not gonna do it for this tutorial, but you can get the new key from there and then you can change it to production here and you can do the same thing for the clerk secret key and the clerk publishable key if you want to change them. You don't have to if you just want to deploy for testing you don't have to change any of those. Great and I think this should be enough for us to click deploy and see if this is going to work. So I'm going to pause my screen and then we're going to see what happens. And there we go!
Let me go ahead and continue to dashboard here so I can see my domain link right here. And let's see, there we go. Let me log in and here we are. So let me go inside of my project here. Your will probably be empty because you are now in production with Convex.
So you have a new database, right? I already tested this out, that's why I have this one. And look at this! Everything seems to be working just fine. Use successfully, deployed, great, great job.
Thank you so much for watching and make sure to check out the website if you want additional content, where I turn this into a software as a service by introducing a Stripe. See you in the next video.