CODEWITHSUNDEEP
reactjsnext.js
tekf
tekf

Reputation: 104

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

I am trying to deploy my Next.js (React.js) 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 (
        <div>
            <Head>
                <title>Test/title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <Layout></Layout>
        </div>
    );
}

layout.js

import Nvbr from "../navbar";
import React from "react";
export default function Layout(props) {
    debugger;
    return (
        <>
            <Nvbr />
            <main role="main">
                {props.preContainer && props.preContainer}
                <div className="album py-5 bg-light">
                    <div>{props.children}</div>
                </div>
            </main>               
        </>
    );
}

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 (
        <>
            <Nav className="py-3 px-4 navbar navbar-expand-lg navbar-light bg-dark">
                <div className="container-fluid">                    
                    <div className="navbar-toggler">                        
                        <button aria-controls="responsive-navbar-nav" type="button" aria-label="Toggle navigation" className="navbar-toggler collapsed">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                    </div>

                    <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 React.js application but Next.js display only a blank page.

Is there a way to set up a pattern for Next.js 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.

Upvotes: 0

Views: 2694

Answers (1)

Aung Myint Thein
Aung Myint Thein

Reputation: 400

Nextjs has 2 steps. build and start.

npm run build

will give you the build folder. However, to run the application, you would need to run

npm run start

However, it will start the application at port 3000. To test if the application is running, run curl localhost:3000 in the machine with another terminal and you should see the return.

Then you need to follow the article to install pm2 in the cloudway server and start the service using pm2.

This guide should also give some hints if you still have errors.

Upvotes: 1

Related Questions