How to deploy and configure nextjs (using reactjs) application on cloudways or debian OS?

[mmehmoodahmed]

I am trying to deploy my nextjs(reactjs) application and make it runnable for cloudways server:

I tried following command in visual studio code terminal.

npx create-next-app
When above command is executed, I created following pages and components.

=========================================_app.js====================================
import "bootstrap/dist/css/bootstrap.min.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;

========================================index.js======================================
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.scss";
import Layout from "../components/layout/layout";
export default function Home(initialData) {
return (

<title>Test/title>

);
}

==========================================layout.js===================================
import Nvbr from "../navbar";
import React from "react";
export default function Layout(props) {
debugger;
return (
<>

{props.preContainer && props.preContainer}

{props.children}

</>
);
}

==============================================nvbr.js====================================
import React from "react";
import { Nav, Button, Navbar } from "react-bootstrap";
import Link from "next/link";
import Image from "next/image";

export default function Nvbr() {
return (
<>

                <div className="navbar-collapse collapse">
                    <div className="ml-auto">
                        <div className="ic_top_nav justify-content-end navbar-nav">
                            <Link href="/">
                                <a className="nav-link nav-link" data-rb-event-key="2">
                                    Home
                                </a>
                            </Link>
                            <Link href="/about">
                                <a className="nav-link nav-link" data-rb-event-key="3">
                                    About Us
                                </a>
                            </Link>                               
                            <Link href="/contact">
                                <a className="nav-link nav-link" data-rb-event-key="8">
                                    Contact
                                </a>
                            </Link>
                        </div>
                    </div>
                </div>                  
            </div>
        </Nav>
    </>
);

}

====================================package.json=====================================
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"export": "npm run build && next export -o _static"
},
"dependencies": {
"bootstrap": "^5.0.2",
"next": "11.0.1",
"node-sass": "^4.14.1",
"react": "17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "17.0.2",
"react-icons": "^4.2.0"
},
"devDependencies": {
"eslint": "7.29.0",
"eslint-config-next": "11.0.1"
}
}

=======================================next.config.js================================
module.exports = {
reactStrictMode: true,
};

const path = require("path");

module.exports = {
distDir: "build",
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
};
After that, I executed the following command

npm run build -prod
Following response came after the command execution,

[email protected] build E:\test\Git\test\nextjs\amica

next build

info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (5/5)
info - Finalizing page optimization

Page Size First Load JS
┌ ○ / 374 B 89.9 kB
├ /_app 0 B 63.6 kB
├ ○ /404 3.17 kB 66.8 kB
├ ○ /about 3.78 kB 95.9 kB
├ λ /api/data 0 B 63.6 kB
├ λ /api/hello 0 B 63.6 kB
└ ○ /contact 1.28 kB 93.4 kB

• First Load JS shared by all 63.6 kB
  ├ chunks/framework.923004.js 42 kB
  ├ chunks/main.a3a79a.js 20.2 kB
  ├ chunks/pages/_app.33e666.js 570 B
  ├ chunks/webpack.61095c.js 810 B
  └ css/e9c443dd09903fafb4e8.css 37 kB

λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
(ISR) incremental static regeneration (uses revalidate in getStaticProps)
This works fine when I create a pure reactjs application but nextjs display only a blank page.

Is there a way to set up a pattern for nextjs to deploy an application in cloudsways or some other servers?

I tried all know ways (by reading articles from https://nextjs.org/docs/deployment and google) but it couldn't be available in the browser.

[morganfeeney]

What's wrong with using Vercel?