Hosting a react app (next.js) in Godaddy Shared hosting can be a confusing job. Specially if you are using server side rendering. Godaddy shared hosting (in most cases) does not allow node apps.
But we can take advantage of the Static generation feature. Using Static generation we can generate a static html site. You can follow the following steps:
- Go to package.json
Under Scripts object add a new key value pair like this
"genetate": "next build && next export"
then, navigate to next.config.js
Add the following code:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
output: 'export',
distDir: 'dist',
trailingSlash: true,
assetPrefix: '.',
}
module.exports = nextConfig;
then from your terminal run the command:
npm run generate
Important thing to note here is the trailingSlash: true,
In godaddy if you navigate the site using the say navigation bar it works but if you reload a page other than the home page
for example /about/
it looks for the about directory which does not exist. So with trailingSlash: true, this command your pages will go on their respective directory.