In this article I'm going to show you a step by step process on how to host your nextjs website on cpanel using namcheap shared hosting package.
If you're familiar with next js, you might think it can only be hosted on vercel but what if you already have your own hosting package and don't want to spend extra cost acquiring a new hosting package with vercel.
Well, in this article I will show you how to develop your next.js website or app from the scratch and host it on Cpanel.
Pros of hosting next.js website on cpanel
One of the benefits of hosting your next.js app on cpanel is, it saves you cost.
You make your cpanel subscription once and don't have to bother about paying per team member or monthly(unless you want to)
It retains almost all awesome next.js capabilities
Cons of hosting next.js website on cpanel
No serverless functions
No Automatic Static Optimization.
Summary
It is now left for you to decide which way is best for you and your business.
For a step by step tutorial on how to host next.js website on cpanel using namecheap shared hosting, please watch the youtube video below. There are a lot of things you will learn.
I run this youtube channel known as TechFortified where I publish amazing tech content. Please don't forget to like, comment, subscribe and turn on notification for more awesome videos like this. Thank you.
Top comments (25)
Hi thanks for this example. All seems good except that get a failure calling back into my API. Site starts and page loads but it I get internal server error when calling back to API.
If I run the site from the terminal on the host site, all works but if I start within cpanel, I get no luck.
Is there anything special that needs to be done to get next API working?
What's the error code? Try the process again using a subdomain and it will work
no error code. I am trying to use domain provided by the provider. I can try mapping my domain / subdomain. I did not think that would make a difference?
Thank you for response btw!:)
Welcome. Try it on a subdomain and it will work then you can find a way around to make it work on your main domain. In the video above I used my main domain but it worked but most people's own work on a subdomain.
Don't forget to inspect your network tab and check the error that's returning from your server. There must be an error maybe due to hosting server configuration.
Did you solve issue with nextjs API? I have same problem
Hi,
I don't have option "setup node.js app", at my new version cpanel. so what you suggest in that case?
it means that you are not using shared hosting package. Upgrade your hosting package to Business shared hosting package specifically on namecheap
Ok, but before that, I have found one more article, its similar to my situation, but I am not sure whether it is work with a dynamic website or not like the server-side applications which I have.
medium.com/@rahul.chauhan.rsc7/how...
Can you take moment to look at it and confirm it for me?
Using the method suggested above has some caveats, it means you will lose all the benefits of server side rendering.
Basically it won't work with a dynamic or serve side app.
Follow this next js docs to read more about the unsupported features you will face without a server.
Having said that, it's worth trying when your site is just static site
nextjs.org/docs/advanced-features/...
Thanks for the tutorial. I went through all these steps several times. But the problem I have is that when I call the domain, it comes up from the public_html , not from the application root. And because of this it gives error 503. How can I do something so that after entering the domain, my information is called from the of the application root ?
If you want to host your app in your main domain, drop the files under public_html directory and follow the steps
Hoping you still read this to reply.
I want to use a single Cpanel account to house multiple nextJs apps across multiple domains (cheaper than buying more than one hosting package and isn't against TOS dw I asked for my usecase). Anyway the issue I face with this advise is there is a single public_html folder created by default. What advice would you give for me to have
abc.comandxyz.comtwo node apps on a single cPanel??If your domains are within a particular hosting package, one will be set as the main domain and others can be added
as add-on domains .
Now each domain should be configured to point to different directories (but this will depend on your hosting provider).
If each domain is pointing to it's own directory, you can host your app in those directories. If you're using namecheap, your app must not be hosted in the public_html directory.
You can host your apps in different directories other than public_html directory.
Another solution could be to create an FTP account for each domain owned by you where you host your app in the public_html directory depending on the domain. Hope this helps
Oh wow, quick reply thank you!
I am currently using Krystal.uk for hosting, I believe I can edit the app directories in the domain settings. I have my secondary domain being transfered now so I will check when it goes live but could take a few days they said.
Following the hosting instructions I uploaded a parent folder for app1 in the /home/user level. Once I pointed the setup node app to that folder, it automatically poplated public_html with the app files. Does this mean all future add-on domains will also populate the public_html directory?
If you specified the directory under setup node app, ideally your app files are supposed to be populated in that specified directory and not the public_html directory as it's just a directory like others.
Edit your domains or add-on domain directories to point to other directories other than public_html.
If your public_html gets populated even when another directory is specified, contact your web hosting provider support for help.
Hi Peter
Can you please let me know how I can add custom node version on cpanel?
what will be my app root
becasue it's not allowing public_html or / and the field is required
Hi sir. Thanks for your tutorial.
I've a question now. My nextjs project is using 16 node version. How can I add node versions on Cpanel. Cpanel provides 12 node version as default.
Please let me know it.
Thanks
Best regards
hello,
thanks for this post. i want to use ISR inside my namcheap shared hosting. can i do that?
I have error 500
Api isn't working
How can I solve this
Did anyone solved this error before
I'm stuck o np install ... it's taking forever
Does this work with NextJs app that has ssr and middleware (NextJs serverless functions)?
Can’t seem to find a way around it.
Error 503. Service Unavailable is the error I keep getting even after trying the process over and over