Where is entry point of nextjs application?

Question

When deploying nextjs app to c-panel hosting it asks for entry point of the application which default is app.js. In normal react application it's totally in control but when using nextjs it's not clear which js file is resposible to fire-up the application.

any idea on picking right js file as application entry point?

EDIT:

My hosting provider provided me with following code to setup an express app (which uses next's request handler) to handle the request:

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({ dev });
const handle = nextApp.getRequestHandler();

const port = 3454;

nextApp.prepare().then(() => {
  const app = express();

  app.get('*', (req, res) => {
    return handle(req, res);
  });

  app.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on localhost:${port}`);
  });
});

it works but it's slow because it compiles source files on demand to server requests.

Morgun

Next.js has many entry points, actually each Next.js page is an entry point. What it the usage of this c-panel – Pathogenic

say i wanna start from index page what should i do? – Morgun

What do you mean by "Start" what will it trigger? what is the usage of this file in react based apps? – Pathogenic

update the answer.check it out. – Morgun

So this entry point runs node on it, that means that you need to npm run build (which will run next build, prepare a production build) and then give your custom express server entry point server.js – Pathogenic

the code i added in edit is inside a file called index.js which i've selected as application startup file.so i think there most be such thing built into nextjs itself which should be responsible to listen for requests and handle responses using production ready files not source files. – Morgun

@Pathogenic exactly! – Morgun

Did it worked ? – Pathogenic

Let us continue this discussion in chat. – Morgun

Answer 1

You just need to export your nextjs application, it would work with

pages -- whether there are pages

• index.js
• example.js

or

app.js -- whether there is an app.js file

just add following scripts

 "scripts": {
    "build": "next build",
    "export": "next export",
    "serve": "serve out"
  },

You can first build your project and then export it. then you can serve it to check how would it deploy .

Incase of cPanel just extract the nextjs build folder probably named outto your folder like xyz.com.

There would be an index.html in the build that is your main file.

Ecdysis

downside with this approach is server side data fetch is not working and without server side data fetch refering to pages with url is not working. – Morgun

Answer 2

In React we had INDEX.HTML file in public folder but in NEXTJS we don’t have index.html file. Because Next.js has built-in pre-rendering. So in React index.html file typically used as the entry points for the application but in Next.js entry point defined in the PAGES directory.Next.js uses SSR by default which means that the HTML is generated dynamically on the server and send to the client as a complete page. This allows for faster initial load times and better search engine optimization(SEO). So In Nextjs App entry point could be any ts or js file inside of PAGES directory.

Irritable

Answer 3

I'm surprised to see that cpanel have a feature to start up nodejs application.

what you need to understand about app.js:

App.js contains a web server application (from the code above, your hosting provider suggested you to use ExpressJS - the most being used JS web server application) to serve web files to the browser (similar to Apache).

"it works but it's slow because it compiles source files on demand to server requests."

Do you have package.json file?

Do you know what command cpanel has ran to start your application?

Please check if your NextJS App run on development or production mode.

Alysa

thanks for your response. i have several questions in my head.1:How next js host my application in Development? 2:How is it supposed to do so in Production?3:How can i configure nextjs app to run on specific port? and in response to you'r questions 1-yes 2-pm2 start 3- what is the best way to test it? – Morgun

1. Usually developer run development mode in their local computer. 2. Prod mode means NextJS will make prod build files (its about efficiency code, minimize filesize, bundling, etc), so your app will run faster on prod environment. 3. You already had the answer, your app.js file ln.8 explains which port you want to use. NextJS app has specific command to build devel or prod mode, next for dev, next build for prod. Look at their documentation for more info. – Alysa

i think you totaly got me wrong ;D. by question number one i mean next js have to run a node application (one like i posted in question) to listen for http requests right?where is that hosting code located? – Morgun

you can host it in your server. it just how did you run your application. it is a mode/settings/config, whatever you called it. – Alysa

Answer 4

The best solution for me was using some process manager to bootstrap the application.So i used PM2 to start the application and keep it running.I issued following command in a c-panel terminal and now things work well :

NODE_ENV=production pm2 start server.js

given server.js has following code :

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const nextApp = next({ dev });
const handle = nextApp.getRequestHandler();

const port = 3454;

nextApp.prepare().then(() => {
  const app = express();

  app.get('*', (req, res) => {
    return handle(req, res);
  });

  app.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on localhost:${port}`);
  });
});

Morgun

Hi, I am having the same issue while deploying next js on shared hosting. If I'm not wrong this is A2 hosting platform. I am using the same one. Can you guide me how to set up the server and get the app running? – Bamberg

Answer 5

Another possible way is using instrumentation with the App Router.

To set up instrumentation, create instrumentation.ts|js file in the root directory of your project (or inside the src folder if using one). Then, export a register function in the file. This function will be called once when a new Next.js server instance is initiated.

For example, to use Next.js with OpenTelemetry and @vercel/otel:

import { registerOTel } from '@vercel/otel'

export function register() {
  registerOTel('next-app')
}

Anything inside the register function will be ran at server startup. This is an experimental feature so it requires additional steps to enable and is subject to change in the future:

This feature is experimental. To use it, you must explicitly opt in by defining experimental.instrumentationHook = true; in your next.config.js. The instrumentation file should be in the root of your project and not inside the app or pages directory. If you're using the src folder, then place the file inside src alongside pages and app. If you use the pageExtensions config option to add a suffix, you will also need to update the instrumentation filename to match.

Dermato

Blake, a link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – Snailpaced

@Rich and mozway, I have updated the post to add the context suggested. Thanks for the feedback – Dermato