How to deploy a nextjs application on cpanel?
Solution 1
- Your
.next
doesn't have index.html file. - Seems like you have server side (mostly using nodejs), but unfortunately you couldn't run that server side from cpanel.
- As I know, you should use
next export
instead ofnext build
if you tend to have frontend side only.
But the most important thing is number 1, make sure you have index.html
inside your .next
folder.
Solution 2
I uploaded out
(which gets generated doing npm run build && npm run export
) folder to public_html
and created .htaccess
file like
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-L
RewriteRule . /index.html [L]
</IfModule>
It worked for me 😁
Problem: When I refresh the page on some different route let's say
/about
, it brings theindex.js
page contents but URL doesn't change to/
Solution 3
Deploy it as a NodeJS application.
Solution 4
I could host the application with one of the above answers, but when I refresh the page the application will crash or go to initial route.
This is how I solved this problem (solution taken from next.js official site).
- Take production build of next.js application using
npm run build
- create a startup file
app.js
in the root folder and copy the following code
const {
createServer
} = require("http");
const {
parse
} = require("url");
const next = require("next");
const port = process.env.PORT || 3000;
// Create the Express-Next App
const app = next({
dev:false
});
const handle = app.getRequestHandler();
app
.prepare()
.then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true);
const {
pathname,
query
} = parsedUrl;
handle(req, res, parsedUrl);
console.log("pathname", pathname);
}).listen(port, (err) => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
})
.catch((ex) => {
console.error(ex.stack);
process.exit(1);
});
-
Create a Node.js Application on cPanel and add Application Startup File name
-
And start the application. You are done !
For further information check out the official docs of Next.js Custom Server
Related videos on Youtube
Afsanefda
Updated on June 04, 2022Comments
-
Afsanefda almost 2 years
I followed these steps to deploy my nextjs on cPanel.
go to package.json and add this line:
"homepage": "http://afsanefadaei.ir"
run
next build
to have.next
folder as my build foldergo to
cpanel >> file manager >> public_html
folder and upload the contetn of.next
folder to this directory-
add or edit this file:
.htaccess
to:
but when I go to the website I face this:
Do you know what is wrong with this?
-
Afsanefda about 4 yearsYes I've tried a simple react app and it worked! I guess I have to serverless my nextjs app
-
Afsanefda almost 4 yearsThe problem I had with this solution was my style. They did not apply correctly and I couldn't find out why! but it is a presented solution from nextjs community.
-
c0dezer019 over 3 yearsWhat info should that index.html contain? And also should the contents of the 'out' folder be copied to public_html or copy the directory as well?
-
Darryl RN over 3 yearsit is an html file containing your web html,css,js. you can trial and error on your second question, up to you if you want to include the directory or not, it will reflect on the browser url address too.
-
mikasa over 2 yearsHi! I am following these exact same steps but its not letting me upload sub-directories! Can u tell me if you faced this problem?