Hostwizly

How To Host Next JS Website On Hostinger

Last Updated 17 June 2024 by Jarvis Silva

Want to host your website made using next js on hostinger then you are at the right place in this tutorial I will show you step by step on how to host a next js website on hostinger.

Next js is a popular javascript framework based on react, website made using next js are fast compared to normal websites made using wordpress.

Hostinger is one of the most affordable web hosting solution, highly secured and easy to use, So hosting your next js website on hostinger is a good choice.

Important Note

  • Only Next.js websites which are static and are exported using the static method can be hosted on Hostinger's shared hosting.
  • If the Next.js website is dynamic and does not support static export you can host it by Purchasing a VPS hosting plan from Hostinger. Note: Hosting on a VPS is not covered in this tutorial.

In this tutorial I will only show how to host next js website on shared hosting of Hostinger so without wasting time let's start.

1. Create a static export of next js website

So first we need to export our next js website into a static html website so inorder to do this go to your next.config.js file and add output:"export", It should be look like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  // more
};

module.exports = nextConfig;

This is currently how we create a static export in next js 13 this way might change in the future but you can always go to the Next js docs to see how it is done.

Now we are ready to export our website so to do that open a terminal at your next js website folder and run the below command:

npm run build

After running the command it will start building your web pages and after finishing it will create a folder named out in your directory in that it will have your static html pages, It would look like this:

Static out folder in next js

Now we just need to put the files from the out folder on hostinger so let's do that.

2. Setting up hostinger and domain

In this step we will see how to setup hostinger hosting and domain if you already have hostinger account and a domain then you can skip this and go to the next step.

1. Sign up for a Hostinger Account

For hosting this static next js website you can start with a shared hosting, Hostinger has single, premium and business shared hosting, I would suggest you go with the premium as it is price worthy it gets you a free domain, a email and can host multiple websites.

Complete the registration process by providing the necessary details and selecting a payment method.

Get Hostinger Shared Hosting at 77% OFF + 2 Months FREE

2. Configure Domain Settings

Once you have successfully created your Hostinger account, log in to the control panel and under the Domains section, click on "Add Domain." Here, you have two options: register a new domain or use an existing one.

Register a New Domain

With hostinger premium shared hosting you can register a free domain and you don't have do any domain configuration if you register domain with hostinger.

Or use an Existing Domain

If you already have a domain then you can use that domain to host your website and add your domain to hostinger now you will need to update the domain's nameservers to point to Hostinger.

To update your nameservers follow this guide: Setup domain in hostinger or contact hostinger support for help if you are facing problems with domain configuration.

3. Upload exported next js files to hostinger

Now for the final step we have to upload the exported next js files from the out folder which we did in the first step to the hostinger server.

Now go to your hostinger panel and click on the File manager button.

Hostinger panel

It will open up your file manager where you can upload your website files on the hostinger server, your file manager when opened will look something like this:

Hostinger file manager

Now open the public_html folder and drag and drop all the files from the next js out folder which we exported earlier inside the public_html folder, below is an example:

Hostinger out folder contents in file manager

Make sure you only put the files from the out folder that was statically exported in next js, congratulations now you can visit your website at your domain.

So this was the complete tutorial on hosting next js website on the hostinger shared hosting I hope you were able to host your website successfully and do share this guide with someone who might need it.

If you face any issues while hosting or any domain related issues you can contact us we will assure to help you, Thank you for reading have a nice day.

Frequently Asked Questions

Can I host Next.js in Hostinger?

Yes, you can host a Next.js application on Hostinger. Hostinger provides the necessary infrastructure to support Node.js applications, which is the runtime environment Next.js runs on.

Can we host Node.js on Hostinger?

Yes, you can host a Node.js application on Hostinger via their VPS Plans.

Can we deploy Next.js on shared hosting?

Yes, you can deploy a Next.js application on shared hosting by using the next export command to generate static files and then uploading them to your hosting provider. However, for dynamic features or server-side rendering, consider using VPS or cloud hosting.

About the author

I am Jarvis Silva, a tech enthusiast. I have 5 years of experience in website hosting and development, Now sharing all my knowledge related to web hosting and other various tech on the internet through Hostwizly.

Related Articles

Host Django Website On Hostinger VPS

How To Add SPF Record In Hostinger

How To Increase WP Memory Limit In Hostinger

How To Download Files From Hostinger File Manager

How To Find FTP Password In Hostinger

How To Add Signature In Hostinger Webmail

How To Connect Namecheap Domain To Hostinger

How To Add DKIM Record In Hostinger Email

How To Add DMARC Record In Hostinger

How To Transfer Domain From Wix To Hostinger

How To Switch From Hostinger Website Builder To Wordpress

How To Find Ip Address Of Website In Hostinger

How To Purchase Domain And Hosting From Hostinger

How To Install Wordpress In Hostinger

How To Extract Zip File In Hostinger

How To Install Wordpress Theme In Hostinger

How To Backup Emails From Hostinger

How To Connect Hostinger Domain To Shopify

How To Setup Hostinger Email On Outlook

How To Setup Hostinger Email On Gmail

How To Add TXT Record In Hostinger

How To Add CNAME Record In Hostinger

How To Set A Cron Job In Hostinger

How To Install Wordpress On Subdomain In Hostinger

Deploy Angular App On Hostinger Shared Hosting

How To Change PHP Version In Hostinger

How To Install Moodle On Hostinger

How To Get FREE Hosting On Hostinger

Difference Between Hostinger.com And Hostinger.in

Host Laravel Project On Hostinger Shared Hosting

Host Node JS On Hostinger

Host React App On Hostinger Shared Hosting

Is hostinger good for buying domain?

How to add hostinger domain to netlify

How to transfer domain from hostinger to godaddy

How to uninstall wordpress in hostinger

How to connect Godaddy domain to Hostinger

How to host PHP website on Hostinger

How to change server location in Hostinger

How to create subdomain in hostinger