How to Deploy a Next.js App to Hostinger (Step-by-Step Guide)

Category: Web Development · Read time: 8 minutes · Keyword: deploy next.js to hostinger

Introduction

Hostinger is one of the most affordable hosting providers on the market (see my full Hostinger review), and its shared hosting plans are more than capable of running a Next.js application. In this tutorial, you'll learn how to deploy a Next.js app to Hostinger step by step, from building your app locally to seeing it live on the web.

Prerequisites

Before you start, make sure you have:

• A Hostinger account with an active hosting plan (Business or Cloud is recommended for Node.js support)
• Node.js installed locally (v18 or later)
• A Next.js project you want to deploy
• Basic comfort with the command line

Step 1: Build Your Next.js App Locally

Open your project folder and run:

npm run build

This creates a production-ready out folder (for static exports) or a server build, depending on your configuration. To force a static export, add this to next.config.js:

module.exports = {
  output: 'export',
};

Then run:

npm run build

The static files will be generated in the out/ directory.

Step 2: Upload Files to Hostinger

1. Log in to your Hostinger hPanel.
2. Go to Files → File Manager.
3. Navigate to public_html and delete the default index.html.
4. Upload the contents of your out/ folder into public_html.

For larger projects, use FTP/SFTP with FileZilla for a faster and more reliable upload.

Step 3: Configure .htaccess (for client-side routing)

If your app uses Next.js client-side routing (e.g., next/link), create a .htaccess file in public_html to redirect all requests to index.html:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]

Step 4: Test Your Deployment

Visit your domain (or temporary Hostinger URL) and confirm your app loads. Check:

• All pages render correctly
• Images and assets load (with correct paths)
• The redirect from the root / works

Step 5: Set Up a Custom Domain and SSL

1. In hPanel, go to Domains → Add Domain and point your domain to Hostinger's nameservers.
2. Enable the free SSL certificate under Security → SSL (Let's Encrypt) and force HTTPS.

Static Export vs Server-Rendered: Which Works on Hostinger?

If your app only needs static pages, the static export route is simpler and works on Hostinger's cheapest plans.

Deploying a Server-Rendered App (Advanced)

If your Next.js app uses API routes or server-side rendering, you need Node.js support. Hostinger's Business Cloud plans support Node.js apps. You'll upload the server build and configure the app through hPanel's Node.js section under Advanced settings.

Next Steps

Your Next.js app is now live on Hostinger. To improve performance, enable caching, compress images, and use a CDN. For a full production setup, consider upgrading to Hostinger Cloud hosting, which offers better performance for Node.js workloads.

FAQ

Can Hostinger run a Next.js app? Yes. Static Next.js exports run on any shared plan; server-rendered apps need a Node.js-compatible plan like Business Cloud.

Is Hostinger good for Next.js? Hostinger is a solid budget choice for static Next.js sites and small to medium server-rendered apps.