Deploy NextJS Application to Production

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

If you already have a subscription, you can sign in.

Professional NextJS Lessons

1.Course Intro
free
⏱️ 2:05
2.Get Setup
free
⏱️ 2:05
3.Project Template
free
⏱️ 5:45
4.Introducing FullStack React
free
⏱️ 4:57
5.App Router Reference
free
⏱️ 7:08
6.NextJS Server vs. "use client" Rendering
⏱️ 5:01
7.Nesting Server and Client Components
⏱️ 8:51
8.Client Only Components
⏱️ 3:48
9.Global CSS in NextJS
⏱️ 6:30
10.CSS Modules and SASS
⏱️ 4:15
11.Tailwind CSS
⏱️ 5:17
12.NextJS Custom Fonts
⏱️ 4:08
13.Static vs Dynamic Rendering
⏱️ 4:55
14.NextJS Link Component
⏱️ 3:20
15.NextJS Link Prefetching
⏱️ 5:49
16.Navigation Scroll with Link
⏱️ 2:02
17.Replace Navigation History
⏱️ 1:35
18.NextJS Image Component
⏱️ 7:01
19.Dynamic Image URLs
⏱️ 5:34
20.Safe Colocation with Private Folders
⏱️ 2:12
21.NextJS Route Groups
⏱️ 3:07
22.Dynamic Routes
⏱️ 5:37
23.NextJS API Routes
⏱️ 6:03
24.NextRequest and NextResponse
⏱️ 2:41
25.Cookies in API Handlers
⏱️ 4:25
26.React Suspense Simplified
⏱️ 2:23
27.Power of Suspense Boundaries
⏱️ 3:52
28.use Promises
⏱️ 3:24
29.Stream Promise Results from Server to Client
⏱️ 3:03
30.use Requires a Cached Promise
free
⏱️ 2:30
31.Suspense Error Boundaries
⏱️ 4:42
32.React Server Functions
⏱️ 4:50
33.Server Actions for Powerful Forms
⏱️ 5:35
34.useActionState to Simplify Form Actions
⏱️ 6:38
35.React Serializable Types
⏱️ 2:42
36.Create Dynamic Images with NextJS ImageResponse
⏱️ 5:54
37.Deploy NextJS Application to Production
⏱️ 3:51
38.NextJS Environment Variables Masterclass
⏱️ 3:50
39.Deploying and Managing Environment Variables
⏱️ 4:38
40.Using Databases for Dynamic Server Side State
free
⏱️ 7:34
41.Mastering NextJS Layout Files
⏱️ 4:54
42.Client State Management with NextJS
⏱️ 3:48
43.Client State Management In Action
⏱️ 8:04
44.Using Client State Management Libraries
⏱️ 5:25
45.Detecting Server vs Client Runtime and useEffect
⏱️ 4:33
46.Demystifying ISR vs SSR vs SSG
⏱️ 3:07
47.Static Site Generation or SSG with NextJS
⏱️ 3:16
48.Incremental Static Regeneration (ISR) Simplified
⏱️ 2:51
49.API Routes Caching with NextJS
⏱️ 3:05
50.Reference Guide to Caching for Modern NextJS
⏱️ 2:47
🚨 Work In Progress 🚧
Subscribe for Launch

Deploy NextJS Application to Production

Subscription Required

You must have an active subscription to access this content.
If you already have a subscription, you can sign in.

Lucky You

A great thing about the popularity of NextJS is that deployment guides exist for any cloud provider that you prefer.

Bring your App

Of course you need a nextjs application in order to deploy it!

If you don't have your idea converted to an app yet, no worries, you can use our simple demo app.

app/page.tsx
export default function Page() {
return <>We Love Continuous Deployment 🚀</>;
}

Push to Source Control

You can deploy your nextjs application from your local machine but when working in a team it is best to host it in shared source control and deploy it from there. The most popular option for this by far is GitHub.

Sign up for free on GitHub.com

And push your code to the cloud ☁️!

Vercel

The core business of vercel which is the company that builds nextjs is cloud hosting. This makes vercel the simplest deployment solution possible especially when you are in the process of learning NextJS.

Sign up for free on Vercel.com

Deploy Your Project

  • Connect to your GitHub account.
  • Select your nextjs project repo.
  • Click Deploy.
  • 🎉💰

Continuous Deployment

One great feature offered by Vercel is continuous deployment. As you push new code to your GitHub project, Vercel will automatically deploy your updated code for you 🚀

javascript
typescript
react
playwright

Enjoy free content straight from your inbox 💌

No spam, unsubscribe at any time.

Transcript

00:00

A great thing about the popularity of next JS is that deployment guides exist for any cloud provider that you prefer. Of course, you need a next JS application in order to deploy it. We have a simple app that displays a welcome message to the screen. The contents of the application are not important and the process will work for any next JS application that you might have. You can deploy your next year's application from your local machine, but when working as a team, it is best to host it in shared source control and deploy it from there. The most popular option for this by far is GitHub. For this, you will need a GitHub account

00:31

and you can get one for free from github.com. Once you have your GitHub account, you can actually publish directly from within Visual Studio Code. Here I'm publishing my source code to a new public repository for your benefit, and once this is complete, we can now proceed to our deployment. The core business model of Versal, which is the company that builds next JS, is cloud hosting. This makes Versal the simplest deployment solution possible, especially when you are in the process of learning. Next js, you can sign up to Versal and join the hobby plan for free, even if you do not plan to use Versal eventually. Since it is free, it is great for experimentation.

01:04

Once you are signed up, add a new project, and over here using your GitHub account, you will be able to import the repository that you just created. Versal will automatically detect that this is a next J project, and all that's left to do over here is to click the deploy button. You can monitor the initial deployment of your application and once that completes, congratulations, you have just deployed your next year's application to the public internet. From here, you can go to the dashboard for this particular app, which will also show you the free domain that Purcell has captured for your project. This domain will be inspired by your project name, which for our case is course Dash next year's dash deploy.

01:38

If you visit this URL, we can see our application ready for use by anyone on the internet. One great built-in feature offered by the cell, which is worth highlighting is its support for continuous deployment From our dashboard under the deployment tab, we can see that we currently only have one deployment for our application. Let's make a simple modification to our application. We provide a new text for our route page. We commit this modification with the new message over to Git, and once we sync those changes to push them over to GitHub cloud or sell will automatically pick up that new code has arrived and kick off a new deployment. We can monitor and debug the deployment

02:12

by going into the deployment page. Over here, we can see that the deployment is still taking place. At this point, we could look at the bid logs if you wanted, and that is helpful in case issues ever arise, but this particular deployment is going to succeed without any issues, and once it is complete, we can revisit our production application and we see the new updated message. In addition to production deployments, modern services also provide preview environments that can help you test your code before releasing it to the public. As an example, let's modify our page and create a new pull request.

02:44

We look at the page on GitHub, go into edit, and then modify the message to be something silly like, does this dress make me look fat? When we try to commit these changes, we are presented with a new dialogue over here. We could commit these changes directly to the main branch, Which will deploy to production, but instead we will create a pull request to allow us to collect feedback from our peers and visit a preview deployment of this application to see what it would look like if we were to deploy to production. Once we create the pull request, Orel will automatically pick up that a new pull request has arrived

03:15

and we'll kick off a preview deployment. Once this preview deployment has been completed, we can visit the preview URL that was provided as a part of a comment by Versa bot. On this preview URL, we can see our changes as if they were deployed to production, but notice the URL. This is only a preview URL. If you go to our production website, we still see the classic message. At this point, we have a choice. We can either commit these changes, leave comments, make some modifications, and eventually merge this poll request in order to deploy to production, or if we are unhappy

03:47

with this entire approach, we can instead choose to close the poll request.

Professional NextJS

Professional NextJS

1.Course Intro
free
⏱️ 2:05
2.Get Setup
free
⏱️ 2:05
3.Project Template
free
⏱️ 5:45
4.Introducing FullStack React
free
⏱️ 4:57
5.App Router Reference
free
⏱️ 7:08
6.NextJS Server vs. "use client" Rendering
⏱️ 5:01
7.Nesting Server and Client Components
⏱️ 8:51
8.Client Only Components
⏱️ 3:48
9.Global CSS in NextJS
⏱️ 6:30
10.CSS Modules and SASS
⏱️ 4:15
11.Tailwind CSS
⏱️ 5:17
12.NextJS Custom Fonts
⏱️ 4:08
13.Static vs Dynamic Rendering
⏱️ 4:55
14.NextJS Link Component
⏱️ 3:20
15.NextJS Link Prefetching
⏱️ 5:49
16.Navigation Scroll with Link
⏱️ 2:02
17.Replace Navigation History
⏱️ 1:35
18.NextJS Image Component
⏱️ 7:01
19.Dynamic Image URLs
⏱️ 5:34
20.Safe Colocation with Private Folders
⏱️ 2:12
21.NextJS Route Groups
⏱️ 3:07
22.Dynamic Routes
⏱️ 5:37
23.NextJS API Routes
⏱️ 6:03
24.NextRequest and NextResponse
⏱️ 2:41
25.Cookies in API Handlers
⏱️ 4:25
26.React Suspense Simplified
⏱️ 2:23
27.Power of Suspense Boundaries
⏱️ 3:52
28.use Promises
⏱️ 3:24
29.Stream Promise Results from Server to Client
⏱️ 3:03
30.use Requires a Cached Promise
free
⏱️ 2:30
31.Suspense Error Boundaries
⏱️ 4:42
32.React Server Functions
⏱️ 4:50
33.Server Actions for Powerful Forms
⏱️ 5:35
34.useActionState to Simplify Form Actions
⏱️ 6:38
35.React Serializable Types
⏱️ 2:42
36.Create Dynamic Images with NextJS ImageResponse
⏱️ 5:54
37.Deploy NextJS Application to Production
⏱️ 3:51
38.NextJS Environment Variables Masterclass
⏱️ 3:50
39.Deploying and Managing Environment Variables
⏱️ 4:38
40.Using Databases for Dynamic Server Side State
free
⏱️ 7:34
41.Mastering NextJS Layout Files
⏱️ 4:54
42.Client State Management with NextJS
⏱️ 3:48
43.Client State Management In Action
⏱️ 8:04
44.Using Client State Management Libraries
⏱️ 5:25
45.Detecting Server vs Client Runtime and useEffect
⏱️ 4:33
46.Demystifying ISR vs SSR vs SSG
⏱️ 3:07
47.Static Site Generation or SSG with NextJS
⏱️ 3:16
48.Incremental Static Regeneration (ISR) Simplified
⏱️ 2:51
49.API Routes Caching with NextJS
⏱️ 3:05
50.Reference Guide to Caching for Modern NextJS
⏱️ 2:47
🚨 Work In Progress 🚧
Subscribe for Launch