CODEWITHSUNDEEP
next.js
Mohamed Aarab
Mohamed Aarab

Reputation: 946

how to deploy nextjs project in hostinger

does anyone know how to deploy a nextjs project in hostinger shared host , i'm stuck here.

the hosting provider has hpanel instead of cpanel, and you don't have any option to install nodejs.

i'm disappointed, i have just subscribed for 1 year. now i don't know what to do.

i have tried to put the built folder .next in the public_html folder and change the permission to 755 but nothing , the page displays

403 Forbidden "Access to this resource on the server is denied!"

any help is appreciated.

Upvotes: 6

Views: 28883

Answers (4)

Ashiq Firoz
Ashiq Firoz

Reputation: 121

I was able to host my nextjs app in hostinger cpanel.

Add these files to NextJS project root folder create a server.js file

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
 
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = process.env.port || 3000
// when using middleware `hostname` and `port` must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
 
app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl
 
      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  })
    .once('error', (err) => {
      console.error(err)
      process.exit(1)
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`)
    })
})

Then update or create next.config.js, (rename next.config.mjs to next.config.js)

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

module.exports = nextConfig

Then Inside package.json file add this

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NODE_ENV=production node server.js",
    "lint": "next lint"
  },

Now run npm run build

Then make a zip of out folder created

  • Upload the zip to public_html folder inside cpanel ftp and extract the content(folders and index.html file) into the public_html folder.

  • delete default.php

  • rename index.html to default.php

After following these steps and linking ip and nameserver ip's to domain. I was able to host my nextjs app in hostinger.

Hope this post is useful.

Upvotes: 0

Anmol Narang
Anmol Narang

Reputation: 11

Hostinger supports the hosting of nextjs application but it will require the VPS(Virtual Private Server). Since, it is a node-server and supported by vps only. Although, if you wish to deploy application with just text you can do in shared web hosting, but no images optimization, API will work in shared web hosting.

Upvotes: 1

IBRAHIM ALI MUSAH
IBRAHIM ALI MUSAH

Reputation: 969

Next.js cannot be deployed to Hostinger shared hosting, this can only be done using VPS. You can ask for a refund for the shared hosting you've already bought if it hasn't exceeded the 30days money-back guarantee. Then buy the VPS hosting plan and set things up on your own.

Upvotes: 10

user18203664
user18203664

Reputation:

If you are deploying only static files exported from your NextJS build to your public_html directory, just make sure to have the following permissions set:

  1. public_html - 755 ( ownership USER:USER )
  2. Folders inside 755
  3. Files inside 644

If you still experience a 403 error, I would recommend reaching their support for further help. If they lack support, then I would recommend looking for a managed hosting provider that can help you in such situations.

Upvotes: 1

Related Questions