Skip to main content

Installation of the Next.js environment

Server-side rendering (SSR) frameworks such as Next.js require the Custom Server settings for application monitoring. They require an approach different from typical Node.js frameworks (e.g. Express.js, Nest.js).

Installing the agent

Execute the following command to install the agent.

BASH
npm install whatap

Agent file structure

For the agent file configuration, see the following.

Creating the server.js code

Create the server.js file for Next.js application instances. This file must be located in the root path of the project.

Initializing the WhaTap agent

server.js
var WhatapAgent = require('whatap').NodeAgent;

Loading Next.js and other required modules

server.js
const {createServer} = require('http')
const {parse} = require('url')
const next = require('next')

Configuring the application

server.js
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000

Creating an instance of the Next.js application

In the following code, dev indicates whether it is in development mode. Set the host name and port number in hostname and port.

server.js
const app = next({dev, hostname, port})
const handle = app.getRequestHandler()

app.prepare().then(() => {
createServer(async (req, res) => {
try {
const parsedUrl = parse(req.url, true)
const {pathname, query} = parsedUrl

/**
* Render the page.
*/
await handle(req, res, parsedUrl);
} catch (err) {
console.error('Error occurred handling', req.url, err)
res.statusCode = 500
res.end('internal server error')
}
})
.once('error', (err) => {
console.error(err)
process.exit(1)
})
.listen(port, () => {
console.log(`> Ready on http://${hostname}:${port}`)
})
})

Viewing the full code

See the completed full code.

server.js
var WhatapAgent = require('whatap').NodeAgent;

const {createServer} = require('http')
const {parse} = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000

const app = next({dev, hostname, port})
const handle = app.getRequestHandler()

app.prepare().then(() => {
createServer(async (req, res) => {
try {
const parsedUrl = parse(req.url, true)
const {pathname, query} = parsedUrl

/**
* Render the page.
*/
await handle(req, res, parsedUrl);
} catch (err) {
console.error('Error occurred handling', req.url, err)
res.statusCode = 500
res.end('internal server error')
}
})
.once('error', (err) => {
console.error(err)
process.exit(1)
})
.listen(port, () => {
console.log(`> Ready on http://${hostname}:${port}`)
})
})

Running the application

SH
node server.js

Next steps

  • Checking the installation

    If you have applied all for project creation and agent installation, check the checklist in [the following] (install-check).

  • Agent setting

    It provides various features for monitoring by applying some options to the agent configuration file (whatap.conf). It includes basic configuration, configuration for server connection and data transfer, how to manage the configuration files for multiple application servers, and transaction tracing, and more. For more information, see the following.

  • Starting the monitoring

    After all settings are made, restart the application server. The agent starts collecting data. First, check whether the monitoring data has been collected in Application Dashboard. For more information about Application Dashboard, see the following.