Next.js

The AppSignal integration for Next.js 9.3.0+.

It is recommended to be used with @appsignal/javascript and @appsignal/react on the client-side for full-stack performance monitoring and error tracking.

At this time, it's only possible to use this integration with a custom server script. The integration does not work when using the Next CLI (e.g. next start).

If you plan to use this in a serverless environment, we recommend using just @appsignal/javascript and the @appsignal/react integration.

Installation

When using a custom server script, Next.js is instrumented automatically by the AppSignal for Node.js package.

Usage with HTTP server

Create a server.js in your project root and add the following:

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");
 
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const port = parseInt(process.env.PORT, 10) || 3000;
 
app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true);
 
    // You might want to handle other routes here too, see
    // https://nextjs.org/docs/advanced-features/custom-server
    handle(req, res, parsedUrl);
  }).listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

Make sure to update your package.json to use the custom server and require the AppSignal configuration file:

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node --require ./appsignal.cjs server.js"
}

Usage with Express

You must add express as a dependency to your project. Then, create a server.js in your project root and add the following:

const { expressErrorHandler } = require("@appsignal/nodejs");
 
const express = require("express");
const { parse } = require("url");
const next = require("next");
 
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const port = parseInt(process.env.PORT, 10) || 3000;
 
app.prepare().then(() => {
  express()
    .use(handle)
    .use(expressErrorHandler())
    .listen(port, () => {
      console.log(`> Ready on http://localhost:${port}`);
    });
});

Make sure to update your package.json to use the custom server and require the AppSignal configuration file:

"scripts": {
  "dev": "node server.js",
  "build": "next build",
  "start": "NODE_ENV=production node --require ./appsignal.cjs server.js"
}

Features

The Next.js integration will send AppSignal a trace for each request.

If the custom server uses Express, any errors raised when handling the request will be reported to AppSignal.

Need more help?

Contact us and speak directly with the engineers working on AppSignal. They will help you get set up, tweak your code and make sure you get the most out of using AppSignal.

Contact us

Start a trial - 30 days free

AppSignal is a great way to monitor your Ruby, Elixir & Node.js applications. Works great with Rails, Phoenix, Express and other frameworks, with support for background jobs too. Let's improve your apps together.

Start a trial