
Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
If you're encountering an execution timeout after deployment when "Generating AI Answer," it's because Vercel (or any deployment provider but not Framework i.e., Next.js) enforces a time limit on how long a function can run. Since calling OpenAI to generate a response can take longer than a typical API request, you might hit that limit.
To fix this, you can increase the allowed execution time by setting maxDuration for your endpoint:
export const maxDuration = 5;
Learn more about how maxDuration works here.
Another way to speed things up is to run the API endpoint closer to your users by switching the runtime to the Edge Network. This reduces the distance between your user and the server handling the request, leading to faster responses.
You don't need complex setup — just add this line to your endpoint file:
export const runtime = "edge";
With this, your AI API will now run on a server closer to your users, making it faster and more efficient.
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var
(function-scoped, outdated)let
(block-scoped, modern and recommended)const
(block-scoped, cannot be reassigned)_
, or $
let let = 5;
is invalid)myVar
and myvar
are different)string
, number
, boolean
, null
, undefined
, bigint
, symbol
Objects
, Arrays
, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 And finally, we are ready to deploy our app to the internet.
00:00:03 Not like we haven't done that before while testing, but hey, now we're deploying the final version, so let's give it a shot.
00:00:10 First, make sure that you have pushed everything that you have coded so far to GitHub.
00:00:15 So if there's a lonely commit right here, go ahead and commit and sync it so that GitHub knows that there are some changes.
00:00:22 Once you do that, let's go through a couple of fixes to make sure that our deployment goes smoothly.
00:00:29 One of these things is a quick ShadCNFix, or more specifically, it has something to do with our ESLint.
00:00:36 So head over into the ESLint file and right below the rules, add a new text that says ignore patterns.
00:00:46 And then you can make that into an array.
00:00:48 Here, you can say that we want to avoid components, UI, and then asterisk asterisk.
00:00:55 This is because we don't really care what ESLint does with ShatCN created files.
00:01:01 Keep in mind, within components, and then right there, we have all of our ShatCN files, specifically in the UI.
00:01:09 So if there's an ESLint error right here, we don't want that to mess with our deployment.
00:01:13 head over to Vercel and create a new project.
00:01:17 If you don't have it already, you can just click Import right here.
00:01:21 Of course, make sure to find it where you have actually been pushing this entire code.
00:01:25 Then click Import.
00:01:27 This will automatically recognize that this is a Next.js project, and the only thing you have to do is add your environment variables.
00:01:35 So, head back into your application, into your .env.local, copy all of those envs, and just paste them right here into the first key.
00:01:44 It'll automatically populate all of the other values.
00:01:47 Let's just make sure whether we have everything.
00:01:49 MongoDB URI is here.
00:01:52 Auth GitHub ID and Auth GitHub Secret are here.
00:01:56 Google ID and Google Secret are here.
00:01:58 The basic Auth Secret is here as well.
00:02:01 We also have to add one more, and that is the next public API base URL.
00:02:08 So far, we have been working on localhost 3000 and we will leave it as that.
00:02:13 So I'll just say HTTP colon forward slash forward slash localhost 3000 forward slash API.
00:02:21 Later on, once we get the deployed URL of our application, we'll switch it over to that deployed URL.
00:02:26 Oh, and make sure that you have the next public rapid API key for the jobs functionality to work.
00:02:31 And then just before you click deploy, let's also look into the build and output settings.
00:02:37 Here, we want to override the installation command.
00:02:40 Ever since we installed the newer versions of ESLint, now we need to install the packages by running npm install legacy.predeps for everything to work
00:02:50 properly together.
00:02:51 So once you do that, you can go ahead and click deploy.
00:02:54 This process typically takes a couple of minutes, and it's possible that it won't be successful on the first try, but that's totally okay.
00:03:02 I'll pause the recording right now, and then I'll be back when we have a result.
00:03:06 It looks like we got an error while trying to deploy it.
00:03:09 Specifically, it was around importing the Mongoose dist browser UMD within our database interaction model TS.
00:03:16 So let's check it out.
00:03:18 If you head over back to your interaction, .model.ts within our database.
00:03:24 There aren't any apparent errors here, but you can see that here we have created an interaction actions enum.
00:03:31 Well, this interactions actions enum is used within our lib validations file.
00:03:38 So let's search for it.
00:03:39 Interactions actions enum.
00:03:42 Here it is.
00:03:43 And this is used in both client and server side.
00:03:47 So schemas like sign-in schema or sign-up schema are used only on the client side.
00:03:53 But the create interaction schema is used within a MongoDB file.
00:03:58 This is why Mongoose has issues and throws that error.
00:04:01 We're trying to use a Mongoose feature on the client side that's only available on the server side.
00:04:06 So to fix this, we'll have to modify the lib validations file and define these enums individually so that we don't have to have any imports.
00:04:15 So let me go ahead and copy these different enums.
00:04:19 So it's just an array, so I'll copy the entire array right here.
00:04:23 Head back over to validations and instead of the interaction enums, I'll just paste what I copied.
00:04:31 This way, we don't have to import them at the top, and that should fix our error.
00:04:36 So before I go ahead and push this change, let's first head back over to our deployment.
00:04:42 So go to different projects, select this new project, and then Under project, you should be able to see the domain.
00:04:50 Perfect.
00:04:51 This is exactly what we needed.
00:04:53 So copy this domain where the project will eventually be uploaded and hosted and head over to environment variables.
00:05:02 Then, remember our next public API base URL?
00:05:06 Well, now you can edit it to this new one.
00:05:10 But make sure to add HTTP at the start.
00:05:13 So it's https://jsmasterypro.devflow.bavercellapp.
00:05:21 For you, of course, it's going to be something different.
00:05:24 and make sure to copy this URL once again and save it.
00:05:27 Now, I'm actually glad that this didn't work on the first time.
00:05:30 Why?
00:05:30 Because we got a chance to update this environment variable, which we need to do anyway later on.
00:05:36 Now, just before we go ahead and push this change to fix this broken deployment, now that Vercell has already given us a domain that we'll deploy to,
00:05:44 we'll also need to fix something regarding the Google and GitHub sign-in.
00:05:49 Remember, we're using those two sign-ins to authenticate our users into the application.
00:05:54 So head over to GitHub and go to github.com settings apps or you can manually visit it by heading over to settings and then scroll down to developer settings
00:06:07 and then here you should be able to find OAuth apps.
00:06:11 Earlier we used localhost but that won't work on deployment.
00:06:15 So we have to create a new project specifically for production.
00:06:18 So I'll click new OAuth app.
00:06:21 I'll give it a name of Devflow production and I'll give it the home page URL.
00:06:27 Make sure that it is this one that we just copied from Vercel.
00:06:30 You also need to give it the authorization callback URL which is that same link but you need to add to it forward slash API forward slash auth forward
00:06:41 slash callback, forward slash GitHub.
00:06:44 And now you can register this new application.
00:06:46 Then you'll be given a client ID, which you can take over to Vercel, Settings, Environment Variables, and now you can update this Auth GitHub ID by editing
00:06:59 the previous one we had, And we'll also need to update the GitHub secret.
00:07:03 So, generate a new client secret.
00:07:06 You'll need to authenticate.
00:07:08 And then you can copy it and paste it right here under the Auth GitHub secret.
00:07:14 And save it.
00:07:16 Now we'll have to repeat the same thing for Google authentication.
00:07:20 So head over to console.cloud.google.com.
00:07:23 Go to DevFlow, project we have created before.
00:07:26 Open up the sidebar.
00:07:28 Head over to APIs and services and credentials.
00:07:32 Here you can create a new set of credentials.
00:07:35 I'll call it OAuth client ID.
00:07:37 You'll have to choose the application type, which is web.
00:07:40 And I'll call it DevFlow production.
00:07:45 And then you'll have to add authorized JavaScript origins, which will be that same deployment URL.
00:07:50 And then for the redirect callbacks, I'll do the same thing, but to it, I'll append API auth callback forward slash Google.
00:08:02 And I'll click create.
00:08:04 This process should take about five minutes, but oftentimes it is much less.
00:08:09 So immediately I'm given a client ID and a client secret.
00:08:13 So we have to copy them one by one over to our Vercel environment variables.
00:08:18 Here we have Auth Google ID, which I will simply override.
00:08:23 And then finally, there's the Auth Google Secret.
00:08:26 So if I copy it from here and paste it right here, you'd see it changes, and we can save it.
00:08:34 I believe we have updated all the necessary environment variables right now.
00:08:38 So we can either automatically just restart this deployment, or another thing we can do is just push this new change that fixes the deployment for us.
00:08:48 So I'll do just that.
00:08:50 I'll say fix deployment issue, commit and sync, which should automatically retry the deployment but this time with the modified environment variables,
00:09:02 which is super important for us to be able to authenticate and for our application to be able to call this deployment API right now,
00:09:12 not the local one.
00:09:14 Perfect.
00:09:15 So with that in mind, this deployment is rolling, and hopefully it'll roll past 42 seconds where it broke the previous time.
00:09:24 I'll pause the video and I'll be right back.
00:09:27 It looks like I got only 20 seconds more, but it broke again, this time due to an ESLint warning.
00:09:34 So if we head over into the question form, you'll see that we most likely have just a tiny Iceland warning right here.
00:09:42 Yep, this is unknown.
00:09:43 So we could go ahead and fix it right here.
00:09:46 But I'm sure we have a couple of these warnings scattered throughout our entire application.
00:09:50 So instead of fixing every one of them one by one, what I like to do just to get the deployment rolling is head over into the next config and right above
00:10:00 the images, at the ESLint section where I can say ignore during builds and set that to true.
00:10:08 We can do a similar thing with TypeScript where we can say ignore build errors also set the true just to make sure we can actually go live.
00:10:17 So I'll say ignore ESLint and TypeScript only during builds at least for now.
00:10:27 And we can commit and sync it.
00:10:29 So let's see how this one goes.
00:10:31 And there we go.
00:10:32 In just a minute and a half, it seems that we are live.
00:10:36 So head over to your project and click visit.
00:10:39 If you do that, you'll be redirected to our wonderful homepage where we can see all of the questions that other people have asked with search and filtering capabilities,
00:10:50 as well as the recommended feature.
00:10:51 There's also the pagination at the bottom.
00:10:53 and you can even ask additional questions.
00:10:56 But of course, to ask questions, you have to be authenticated.
00:10:59 So, let's see if the authentication works on the deployed site as well.
00:11:04 It seems like my access was denied.
00:11:06 What do you think?
00:11:07 Why would this happen even though we have successfully added the new environment variables that allow us to process authentication on this new deployed URL?
00:11:16 Well, most likely, it is due to some kind of an ENV config issue.
00:11:20 You can also check out the logs.
00:11:22 Here, most of the things looks good, but there is an API of error.
00:11:27 Interesting.
00:11:28 This is pointing to a 403 forbidden.
00:11:31 So this is exactly what I wanted to point your attention to.
00:11:34 When you're searching for errors in production, sure, some of them might appear on the client side, such as right here.
00:11:41 But with server-side render duplications, that is rare because most of the errors will actually be happening on the server.
00:11:48 So how can you get access to those server errors?
00:11:50 Well, through Vercel logs.
00:11:53 So these logs will be your best friend when debugging.
00:11:57 And considering that this is pointing to forward slash auth and not forward slash API forward slash auth, I think I know where the mistake might be.
00:12:06 If you head over into environment variables and search for next public API base URL, and edit it, you'll see that this is the URL of our application,
00:12:18 but not the API URL.
00:12:20 So you have to append forward slash API at the end of it.
00:12:24 And once you change your environment variables, you'll need to redeploy.
00:12:29 So head back and click redeploy right here.
00:12:32 Let's wait about a minute and let's test the auth then.
00:12:35 There we go.
00:12:36 We're live.
00:12:37 So let's visit it one more time.
00:12:39 And let's try to authenticate once again.
00:12:41 And we are in.
00:12:42 And now we can head over to the ask a question form where you can form the questions or just check out your profile.
00:12:50 Everything is synced from before because we're still using the same database, but now we're checking everything out on the live deployed URL.
00:13:00 And I gotta say, this is looking amazing and I'm waiting for more users to come in and use our great application.
00:13:08 Once again, sorry for flashing your eyes, but I think it's worth mentioning that our Devflow application has the light mode as well,
00:13:16 even though I doubt anybody's gonna be using it.
00:13:18 Still, with that said, there we have it.
00:13:21 The app we have been working so hard on to implement is now complete.
00:13:26 Give yourself a big pat on the back because you deserved it.
00:13:30 You took the time to learn everything that Next.js has to offer.
00:13:35 And then you implemented it right here, everything within a single application.
00:13:41 Again, it's not this app that is so amazing.
00:13:44 is the skills that you have gathered while building it and your ability to implement these or very similar features into every single new application that
00:13:53 you implement using Next.js.
00:13:56 Everything from search on every single page that uses URL search parameters to best practices of using forms, pagination and more,
00:14:05 all while using the latest and greatest of what Next.js and all of the accompanying technologies that we use to build this app,
00:14:12 Offer.
00:14:13 Once again, amazing job on deploying the app.