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).

Note

Reference: Next.js Custom Server Configuration

Installing the agent​

Execute the following command to install the agent.

BASH
npm install whatap

Agent file structure​

  • package.json: Document file for sample applications and dependency management.

  • *whatap.conf This configuration file stores monitoring agent settings, access key, and WhaTap data collection server IP.

  • security.conf (or paramkey.txt): It stores the security key that is entered for viewing SQL variables and HTTP queries, or using the Thread stop function.

  • server.js (example of file name): Server configuration file for Next.js app instances.

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​

  • If you run the application that is ready for monitoring, see [the following] (install-check) for the checklist.

  • The agent can be set to collect various data from APM. For more information about the agent configuration, see the following.