How to Deploy a Next.js Application on a VPS Server - Next.js + Headless WordPress [ part 15]

In this video, I will show you how to deploy a Next.js application to a VPS server. We will go through the process of committing all the code edits to a git repository, then pushing all those things to a remote repo on Github, setting up a server on a cloud provider, then SSHing and cloning the repository to the server and installing the application. You will learn how to setup and Nginx reverse proxy that stands in front of the Node.js server handling the requests for our site. Finally, we'll also setup a custom domain name with an SSL certificate.
Git Repo: github.com/iabhinavr/nextjs-blog
Alternative Git Repo: github.com/iabhinavr/CoolNoma...
Website: www.coralnodes.com
---------------------------------------
Server providers:
Linode: www.coralnodes.com/go/linode/
DigitalOcean: www.coralnodes.com/go/digital...
-------------------------------------------------------------
Disclaimer:
This video is based on my personal experiences and knowledge. There is no guarantee that the information shared is 100% accurate.
Disclosure:
This video and its description may contain affiliate links, which can earn us commission if someone purchases products using those links.

[@jacobrebec4951]

Thank you so much. Exactly what I needed with wonderful guidance

[@AndrewErwin73]

Very concise. Thanks for this.

[@borzoomoazami8201]

Amazing video, thank you very much.

[@jeffhatescarz]

Thank you! Very helpful.

[@CKNMEDIA]

Great video. Thank you ❤

[@DanielPenaloza-fj8yo]

Thanks a lot, it was really useful ¿How would you deploy Next Js apps in subdomains of that domain and how would you add a database for storing the data?

[@alirezasoheilmahmoudi680]

very helpful.
thanks

[@asliddin9364]

thank you very useful video

[@Opptnty]

Great information!

[@spare4337]

Thanks you so much

[@parmetra]

Hello! Thanks for this video! I have a question: if my web-application is using access to Database, I also need to install MariaDB on the server? And how should I configure the database on the server, because before I used only on localhost?

[@iftekherhossen7714]

Thank you

[@dreamecho100]

Thanks

[@borisbarzotto5785]

Thx!! 🤩

[@TheAsher817]

Thank you for this video. I have seen certain developers in the nginx sites-available default file set up an alias for the location /_next/static directive to point to the .next/static/ folder. You have not used that step in this video. Would u mind kindly explaining why not? if this step is a must or not. Thank you very much again for this video.

[@CodingReflections]

As far as I understand, there is no need to set up an alias like that. Because the Next.js site is already running and serving the site from its own server. We just need to place an Nginx reverse proxy in front of it, proxy passing requests to the Next.js site.

[@TheAsher817]

@@CodingReflections Thank you very much to getting back to me. Appreciate a lot. Yes, what you say makes sense. One of the reason (more of a guess) that comes to my mind for doing that is If the Nginx server is more superior on performance when it comes to delivering static assets compared to the NextJS server. This is purely a guess and I could be wrong :). Thank you again for this content, we don't get many videos like this.

[@OwlthTech]

In this WP seems hosted on different server with subdomain, so why there doesn't have any CORS error?

[@CodingReflections]

From what I have learnt, CORS is a mechanism implemented on browsers to prevent web pages from making requests to another domain. But in this case, the next.js frontend (browser) is making requests to the next.js server itself (same domain), which in turn make requests to the WP backend (subdomain). So the browser is not directly making any requests to the wp subdomain, hence no errors. CORS is not applicable for server-to-server communication.

[@Nicklessable]

Thanks a million for your valuable efforts! I'm following your tutorials and all is well...
However, when I create the build and run it, all is fine except when you press load more to load more posts:
- New posts are loaded under blog archive page.
- Clicking on newly loaded posts to load the single post page, I get 404. as if these posts pages were not rendered..
Can you try the same and let us know?
Thanks in advance.

[@CodingReflections]

I hope part 18 of this series solves this issue. It's about on-demand revalidation, which updates content on the frontend as you make changes from the WordPress backend.

[@Nicklessable]

@@CodingReflectionsthank you so much. Looking forward to reach part 18 and try it out. Will keep you posted.

[@frogfox9577]

If I am working on a local environment, can I skip this section?

[@2n1u0]

perfect mate. you're the best

[@borisbarzotto5785]

Hi, if my app has enviroment variables how i set it in my vps?

[@egretfx]

exactly what i wanted to ask

[@alessandroercolani3524]

@@egretfx did you find an answer?

[@egretfx]

yes i created a .env file in the VPS, copied from my local machine and pasted there...worked 100%@@alessandroercolani3524

[@roko98332r]

could you deploy these next js into vercel. pointing hostinger domains while having wp-backend on hostinger