How To Host Next.js (Hostinger) - CourtneyR.dev's 2nd Brain

How To Host Next.js (Hostinger) 🔗 **Source:** [How To Host Next.js (Hostinger)](https://www.youtube.com/watch?v=_ba-M2gDovU) > [!note]+ Document Notes > tags: [nextjs-hosting, web-deployment, managed-hosting] > author: ByteGrad > source: YouTube > reference: https://www.youtube.com/watch?v=_ba-M2gDovU > date created: 2024-12-19 14:30 > > # 🏷️ Title: How To Host Next.js (Hostinger) >  ## 🧰 Action Inbox - [H1] Evaluate Hostinger's managed hosting for production apps — new NodeJS frontend hosting option #hosting - [H2] Compare deployment options: static export vs managed hosting — cost/complexity analysis #deployment - [H3] Test automatic GitHub integration and deployment pipeline — CI/CD setup validation #devops ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Hostinger NodeJS Hosting](https://www.hostinger.com) - [Coolify](https://coolify.io) - [Dokku](http://dokku.viewdocs.io/dokku/) ## 📝 Summary - ByteGrad demonstrates Hostinger's new managed hosting service for Next.js applications, comparing it to traditional deployment methods - The service provides automatic GitHub integration, CDN, SSL, analytics, and other managed features out-of-the-box - Key stakeholders include developers seeking simpler deployment alternatives to Vercel/Netlify and those wanting more control than static hosting - Tradeoffs include vendor lock-in vs convenience, with potential cost savings compared to premium managed platforms - Bottom line: Hostinger offers a compelling middle-ground between complex self-hosting and expensive managed platforms for Next.js deployment ## 📖 Main Content The tutorial explores various Next.js hosting approaches, positioning Hostinger's new managed hosting as a solution between complex self-hosting and premium managed services. Traditional options include static exports (limited server features), VPS setup (requires DevOps skills), Docker containers (needs Docker knowledge), and tools like Coolify/Dokku (easier but still technical). Hostinger's managed hosting provides automatic deployments, CDN, SSL certificates, analytics, and database access without manual configuration. The demonstration shows connecting a GitHub repository, automatic framework detection, deployment logs, environment variable management, and custom domain setup. This represents a shift toward more accessible managed hosting options for Node.js applications beyond the dominant Vercel/Netlify ecosystem. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=_ba-M2gDovU?t=0) — [H1] Introduction to Next.js hosting options - Key idea: Hostinger now offers managed hosting for Next.js with GitHub integration - Evidence: "You can deploy by just connecting your GitHub repo or uploading files like a zip file" #### ⏱️ [01:15](https://www.youtube.com/watch?v=_ba-M2gDovU?t=75) — [H2] Static export limitations - Key idea: Static exports lose server-side Next.js features - Evidence: "You won't have like API routes or server actions, server components" #### ⏱️ [02:03](https://www.youtube.com/watch?v=_ba-M2gDovU?t=123) — [H2] VPS hosting complexity - Key idea: Traditional VPS requires extensive DevOps knowledge - Evidence: "You have to do like PM2 to keep the process running, you may have to set up nginx or caddy" #### ⏱️ [02:45](https://www.youtube.com/watch?v=_ba-M2gDovU?t=165) — [H2] Docker containerization benefits - Key idea: Docker provides more standardized deployment process - Evidence: "It's more neatly organized in my view. Once you've built a Docker image, you can run it anywhere" #### ⏱️ [03:20](https://www.youtube.com/watch?v=_ba-M2gDovU?t=200) — [H2] Coolify and Dokku advantages - Key idea: These tools handle DevOps complexity with better interfaces - Evidence: "They basically take care of a lot of that DevOps type of work that you would have to do yourself" #### ⏱️ [04:15](https://www.youtube.com/watch?v=_ba-M2gDovU?t=255) — [H1] Managed hosting benefits - Key idea: Fully managed solution includes uptime, security, CDN, and analytics - Evidence: "You basically get everything out of the box. So you have uptime and patches and security and a CDN" #### ⏱️ [05:30](https://www.youtube.com/watch?v=_ba-M2gDovU?t=330) — [H2] Hostinger cloud hosting plans - Key idea: NodeJS support included in cloud hosting with current promotions - Evidence: "Five NodeJS front-end web apps included... they're running an amazing sale here" #### ⏱️ [07:45](https://www.youtube.com/watch?v=_ba-M2gDovU?t=465) — [H2] GitHub repository integration - Key idea: Supports both public and private repositories with selective access - Evidence: "Works with both public as well as private repos... I like to be a bit selective" #### ⏱️ [09:20](https://www.youtube.com/watch?v=_ba-M2gDovU?t=560) — [H2] Automatic framework detection - Key idea: Platform automatically identifies Next.js and configures deployment - Evidence: "It can automatically detect what type of framework it is... you most likely don't need to change anything" #### ⏱️ [10:15](https://www.youtube.com/watch?v=_ba-M2gDovU?t=615) — [H1] Live deployment demonstration - Key idea: Full Next.js features work including server actions and route handlers - Evidence: "I am getting a result here from a server action as well as from my route handler" #### ⏱️ [11:00](https://www.youtube.com/watch?v=_ba-M2gDovU?t=660) — [H2] Built-in CDN verification - Key idea: CDN automatically configured and serving cached content - Evidence: "I can see a header here for the cache status and it is marked as a hit" #### ⏱️ [12:30](https://www.youtube.com/watch?v=_ba-M2gDovU?t=750) — [H2] Dashboard features overview - Key idea: Comprehensive management interface with analytics and deployment logs - Evidence: "Analytics, databases, file manager... complete overview of all the settings and also really nice a list of deployments" #### ⏱️ [13:45](https://www.youtube.com/watch?v=_ba-M2gDovU?t=825) — [H2] Environment variables and settings - Key idea: Full configuration control through web interface - Evidence: "If you are relying on environment variables we can add those right here" #### ⏱️ [14:20](https://www.youtube.com/watch?v=_ba-M2gDovU?t=860) — [H2] Automatic deployments from Git - Key idea: Push-to-deploy workflow with automatic builds - Evidence: "Now I made a change and I push to GitHub. Now... there's automatically a new deployment being done" #### ⏱️ [16:00](https://www.youtube.com/watch?v=_ba-M2gDovU?t=960) — [H2] Additional platform features - Key idea: Includes performance monitoring, AI crawler management, backups - Evidence: "Page speed insights here out of the box... AI crawler activity... analytics here out of the box as well" ## 📚 References - [Hostinger Cloud Hosting](https://www.hostinger.com/cloud-hosting) - [Next.js Deployment Documentation](https://nextjs.org/docs/deployment) - [Coolify Self-Hosting Platform](https://coolify.io) - [Dokku PaaS Alternative](http://dokku.viewdocs.io/dokku/) ## 🗣️ Paraphrase - Hostinger has introduced managed hosting for Next.js applications that bridges the gap between complex self-hosting and premium managed services, offering GitHub integration and automatic deployments with full framework support - The traditional deployment landscape ranges from static exports that sacrifice server features to complex VPS setups requiring significant DevOps expertise, with newer tools like Coolify and Dokku providing intermediate solutions - The demonstrated managed hosting approach provides enterprise-grade features like CDN, SSL, analytics, and monitoring through a user-friendly interface while maintaining developer workflow integration and reasonable pricing ## 📰 Newsletter Hostinger has launched managed hosting for Next.js applications, offering an interesting alternative to traditional deployment options. This new service provides automatic GitHub integration, built-in CDN, SSL certificates, and comprehensive analytics without requiring DevOps expertise. The tutorial demonstrates how easy it is to deploy a full-stack Next.js application with server actions and API routes working seamlessly. Key benefits include automatic deployments on Git pushes, environment variable management, and detailed deployment logs. For WordPress developers exploring modern frameworks, this represents a familiar managed hosting experience applied to JavaScript applications, potentially lowering the barrier to adopting Next.js for client projects. Resources: [Next.js Documentation](https://nextjs.org/docs), [Hostinger NodeJS Hosting](https://www.hostinger.com), [GitHub Integration Guide](https://docs.github.com/en/developers/apps) ## ✅ Action Items #### DevRel - Developer advocacy: Create comparison matrix of Next.js hosting options for different skill levels and use cases - Education: Develop workshop curriculum covering deployment strategy selection based on project requirements - Developer experience: Document environment variable management and CI/CD best practices for managed hosting - Developer marketing: Content series on hosting cost optimization and vendor evaluation criteria - Community management: Survey developers on hosting pain points and preferred deployment workflows #### OSPO - Policy & Governance: Review vendor lock-in implications and data portability requirements for managed hosting - License Compliance: Audit hosting platform compliance with open source license obligations - Security Management: Evaluate managed hosting security controls and vulnerability disclosure processes - Software Inventory: Catalog hosting dependencies and assess supply chain risks - Developer Support: Training materials on deployment security and compliance considerations #### Community - Maintainers: Deployment troubleshooting guides and common issue resolution - Contributors: Onboarding documentation for setting up development/staging environments - Sponsors: Cost comparison analysis for hosting budget planning - Ecosystem: Cross-platform deployment compatibility and migration strategies #### WordPress - Core: Performance impact analysis of different hosting configurations on WordPress sites - Community: Hosting recommendation guidelines for different WordPress use cases - Training: Lesson plans covering hosting fundamentals and deployment workflows - Documentation: Update deployment guides with managed hosting options and comparisons #### The WPCC - Programs: Hosting credits or partnerships for fellowship participants - Projects: Deployment automation tools and standardized hosting configurations - Funding: Cost-effective hosting solutions for community-funded projects ## 🧪 Hypotheses - Managed hosting services will become the dominant deployment method for Next.js applications as complexity of self-hosting increases - Developer productivity improves significantly when deployment complexity is abstracted away through managed platforms - The hosting market will fragment into specialized services for different frameworks rather than one-size-fits-all solutions - Cost optimization becomes secondary to developer experience for most small-to-medium applications ### 📊 Methodology - Study design to test hypothesis 1: Survey deployment method adoption over 12-month period across different developer segments - Data sources and analysis for hypothesis 2: Time-to-deployment metrics comparing managed vs self-hosted approaches - Experiments to validate hypothesis 3: Framework-specific feature utilization analysis across hosting platforms ### ❓ Questions - How does the performance of managed Next.js hosting compare to self-optimized VPS configurations? - What are the long-term cost implications of managed hosting vs self-hosting at different scales? - How do vendor lock-in risks affect enterprise adoption of managed hosting platforms? ### 🔮 Future Research - Comparative analysis of managed hosting platforms for different JavaScript frameworks - Developer experience metrics for various deployment workflows and their impact on productivity - Security and compliance requirements evolution in managed hosting for enterprise applications ### 💡 Implications - Practice: Simplified deployment workflows may accelerate Next.js adoption among WordPress developers - Policy: Need for vendor evaluation criteria and data portability requirements in hosting selection - Security: Managed hosting security responsibilities shift from developer to platform provider - Education: Training focus shifts from infrastructure management to application optimization - Funding: Budget allocation changes from infrastructure management to platform service costs ### 🧠 Learning Styles Assessment Reading level estimate: Flesch-Kincaid Grade Level 8.5 #### 👀 Visual learners - Present: Screen recordings of deployment process, dashboard interfaces, GitHub integration - Improve: Architecture diagrams showing managed hosting vs self-hosted infrastructure, comparison charts #### 🔊 Aural learners - Present: Video narration explaining each deployment step and configuration option - Improve: Audio summary of key hosting decision factors and cost considerations #### 🗣️ Verbal learners - Present: Clear explanations of technical terms, analogies between hosting types - Improve: Story-driven examples of hosting selection scenarios and outcomes #### 🧩 Kinesthetic learners - Present: Step-by-step deployment walkthrough with actual GitHub repository - Improve: Interactive deployment checklist, hands-on hosting platform comparison exercise #### 🧠 Logical learners - Present: Structured comparison of hosting options with pros/cons analysis - Improve: Decision tree for hosting selection, cost calculation worksheets #### 🧑‍🤝‍🧑 Social learners - Present: Community discussion context around hosting choices - Improve: Group deployment exercise, peer review of hosting configurations #### 🧘‍♀️ Solitary learners - Present: Complete tutorial format suitable for individual learning - Improve: Self-assessment questionnaire for hosting needs, reflection prompts on deployment strategy #### 🌿 Naturalistic learners - Present: Discussion of hosting ecosystem and platform relationships - Improve: Environmental impact comparison of different hosting approaches ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure in video description and timestamps - Improve: Detailed alt text for dashboard screenshots, structured content outline #### Keyboard navigation - Present: Standard YouTube video controls - Improve: Transcript navigation, keyboard shortcuts for code examples #### Contrast and readability - Present: High contrast in dashboard demonstrations - Improve: Increased font sizes in code examples, better color contrast in diagrams #### Text resizing and reflow - Present: Responsive video player - Improve: Scalable code examples, flexible layout for tutorial materials #### Media and captions - Present: Video content with spoken narration - Improve: Closed captions, downloadable transcript with timestamps #### Forms and interactions - Present: Clear demonstration of form interactions in hosting dashboard - Improve: Accessible form validation examples, keyboard navigation demonstrations ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global hosting platform with international data centers - Improve: Multi-region deployment considerations, international compliance requirements #### Inclusive language - Present: Technical language with explanations of hosting terminology - Improve: Plain language alternatives for complex DevOps concepts, avoiding jargon assumptions #### Neurodiversity support - Present: Structured step-by-step tutorial format - Improve: Clear progress indicators, consistent navigation patterns #### Representation - Present: Focus on technical demonstration without identity-specific content - Improve: Diverse use case examples, varied developer persona scenarios #### Psychological safety - Present: Encouraging tone about deployment complexity being manageable - Improve: Acknowledgment of different skill levels, no assumptions about prior knowledge ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Logical progression from hosting challenges to managed solution benefits - Inductive strength: Generalizing from specific Hostinger example to broader managed hosting trends - Causal reasoning: Clear cause-effect relationships --- ## Full Transcript [00:00] Hey everyone, in this video we're going [00:01] to talk about hosting a Nex.js app. And [00:03] in particular, we're going to look at a [00:05] new managed hosting option that you have [00:08] these days, which is actually here in [00:09] Hostinger. Yes, they're sponsoring the [00:11] video, but I've had a great time using [00:13] them, and I'm actually really excited to [00:14] see this. Now, you can also deploy your [00:17] NextJS website very easily to Hostinger. [00:20] You can deploy by just connecting your [00:22] GitHub repo or uploading files like a [00:24] zip file. Super easy, and I'll show you [00:26] that in the video as well. But I also [00:27] quickly want to give you an overview of [00:29] the different options that you have [00:30] right now. So let's quickly go through [00:31] it and then I'll show you how to host a [00:33] NexJS website on Hostinger using their [00:36] latest front- end website hosting [00:38] offering. Right? Not just for NexJS by [00:40] the way, also for other NodeJS based [00:42] applications like React Vit or other [00:44] apps. All right. So first option that [00:46] you have is to do a so-called static [00:48] export. In that case, you're basically [00:49] going to turn your entire app into a [00:51] bunch of HTML, CSS, and JavaScript [00:53] files. You can then host it from pretty [00:56] much any place like an S3 bucket and [00:58] then you can put a CDN in front. [01:00] However, running a static export does [01:02] not support Nex.js features that require [01:04] a server. So, you won't have like API [01:06] routes or server actions, uh, server [01:09] components. Basically, only the things [01:10] that are available during build time [01:12] will be used to create HTML, CSS, and [01:16] JavaScript artifacts that you're then [01:18] going to host somewhere. The other [01:19] option I showed you before is actually [01:21] to just try to install NodeJS on let's [01:23] say a VPS because Nex.js is a NodeJS [01:25] app. So you could rent a VPS from let's [01:27] say hostinger, right? So you would run a [01:29] build with mpm run build to create an [01:31] optimized version and then you would [01:33] actually start it on the VPS with npm [01:36] run start. Now I've actually showed you [01:37] that in a previous video, but it's quite [01:40] a lot of setup. So you have to do like [01:41] PM2 to keep it to keep the process [01:44] running. you may have to set up engine X [01:46] or caddy or let's encrypt type of [01:48] services yourself and generally speaking [01:50] you need to do a lot of terminal [01:51] commands right so this would only be [01:53] interesting I think for people that are [01:55] dev ops savvy the other option is to [01:57] actually dockerize nextjs and then run [01:59] it as a docker container in my view this [02:02] is an easier option because you can [02:04] already codify a lot in a a docker file [02:06] or docker compos file and so it's not [02:08] really dependent on you running a bunch [02:10] of random terminal commands it's more [02:13] neatly organized ized in my view. Also, [02:15] of course, once you've built a Docker [02:17] image, you can run it anywhere. It feels [02:19] more like a standardized process, but in [02:21] that case, of course, you do need to [02:22] know about Docker itself, the Docker [02:24] basic. So, there's still some Docker [02:25] scale involved. And now, a more recent [02:27] option is to actually use Coolify or [02:29] Doc. So, with Coolify and Doy, here are [02:32] their websites. And they basically take [02:35] care of a lot of that DevOps type of [02:37] work that you would have to do yourself. [02:38] So instead of dealing with Docker [02:40] ourselves, they do similar things for us [02:42] under the hood and you get a really nice [02:44] interface and actually overall it's a [02:46] great deployment experience. And the [02:48] nice thing is that providers like [02:49] Hostinger, they actually provide a VPS [02:51] template out of the box, right? So you [02:53] can see Hostinger has a Coolify VPS [02:55] template as well as a Doy VPS template. [02:58] So there's just very little setup [02:59] required to get going here. So I think [03:01] in the past year or so, this has become [03:04] the best deployment experience that you [03:06] could get self-hosting next.js jazz in [03:08] my view. However, there is now also an [03:10] even more recent option that I would [03:13] categorize as managed hosting. Managed [03:15] hosting you basically get everything out [03:17] of the box. So you have uptime and [03:19] patches and security and a CDN like DOS [03:22] protection. Typically some analytics is [03:24] built in. And Hostinger is now also [03:26] entering this space and traditionally of [03:28] course they have offered something like [03:29] this for WordPress sites. So they've [03:31] learned a lot about doing it for [03:33] WordPress. But of course these days [03:35] we're building a lot of websites with uh [03:37] Node.js right so Nex.js but also React [03:39] and Vue and so on. So now if you go to [03:42] the hosting or dashboard you will see [03:44] here under websites websites list and [03:47] they actually call it out here. So if [03:49] you have NodeJS front- end apps you can [03:51] now also host it deploying from GitHub [03:53] or you can upload a zip file. So let's [03:56] actually try this out. So I'm logged in [03:58] here in the Hostinger dashboard. It's [04:00] under websites and then websites list. [04:01] Now, this works on certain plans. So, if [04:03] we go to get new hosting plan, I've gone [04:05] ahead with the cloud hosting option [04:08] here. So, as of recording, they're [04:09] running an amazing sale here. So, I've [04:11] gone ahead with the cloud hosting plan [04:13] here. And then you can pick resources [04:16] that you want. But you can see there are [04:17] five NodeJS front-end web apps included. [04:20] Now, this is new and they even are and [04:23] they're even working on back-end support [04:25] as well. So, I think this can be a real [04:26] gamecher. And we also have some other [04:29] benefits here. Now, if you're going to [04:30] do this, there is actually an amazing [04:32] sale as of recording. So, make sure to [04:34] check out the link in the description. [04:36] Make sure to use my coupon code, which [04:38] is all uppercase bitegrad. If you apply [04:40] that, you will get an even better deal. [04:43] So, make sure to use the link in the [04:45] description and then coupon code all [04:46] uppercase bytegrat. So, you can pick the [04:49] configuration and options that you want. [04:51] All right. And after payment, you will [04:52] go through a setup wizard here. So you [04:55] can actually also bring other existing [04:57] sites into Hostinger but in this case we [04:59] just want to create a site. Now this is [05:01] focused a bit more on WordPress. Uh so [05:04] we can basically skip this. I will just [05:05] go with the empty here. And I already [05:07] have a domain as well. However, I will [05:10] just go with a temporary domain here. [05:11] I'll show you how to connect a domain [05:13] later. You can pick where you want to [05:15] host your site. I recommend to put it as [05:17] close as possible to where your actual [05:19] users are. And then in a few minutes [05:20] you'll be good to go. All right. So here [05:22] we go. You can see now I have a site [05:25] instance here. They have automatically [05:27] generated a name. And if you go there [05:29] right now, there's just going to be a [05:30] default page, but we want to deploy our [05:32] next JS app. So let's say I have this [05:34] Nex.js app here. It's a full stack [05:37] application. It can invoke a server [05:39] action and a route handler as well. And [05:41] I can navigate to different pages as [05:43] well. How can I now use this managed [05:45] hosting for Nex.js or React or other [05:48] Node.jsbased apps? Well, actually the [05:50] easiest is to go to websites and then [05:52] websites list again which will show you [05:54] your plans and also all the websites [05:56] that are part of that plan. So actually [05:59] as I purchased this plan, it [06:01] automatically creates this website for [06:03] us. But instead we're going to add a new [06:05] one which is going to be that NodeJS [06:07] front end web app. Right? So here under [06:09] under add website I have this NodeJS [06:12] option here. This is new. If we click on [06:14] that it will just be part of that plan. [06:16] Right? So now we have two options to [06:18] deploy. We can either connect a git [06:20] repository or upload files like a zip [06:22] file. I will go with the git repository [06:24] option in this case. So let me actually [06:26] create a new repository here on GitHub [06:28] for this app. I will make it private [06:30] actually. So it works with both public [06:31] as well as private repos and I will just [06:33] create here. Okay. And I will just push [06:35] all my next.js app code to GitHub. I [06:38] will just copy all of that. So here I [06:40] have my next JS app. I can actually [06:42] first get add everything and then I will [06:45] just paste this here and everything [06:47] should be pushed to GitHub. Right? So [06:49] now you can see all my app code is here [06:51] on GitHub and it's a private repo. Okay. [06:54] So now we're going to continue with [06:55] GitHub here. All right. Now when you do [06:57] it for the first time it's going to try [06:59] to install Hostinger a Hostinger app [07:01] here so it can see the repositories. So [07:04] I will go ahead and actually I like to [07:06] be a bit selective. So I will select [07:08] just that repository that we just [07:10] created and then I will install and [07:11] authorize it. All right. So once it's [07:13] set up it can see the repositories that [07:15] you have allowed it access to. In my [07:17] case there was only one this one. So we [07:19] will import that for the site here. All [07:22] right. And then it can automatically [07:23] detect what type of framework it is. [07:25] This could be also uh feed based [07:27] applications right and branch and note [07:30] version. Okay. So if you have some non [07:32] but if you just have a standard setup [07:34] you you most likely don't need to change [07:36] anything here. So in this case I will [07:38] just click on deploy. All right. So now [07:39] it's going to try to deploy my app. [07:41] Let's see if this actually works. All [07:42] right. Here we go. It has deployed my [07:44] nextjs app and will automatically create [07:46] this domain for us. Let's actually check [07:48] it out and see if that actually worked. [07:50] All right. Here is my next app hosted on [07:53] hostinger. Let's actually check it out. [07:55] I am getting a result here from a server [07:57] action as well as from my route handler. [07:59] right here. I can navigate and the image [08:01] component still works as well. But this [08:03] is not local host. This is on Hostinger [08:06] with their managed hosting option. So [08:08] this comes with a CDN out of the box. So [08:10] if I check some of these files that we [08:12] are loading here, I can see a header [08:15] here for the cache status and it is [08:17] marked as a hit. So there should be a [08:19] CDN in front of it now. And so we don't [08:21] have to set up basically anything. It's [08:23] all taken care of for us. You can see [08:24] there's https here as well. And then [08:27] here in the dashboard we can configure [08:29] settings. Right? So just to show you how [08:30] this is structured. So here under [08:32] websites I can see all the websites I'm [08:34] hosting with Hostinger. Right? So I have [08:37] a cloud startup package and when you buy [08:40] one it automatically sets up one right [08:41] that's that's what that's what we saw [08:43] here initially. However I'm not really [08:45] using that. So I could actually delete [08:46] it if I want. So then we created the [08:48] NodeJS front end web app uh by clicking [08:51] on this option here. Right. That's [08:52] that's this one. Right. So there are [08:54] some tools. So also analytics uh [08:56] databases file manager uh but let's [08:58] actually go to the dashboard again. So [09:00] here we have a complete overview of all [09:02] the settings and also really nice a list [09:04] of deployments. I can see for each [09:06] deployment uh the logs for example. So [09:08] it actually shows me the familiar nextjs [09:10] logging here as well. You can see [09:12] there's a build here being produced. We [09:14] can see how long it took. Right? So we [09:16] get all of this out of the box here. We [09:18] have settings here as well including [09:19] environment variables. Right? So if you [09:21] are relying on environment variables we [09:23] can add those right here. Now if you [09:24] push again to GitHub, it should [09:26] automatically pick up on that. If I just [09:29] uh change something here and I just [09:31] stage it and then and commit and then I [09:34] will push to GitHub again. So now I made [09:36] a change and I push to GitHub. Now if I [09:39] check out my deployment page here, you [09:41] can see there's automatically a new [09:43] deployment being done for me by [09:45] Hostinger as well. We get some page [09:48] speed insights here out of the box. We [09:50] can ask it to check on mobile as well. [09:53] All right, there we go. pretty good for [09:54] mobile. And then here we have some CDN [09:57] settings. So if you're still developing [09:58] it, you may actually want to turn on [10:00] development mode so you're not running [10:01] into issues with caching. You can also [10:03] flush the cache. Here we actually also [10:05] get a nice overview of AI crawler [10:08] activity. So you have a lot of these [10:09] bots these days crawling the internet [10:12] and you can actually decide if you want [10:13] to block them or not. We have analytics [10:15] here out of the box as well and we [10:17] actually also have a file. So if you do [10:19] need to dig into the actual files, that [10:21] is still possible here as well. And if [10:23] you do need to perhaps change something [10:25] here, that should still be possible. We [10:27] have backups here. And you can actually [10:29] use SSH access as well to get access. Of [10:33] course, it would be nice if we have an [10:35] actual domain, a custom domain as well. [10:37] So, let me show you how that works. So, [10:39] here under domain um or here actually [10:41] they call it out here. We can connect a [10:43] domain. Now, by default, it picks up [10:44] that I already have one here on [10:46] Hostinger. That is because here we have [10:48] websites and then here you have domains. [10:50] I already have a domain purchased here [10:52] on Hostinger but so in that case it will [10:54] automatically pick up on that. Okay, so [10:56] it should probably set like an A record [10:58] and so that's actually super fast and [11:00] actually when I go to the DNS records I [11:02] can see that there's been an alias [11:03] record and CNAME record created. Now [11:05] here in the list of websites I actually [11:07] have an option here for databases as [11:08] well. I think this could be really [11:10] powerful especially once they also add [11:13] more uh backend app support. But even in [11:15] nextg of course we already have a server [11:17] side. So so you may be able to use this [11:20] out of the box as well and you get all [11:21] of these other benefits from Hostinger [11:24] as well as they have email they have [11:25] email marketing. It's really powerful [11:27] platform. So I'm actually really happy [11:29] to see all of these options come [11:30] together in particular in the past year [11:32] or so. These two options I think have [11:34] really made it a much better experience [11:36] to host Next.js s outside the [11:39] traditional providers. So hopefully this [11:41] helps you out with hosting your DexJS [11:43] app. In any case, thank you for watching [11:45] and I hope to see you in the next one.  ## 📺 Video ![](https://www.youtube.com/watch?v=_ba-M2gDovU) --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=_ba-M2gDovU)* **[00:00]** Hey everyone, in this video we're going to talk about hosting a Nex.js app. And in particular, we're going to look at a new managed hosting option that you have these days, which is actually here in Hostinger. Yes, they're sponsoring the video, but I've had a great time using them, and I'm actually really excited to see this. Now, you can also deploy your NextJS website very easily to Hostinger. You can deploy by just connecting your GitHub repo or uploading files like a zip file. Super easy, and I'll show you that in the video as well. But I also quickly want to give you an overview of the different options that you have **[00:30]** right now. So let's quickly go through it and then I'll show you how to host a NexJS website on Hostinger using their latest front- end website hosting offering. Right? Not just for NexJS by the way, also for other NodeJS based applications like React Vit or other apps. All right. So first option that you have is to do a so-called static export. In that case, you're basically going to turn your entire app into a bunch of HTML, CSS, and JavaScript files. You can then host it from pretty much any place like an S3 bucket and then you can put a CDN in front. However, running a static export does **[01:02]** not support Nex.js features that require a server. So, you won't have like API routes or server actions, uh, server components. Basically, only the things that are available during build time will be used to create HTML, CSS, and JavaScript artifacts that you're then going to host somewhere. The other option I showed you before is actually to just try to install NodeJS on let's say a VPS because Nex.js is a NodeJS app. So you could rent a VPS from let's say hostinger, right? So you would run a build with mpm run build to create an optimized version and then you would **[01:33]** actually start it on the VPS with npm run start. Now I've actually showed you that in a previous video, but it's quite a lot of setup. So you have to do like PM2 to keep it to keep the process running. you may have to set up engine X or caddy or let's encrypt type of services yourself and generally speaking you need to do a lot of terminal commands right so this would only be interesting I think for people that are dev ops savvy the other option is to actually dockerize nextjs and then run it as a docker container in my view this is an easier option because you can **[02:04]** already codify a lot in a a docker file or docker compos file and so it's not really dependent on you running a bunch of random terminal commands it's more neatly organized ized in my view. Also, of course, once you've built a Docker image, you can run it anywhere. It feels more like a standardized process, but in that case, of course, you do need to know about Docker itself, the Docker basic. So, there's still some Docker scale involved. And now, a more recent option is to actually use Coolify or Doc. So, with Coolify and Doy, here are their websites. And they basically take **[02:35]** care of a lot of that DevOps type of work that you would have to do yourself. So instead of dealing with Docker ourselves, they do similar things for us under the hood and you get a really nice interface and actually overall it's a great deployment experience. And the nice thing is that providers like Hostinger, they actually provide a VPS template out of the box, right? So you can see Hostinger has a Coolify VPS template as well as a Doy VPS template. So there's just very little setup required to get going here. So I think in the past year or so, this has become the best deployment experience that you **[03:06]** could get self-hosting next.js jazz in my view. However, there is now also an even more recent option that I would categorize as managed hosting. Managed hosting you basically get everything out of the box. So you have uptime and patches and security and a CDN like DOS protection. Typically some analytics is built in. And Hostinger is now also entering this space and traditionally of course they have offered something like this for WordPress sites. So they've learned a lot about doing it for WordPress. But of course these days we're building a lot of websites with uh **[03:37]** Node.js right so Nex.js but also React and Vue and so on. So now if you go to the hosting or dashboard you will see here under websites websites list and they actually call it out here. So if you have NodeJS front- end apps you can now also host it deploying from GitHub or you can upload a zip file. So let's actually try this out. So I'm logged in here in the Hostinger dashboard. It's under websites and then websites list. Now, this works on certain plans. So, if we go to get new hosting plan, I've gone ahead with the cloud hosting option **[04:08]** here. So, as of recording, they're running an amazing sale here. So, I've gone ahead with the cloud hosting plan here. And then you can pick resources that you want. But you can see there are five NodeJS front-end web apps included. Now, this is new and they even are and they're even working on back-end support as well. So, I think this can be a real gamecher. And we also have some other benefits here. Now, if you're going to do this, there is actually an amazing sale as of recording. So, make sure to check out the link in the description. Make sure to use my coupon code, which is all uppercase bitegrad. If you apply **[04:40]** that, you will get an even better deal. So, make sure to use the link in the description and then coupon code all uppercase bytegrat. So, you can pick the configuration and options that you want. All right. And after payment, you will go through a setup wizard here. So you can actually also bring other existing sites into Hostinger but in this case we just want to create a site. Now this is focused a bit more on WordPress. Uh so we can basically skip this. I will just go with the empty here. And I already have a domain as well. However, I will just go with a temporary domain here. **[05:11]** I'll show you how to connect a domain later. You can pick where you want to host your site. I recommend to put it as close as possible to where your actual users are. And then in a few minutes you'll be good to go. All right. So here we go. You can see now I have a site instance here. They have automatically generated a name. And if you go there right now, there's just going to be a default page, but we want to deploy our next JS app. So let's say I have this Nex.js app here. It's a full stack application. It can invoke a server action and a route handler as well. And I can navigate to different pages as **[05:43]** well. How can I now use this managed hosting for Nex.js or React or other Node.jsbased apps? Well, actually the easiest is to go to websites and then websites list again which will show you your plans and also all the websites that are part of that plan. So actually as I purchased this plan, it automatically creates this website for us. But instead we're going to add a new one which is going to be that NodeJS front end web app. Right? So here under under add website I have this NodeJS option here. This is new. If we click on **[06:14]** that it will just be part of that plan. Right? So now we have two options to deploy. We can either connect a git repository or upload files like a zip file. I will go with the git repository option in this case. So let me actually create a new repository here on GitHub for this app. I will make it private actually. So it works with both public as well as private repos and I will just create here. Okay. And I will just push all my next.js app code to GitHub. I will just copy all of that. So here I have my next JS app. I can actually first get add everything and then I will **[06:45]** just paste this here and everything should be pushed to GitHub. Right? So now you can see all my app code is here on GitHub and it's a private repo. Okay. So now we're going to continue with GitHub here. All right. Now when you do it for the first time it's going to try to install Hostinger a Hostinger app here so it can see the repositories. So I will go ahead and actually I like to be a bit selective. So I will select just that repository that we just created and then I will install and authorize it. All right. So once it's set up it can see the repositories that **[07:15]** you have allowed it access to. In my case there was only one this one. So we will import that for the site here. All right. And then it can automatically detect what type of framework it is. This could be also uh feed based applications right and branch and note version. Okay. So if you have some non but if you just have a standard setup you you most likely don't need to change anything here. So in this case I will just click on deploy. All right. So now it's going to try to deploy my app. Let's see if this actually works. All right. Here we go. It has deployed my nextjs app and will automatically create **[07:46]** this domain for us. Let's actually check it out and see if that actually worked. All right. Here is my next app hosted on hostinger. Let's actually check it out. I am getting a result here from a server action as well as from my route handler. right here. I can navigate and the image component still works as well. But this is not local host. This is on Hostinger with their managed hosting option. So this comes with a CDN out of the box. So if I check some of these files that we are loading here, I can see a header here for the cache status and it is **[08:17]** marked as a hit. So there should be a CDN in front of it now. And so we don't have to set up basically anything. It's all taken care of for us. You can see there's https here as well. And then here in the dashboard we can configure settings. Right? So just to show you how this is structured. So here under websites I can see all the websites I'm hosting with Hostinger. Right? So I have a cloud startup package and when you buy one it automatically sets up one right that's that's what that's what we saw here initially. However I'm not really using that. So I could actually delete it if I want. So then we created the **[08:48]** NodeJS front end web app uh by clicking on this option here. Right. That's that's this one. Right. So there are some tools. So also analytics uh databases file manager uh but let's actually go to the dashboard again. So here we have a complete overview of all the settings and also really nice a list of deployments. I can see for each deployment uh the logs for example. So it actually shows me the familiar nextjs logging here as well. You can see there's a build here being produced. We can see how long it took. Right? So we get all of this out of the box here. We have settings here as well including **[09:19]** environment variables. Right? So if you are relying on environment variables we can add those right here. Now if you push again to GitHub, it should automatically pick up on that. If I just uh change something here and I just stage it and then and commit and then I will push to GitHub again. So now I made a change and I push to GitHub. Now if I check out my deployment page here, you can see there's automatically a new deployment being done for me by Hostinger as well. We get some page speed insights here out of the box. We **[09:50]** can ask it to check on mobile as well. All right, there we go. pretty good for mobile. And then here we have some CDN settings. So if you're still developing it, you may actually want to turn on development mode so you're not running into issues with caching. You can also flush the cache. Here we actually also get a nice overview of AI crawler activity. So you have a lot of these bots these days crawling the internet and you can actually decide if you want to block them or not. We have analytics here out of the box as well and we actually also have a file. So if you do need to dig into the actual files, that **[10:21]** is still possible here as well. And if you do need to perhaps change something here, that should still be possible. We have backups here. And you can actually use SSH access as well to get access. Of course, it would be nice if we have an actual domain, a custom domain as well. So, let me show you how that works. So, here under domain um or here actually they call it out here. We can connect a domain. Now, by default, it picks up that I already have one here on Hostinger. That is because here we have websites and then here you have domains. I already have a domain purchased here **[10:52]** on Hostinger but so in that case it will automatically pick up on that. Okay, so it should probably set like an A record and so that's actually super fast and actually when I go to the DNS records I can see that there's been an alias record and CNAME record created. Now here in the list of websites I actually have an option here for databases as well. I think this could be really powerful especially once they also add more uh backend app support. But even in nextg of course we already have a server side. So so you may be able to use this out of the box as well and you get all of these other benefits from Hostinger **[11:24]** as well as they have email they have email marketing. It's really powerful platform. So I'm actually really happy to see all of these options come together in particular in the past year or so. These two options I think have really made it a much better experience to host Next.js s outside the traditional providers. So hopefully this helps you out with hosting your DexJS app. In any case, thank you for watching and I hope to see you in the next one.