DEV Community

Cover image for Deploying Your NextJS Project on Hostinger
oandersonmagalhaes
oandersonmagalhaes

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

Requirements

  • 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:

https://gitlab.com/[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. ftp.1234.com
  • [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

cache:
  paths:
    - node_modules/

before_script:
  - apk add lftp
  - npm install

upload:
  environment: prd
  stage: deploy
  script:
    - 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"

  only:
    - master
    - main
Enter fullscreen mode Exit fullscreen mode

More info about Alpine image

Conclusion

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

LinkedIn: https://www.linkedin.com/in/andersonbmagalhaes/

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

Benefits

  • 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.

Advertising

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

References

Original post

NextJS - BasePath

NextJS - Static Export

CyberArk - POLP

Gitlab - Variables

Top comments (0)