@appsignal/nextjs

The AppSignal integration for Next.js 9.3.0+ and Node.js. It is recommended to be used with @appsignal/javascript and @appsignal/react on the client side.

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 just using @appsignal/javascript and the @appsignal/react integration.

Installation

First, sign up for an AppSignal account and add both the @appsignal/nodejs and @appsignal/nextjs packages to your package.json. Then, run yarn install/npm install.

You can also add these packages to your package.json on the command line:

yarn add @appsignal/nodejs @appsignal/nextjs
npm install --save @appsignal/nodejs @appsignal/nextjs

You can then import and use the package in your app.

The @appsignal/nextjs package exports the getRequestHandler() function, which is designed to be used in the place of the app.getRequestHandler() method provided by the next module.

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

const { Appsignal } = require("@appsignal/nodejs")

const appsignal = new Appsignal({
  active: true,
  name: "<YOUR APPLICATION NAME>",
  apiKey: "<YOUR API KEY>"
})

const { parse } = require("url")
const next = require("next")
const { getRequestHandler } = require("@appsignal/nextjs")

const PORT = parseInt(process.env.PORT, 10) || 3000;

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = getRequestHandler(appsignal, app)

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)
    const { pathname, query } = parsedUrl

    if (pathname === "/a") {
      app.render(req, res, "/b", query)
    } else if (pathname === "/b") {
      app.render(req, res, "/a", query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(PORT, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${PORT}`)
  })
})

The integration will then track any queries served by to Next.js, and send metrics and statistics to AppSignal. This also works great with Express and the @appsignal/express integration:

const { Appsignal } = require("@appsignal/nodejs")

const appsignal = new Appsignal({
  active: true,
  name: "<YOUR APPLICATION NAME>",
  apiKey: "<YOUR API KEY>"
})

const next = require("next")

const { expressErrorHandler, expressMiddleware } = require("@appsignal/express")

const next = require("next")
const express = require("express")
const { getRequestHandler } = require("@appsignal/nextjs")

const PORT = parseInt(process.env.PORT, 10) || 3000;

const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = getRequestHandler(appsignal, app)

app.prepare().then(() => {
  express()
    .use(expressMiddleware(appsignal))
    .use(getRequestHandler(appsignal, app))
    .use(expressErrorHandler(appsignal))
    .listen(PORT, err => {
      if (err) {
        throw err
      }

      console.log(`> Ready on http://localhost:${PORT}`)
    })
})

Contributing

Thinking of contributing to this repo? Awesome! 🚀

Please follow our Contributing guide in our documentation and follow our Code of Conduct.

Also, we would be very happy to send you Stroopwafles. Have look at everyone we send a package to so far on our Stroopwafles page.

Support

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.