DEV Community

Cover image for Deploying Your NextJS Project on Hostinger

Posted on

Deploying Your NextJS Project on Hostinger

Sometimes, you might need to deploy your front-end application or a proof of concept (POC), such as marketing pages, without spending too much. In such cases, using a personal host can be a practical solution. In this article, we will automate the deployment of our front-end into a Hostinger subdomain or subpage.

Steps to Follow:

Steps to follow


  • Hostinger hosting service
  • Git
  • Gitlab/Github or another tool capable of creating pipelines and adding secrets

A simple application (optional)

You can either create a new front-end application for testing or use an existing one. For this article, let’s build a NextJS application.

npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

This is our default application:

NextJS default app

Configuring the "next.config.mjs"

To output the static files into a folder, modify the β€œnext.config.mjs” by adding output, basePath, and assetPrefix:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  basePath: process.env.BASE_PATH ? process.env.BASE_PATH : "",
  assetPrefix: process.env.URL ? process.env.URL : undefined,

export default nextConfig;
Enter fullscreen mode Exit fullscreen mode

After configuring, executing npx next build will properly create the "out" directory with all links and CSS files.

Out directory image

For images managed by next/image, update the image paths as necessary.

Git diff Image component

Hostinger steps

Create a subdomain or a specific folder in your Hostinger account.

Subdomain on Hostinger

Consider setting up a new FTP account limited to that directory to adhere to the Principle of Least Privilege (POLP).

FTP user config

Gitlab steps

Although other deployment solutions are available, this tutorial focuses on using Gitlab. First, ensure your project is on Gitlab and add your Hostinger FTP client secrets in the CI/CD settings:[GROUP_OR_NAMESPACE]/[PROJECT]/-/settings/ci_cd

Gitlab variables

  • [project]_base_path: replace the links base_path, but we need to update manually in images
  • [project]_ftp_host: e.g.
  • [project]_ftp_password
  • [project]_ftp_user
  • [project]_url: it's your resource url (https://…), can be the your own site address or a cdn address.

Define the environment as prd, but you can create various environment variables as needed.

Replace [project] for your project name:

image: node:21.4.0-alpine

    - node_modules/

  - apk add lftp
  - npm install

  environment: prd
  stage: deploy
    - echo "Preparing FTP... $[project]_ftp_host $[project]_ftp_user $[project]_ftp_password"
    - URL=$[project]_url BASE_PATH=$[project]_base_path npx next build
    - lftp -c "set verify-certificate/$[project]_ftp_host no; set ftp:ssl-allow on; open -u $[project]_ftp_user,$[project]_ftp_password ftp://$[project]_ftp_host; mirror -Rev out/ ./ --ignore-time --parallel=10"

    - master
    - main
Enter fullscreen mode Exit fullscreen mode

More info about Alpine image


If configured correctly, a new job will run for every update in the main branch, showing progress in each job log.

Job list

Job logs

Published page

I trust this information proves valuable to you. Thank you for investing your time in reading this. :D

Thank you image


Additional possibilities

  • Separate your public files to a Content Delivery Network (CDN)
  • Create multiple environments (e.g., Development, Testing, Production).
  • Use GitHub Actions for alternative CI/CD approaches


  • Efficient delivery of changes to production.
  • Ability to test code in pipelines before deployment.
  • Low-cost solution suitable for public projects like marketing initiatives or POCs.


This approach is not recommended for projects requiring strict compliance or control over the deployment tools (Hostinger, Gitlab/Github, secrets/environment variables).


Original post

NextJS - BasePath

NextJS - Static Export

CyberArk - POLP

Gitlab - Variables

Top comments (0)