Atharva Deosthale
Atharva Deosthale
  • 141
  • 338 614
Self-Host Next.js App on a VPS using Coolify! (or any containerized app)
Hello guys! In this video, we will look at how you can self-host a Next.js app (or basically any app) on your own VPS using Coolify. Coolify is an open source service that you can deploy on your VPS that makes self hosting easy. It gives you a panel where you can manage projects, start/stop projects, enter project container's terminal, see logs, etc. Coolify makes it even easier by auto generating SSL certificates for the domain you assign to your projects.
In this video, we will containerize a Next.js application using Docker and will deploy it on our VPS using Coolify, basically self hosting it.
If you liked the content and found it useful, make sure you support me by clicking the subscribe button and sharing this video with friends in need. 🤝
Links
Hetzner Cloud - www.hetzner.com/cloud/
Coolify Documentation - coolify.io/docs/installation
Any suggestions? Leave in the comments below!
TIMESTAMPS
0:00 - Introduction
1:10 - Creating a VPS on Hetzner
6:56 - Installing Coolify on the VPS
9:42 - Deploying a Next.js app using Coolify
15:26 - Setting DNS records for custom domain
19:33 - Conclusion
My links
E-mail - hey@atharva.codes
Blog - blog.atharva.codes
Latest Links - links.atharva.codes
Twitter - athudeosthale
LinkedIn - linkedin.com/in/atharvadeosthale
#programming #programmer #javascript #nodejs #npm #reactjs #react #typescript #nextjs #next #cloudflare #coolify #hetzner #vps #app
Переглядів: 769

Відео

Deploying Next.js Apps on Cloudflare! Cloudflare Workers Tutorial!
Переглядів 3 тис.Місяць тому
Hello guys! In this video, we will look at how you can host your Next.js apps on Cloudflare workers. Cloudflare recently announced that OpenNext (an initiative that wants Next.js to be deployable on all hosting platforms) now supports Node runtime support in Cloudflare workers. Previously, Next.js was supported but through Cloudflare Pages and using the Edge Runtime i.e. the Worker Runtime. Now...
Partial Pre-Rendering in Next.js! Learn how PPR Works & How to use it!
Переглядів 278Місяць тому
Hello guys! This video will look at partial pre-rendering (PPR) in Next.js. PPR is a way where you can render static parts of a dynamic route during build time and render the dynamic parts when the user requests them. This happens by the Next.js server serving a static shell rendered during build time and then rendering & streaming in the dynamic parts while the static parts are served. All tha...
Next.js Razorpay Payment Integration Made EASY
Переглядів 1,1 тис.Місяць тому
Hello guys! In this video, we will see how you can integrate Razorpay into your Next.js applications easily. Razorpay has no official SDKs for React so it's a little tricky to integrate Razorpay into Next.js but this video will look at how you can use it anyways using a tricky solution. As compared to something like Stripe, Razorpay falls way behind because of the massive gap of developer exper...
Using Chrome AI (Gemini Nano) Locally and Implement Using Vercel AI SDK
Переглядів 3232 місяці тому
Hello guys! In this video, we will explore the Gemini Nano model shipped inside Chrome dev versions. Gemini Nano is a mini model that runs locally, so it provides the advantages of performing smaller AI tasks on the end user's computer in turn saving cost and maintaining privacy. In this video, we will explore this model in Chrome Dev version and consume it using the Vercel AI SDK in React. If ...
Using Clerk Elements To Build Custom Auth Components
Переглядів 4763 місяці тому
Hello guys! In this video, we will explore Clerk elements. Clerk is an authentication provider that removes the hassle of implementing authentication in your application by providing everything auth-related in a very simple way. Traditionally, Clerk provides React components that help with authentication, but sometimes requirements are a bit more and you might need custom components with custom...
ANIMATED Form with STEPS using React and Framer Motion! Learn making Animated Forms!
Переглядів 5883 місяці тому
Hello guys! In this video, we will create a form container that is based on steps. If you want to create forms with steps or simply an onboarding flow with steps, this is a good tutorial to follow. In this video, we will NOT actually create a form but create the animations. You can plug your form into it and create your own customized workflow. Animation credits given below. If you liked the co...
Beautiful Landing Page Animated Components for React by MagicUI!
Переглядів 2,6 тис.4 місяці тому
Hello guys! In this video, we will look at MagicUI. It is a collection of animated React components specifically made for use in landing pages (but no one would complain if you use it elsewhere). If you liked the content and found it useful, make sure you support me by clicking the subscribe button and sharing this video with friends in need. 🤝 Links Magic UI - magicui.design/ Any suggestions? ...
A rant about roadmaps...
Переглядів 1155 місяців тому
In this video, we will not cover anything deeply technical but will just discuss coding roadmaps found on various social media platforms. I have a slightly different take about roadmaps. As much as structured learning helps quick learning, I think it might not be the best way of learning in the long term. Watch the video to know why! If you liked the content and found it useful, make sure you s...
Beautiful & Unique React Components using Aceternity UI!
Переглядів 6 тис.6 місяців тому
Hello guys! In this video, we will look at Aceternity UI. It is a collection of UI components built for React that are very beautiful. The creator seems to have spent a lot of time perfecting it! These components will give your website a good touch when it comes to "coolness" of your UI. It's pretty similar to shadcn/ui, where you don't need to "install" the components, but copy paste them into...
Are you LEAKING sensitive information in Next.js Pages Router?! (Read w/ Atharva Ep4)
Переглядів 1617 місяців тому
Hello guys! In this video, we will look at an article by Rexford Essilfie titled "You Are Leaking Your Next.js Application Features." In this article, Rexford mentions that you can modify the props for a page even after it undergoes server-side rendering using getServerSideProps in the pages router. Rexford has shown how a feature flag can be enabled on the client side by manually changing prop...
Preloading routes in Next.js! Using the Next.js Router to prefetch pages.
Переглядів 1,7 тис.7 місяців тому
Preloading routes in Next.js! Using the Next.js Router to prefetch pages.
Will this AI software engineer take your jobs? Devin AI software engineer!
Переглядів 1,1 тис.8 місяців тому
Will this AI software engineer take your jobs? Devin AI software engineer!
Creating paywalls on static websites?! (Read w/ Atharva Ep3)
Переглядів 2608 місяців тому
Creating paywalls on static websites?! (Read w/ Atharva Ep3)
BREAKING: PlanetScale SHUTS DOWN its FREE TIER!
Переглядів 7958 місяців тому
BREAKING: PlanetScale SHUTS DOWN its FREE TIER!
Create a TYPERACER clone using Node.js, Socket.io, Next.js, Shadcn-ui, Turborepo and more!
Переглядів 4,5 тис.8 місяців тому
Create a TYPERACER clone using Node.js, Socket.io, Next.js, Shadcn-ui, Turborepo and more!
Finally better hydration errors are coming in Next.js!
Переглядів 7458 місяців тому
Finally better hydration errors are coming in Next.js!
Bun Tutorial - a new JavaScript runtime!
Переглядів 2448 місяців тому
Bun Tutorial - a new JavaScript runtime!
BIG changes coming to React - Compiled React! (Read w/ Atharva ep2)
Переглядів 648 місяців тому
BIG changes coming to React - Compiled React! (Read w/ Atharva ep2)
Selling NFTs WITHOUT wallets using Cards! Crossmint Tutorial
Переглядів 5238 місяців тому
Selling NFTs WITHOUT wallets using Cards! Crossmint Tutorial
React Email 2.0 Tutorial - Create Beautiful Emails Using REACT!
Переглядів 1,8 тис.8 місяців тому
React Email 2.0 Tutorial - Create Beautiful Emails Using REACT!
Correct ways to create forms in React (Read w/ Atharva Ep1)
Переглядів 1248 місяців тому
Correct ways to create forms in React (Read w/ Atharva Ep1)
Easy form handling in React using Formik!
Переглядів 2759 місяців тому
Easy form handling in React using Formik!
TanStack Router is my favourite React Router -- TanStack Router Tutorial
Переглядів 7 тис.9 місяців тому
TanStack Router is my favourite React Router TanStack Router Tutorial
Next.js 14 App Router CRASH COURSE - Learn about Server Components and Next.js App Router
Переглядів 5219 місяців тому
Next.js 14 App Router CRASH COURSE - Learn about Server Components and Next.js App Router
Open Source Under Attack?
Переглядів 6 тис.9 місяців тому
Open Source Under Attack?
Accepting Payments using LemonSqueezy - Integrating LemonSqueezy into Next.js Tutorial
Переглядів 8 тис.9 місяців тому
Accepting Payments using LemonSqueezy - Integrating LemonSqueezy into Next.js Tutorial
Using Sentry with Next.js for automatic bug tracking
Переглядів 3,6 тис.9 місяців тому
Using Sentry with Next.js for automatic bug tracking
Drizzle ORM is my new favorite ORM...
Переглядів 1,6 тис.9 місяців тому
Drizzle ORM is my new favorite ORM...
Turborepo Tutorial - a monorepo by Vercel
Переглядів 4,4 тис.9 місяців тому
Turborepo Tutorial - a monorepo by Vercel

КОМЕНТАРІ

  • @benezer4937
    @benezer4937 8 годин тому

    Does cloudflare supports all NextJs features such as SSR

  • @smartway3883
    @smartway3883 3 дні тому

    What about the performance?

  • @mikhacavin
    @mikhacavin 4 дні тому

    all the nextjs feature works on this OpenNext and cloudflareworkers ?

  • @Knight004
    @Knight004 6 днів тому

    Title is for react why are you doing it for next then

  • @sacsand1
    @sacsand1 7 днів тому

    Keep up the good work!

  • @harshch
    @harshch 8 днів тому

    great video, any idea on how to use github here for deployment, the docs are too hard to go through? or maintain multiple environment through wrangler?

  • @anuragpandey4561
    @anuragpandey4561 8 днів тому

    Thank you, buddy, for this amazing video. You saved my lots of time. Your explanation is very simple and straightforward to understand.

  • @ArunKumar-gx8iv
    @ArunKumar-gx8iv 9 днів тому

    video on AI things using Nextjs , openAI, AI sdk

  • @Muyiwamighty
    @Muyiwamighty 13 днів тому

    Thank you for the video. I'm worried when we put these videos online and not talk about what could be missing. Open next does not support middleware yet so authentication won't work. Some individuals will watch this and run with it

  • @BruProg
    @BruProg 16 днів тому

    Bro in my case, the voices are keep changing female to male and male to female while I'm clicking on The button, How can I Fix it?? I tried lot things but it's not working??

  • @sumanthprabhu11
    @sumanthprabhu11 22 дні тому

    For consumers, it's Razorpay, but for beginner developers, it's Lavdapay

    • @AdityaG.
      @AdityaG. 16 днів тому

      bhai koi aur better options hai kya

  • @LokaSaisathvikreddy
    @LokaSaisathvikreddy 24 дні тому

    Hi @atharva , I like your explanation so much can you please make a detailed video on bootstrapping monorepo aplication using next js and prisma as Orm , and shared db among all the apps

  • @indigoinsaan4609
    @indigoinsaan4609 24 дні тому

    lol bhai github fod doge tumlog hahahaha, India is different. British ruled over us, what we do, spam Github

  • @rujalladhe1102
    @rujalladhe1102 25 днів тому

    why there is no option for upi payment ?

  • @rujalladhe1102
    @rujalladhe1102 25 днів тому

    I got my first freelance project so I was searching for pg integration and here u go thanks I have a doubt u used razorpayx and I wanna use the normal razorpay by giving the business credentials is the process same or diffrent , btw thanks 🙏

  • @shubhamchourasia5223
    @shubhamchourasia5223 26 днів тому

    Does using this UI library makes code heavier ??

  • @beyourahi
    @beyourahi 27 днів тому

    is Astro Server Islands the same as Next.js Partial Prerendering (PPR)? If not, can I achieve anything similar (PPR) with Astro?

  • @sameeravhad6266
    @sameeravhad6266 Місяць тому

    Thank you for a such nice video.😀

  • @douglastolley4050
    @douglastolley4050 Місяць тому

    Thank you very much for keeping it simple and to the point. Very helpful .

  • @sagarbhanushali9286
    @sagarbhanushali9286 Місяць тому

    Bro how did you got this many metrics in your account

  • @paulwong7224
    @paulwong7224 Місяць тому

    What do you mean by it's not free because cloudflare workers only supports workers that are only 1MB? I assume a worker handles each route. So at least one of your routes is larger than 1MB essentially? It sounded like you were saying all routes are handled by 1 worker or smth

  • @AbdusSamad-ij4cp
    @AbdusSamad-ij4cp Місяць тому

    Will server actions work?

  • @sanatpatil3303
    @sanatpatil3303 Місяць тому

    in the handler function , i am getting only the paymentId in the response object. What could be the issue?

  • @AakashKumar-vy4px
    @AakashKumar-vy4px Місяць тому

    Thanks for explaing it in a easy way. but my project why it asks for mobile no first ?

  • @abdulrehmanjaved-rt8jq
    @abdulrehmanjaved-rt8jq Місяць тому

    thanks

  • @ichigokuro3986
    @ichigokuro3986 Місяць тому

    As this server is being hosted in Helsinki, would there be some more latency for a user in India?

  • @ichigokuro3986
    @ichigokuro3986 Місяць тому

    Can you create a video wherein you develop a project that uses drizzle + all the components of the cloudflare stack?

  • @Raj-jz4fc
    @Raj-jz4fc Місяць тому

    Amazing!

  • @vampirekabir
    @vampirekabir Місяць тому

    Amazing,thanks

  • @LEGENDARYSTREAMER
    @LEGENDARYSTREAMER Місяць тому

    nice 🔥

  • @sovanchheang170
    @sovanchheang170 Місяць тому

    Yes, you really provided the values. thank you so much. Please help to show about the webhook so that it can automatically deploy after pushing to github.

  • @thiagofelizola
    @thiagofelizola Місяць тому

    I’m trying to use Nixpacks, but I’m getting a “Bad Gateway, Error Code 502.” It runs fine on Coolify with SSL. I’m using a VPS on Hetzner with Cloudflare (Full SSL).

  • @KarismaBegam-z8y
    @KarismaBegam-z8y Місяць тому

    Great but facing issue on components that it not showing optimization can you upload for windows

  • @Mrtoasted
    @Mrtoasted Місяць тому

    bro x razor also wanted gst no what should i doo

  • @Brocodefound1677
    @Brocodefound1677 Місяць тому

    Lets go 🔥🔥🔥

  • @Brocodefound1677
    @Brocodefound1677 Місяць тому

    Let's go 🔥🔥🔥

  • @francescociulla
    @francescociulla Місяць тому

    Interesting, thanks! I made a video on dockerizing a next js app and I generally appreciate the fact that NextJS allows this to be done

    • @AtharvaDeosthale
      @AtharvaDeosthale Місяць тому

      Yeah, usually self hosting using Docker we run Next.js in a Node runtime instead of an Edge runtime. So self hosting doesn't give any problems

    • @karan-oh5th
      @karan-oh5th Місяць тому

      @@AtharvaDeosthale im also looking for deploying nextjs application and i thought of self hosting but dont we loose on caching and other optimization which vercel do?

  • @guitarhero69
    @guitarhero69 Місяць тому

    Thanks for the video and explanation. i was really confused why nextjs couldnt be hosted on other hosting sites and this video cleared most of my doubts

  • @0xtz_
    @0xtz_ Місяць тому

    😮 this ll open crazy possibilities

  • @LEGENDARYSTREAMER
    @LEGENDARYSTREAMER Місяць тому

    😮

  • @amantiwari8316
    @amantiwari8316 Місяць тому

    Is this a one time contract means it will work only for the one crowdfunding project? what if we have multiple crowdfunding for different projects?

  • @AmadAzizKhan7
    @AmadAzizKhan7 Місяць тому

    wtf, my vs code got corrupted. 😐

  • @Zuno_goals
    @Zuno_goals Місяць тому

    I don't know how people found it easy its really complicated how will a person will do who don't know how to do coding i want to sell digital product but i am not getting how can i sell

    • @AtharvaDeosthale
      @AtharvaDeosthale Місяць тому

      Unfortunately, these videos are focused on developers who have at least intermediate level knowledge about code. If you don't know how to code, you might wanna explore no-code options.

  • @francescociulla
    @francescociulla Місяць тому

    I didn't try it out yet, thanks for the video!

  • @LEGENDARYSTREAMER
    @LEGENDARYSTREAMER Місяць тому

    🔥

  • @akshitgupta4749
    @akshitgupta4749 Місяць тому

    razorpayx is for just registere businesses, what about us individual indie hackers :)

  • @LEGENDARYSTREAMER
    @LEGENDARYSTREAMER Місяць тому

    🔥

  • @Falak09
    @Falak09 Місяць тому

    with stripe & lemon squeezy stopping their service I was looking for razorpay integration and here you are with the video 🎉

  • @mirjalol49
    @mirjalol49 Місяць тому

    how can i use in react app/ u used in nextjs

  • @akshitgupta4749
    @akshitgupta4749 Місяць тому

    Lemon squeezy has stopped operations in India , can u make a alternative video on razorpay or Paddle pleaseee.

    • @AtharvaDeosthale
      @AtharvaDeosthale Місяць тому

      Razorpay video coming very soon, stay tuned! (and maybe Paddle too later)