Installing

Install the useflytrap package to your Next.js project.

npm install useflytrap

Add Flytrap code transform

Add the Flytrap code transform to your Next.js configuration, so that all your code gets properly processed for replaying.

const { FlytrapTransformPlugin } = require('useflytrap/transform')

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,

  webpack(config) {
    config.plugins = config.plugins ?? []
    // only add in production
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(FlytrapTransformPlugin.webpack())
    }
    return config
  },
}
module.exports = config

Create your Flytrap configuration

Next up, create your Flytrap configuration file. The configuration file defines what project you are capturing & replaying for, and the replay & capture behavior.

You can get the values for your Flytrap configuration file by creating a project as seen below.

Create project with credentials
import { defineFlytrapConfig } from 'useflytrap'

export default defineFlytrapConfig({
	projectId: 'your-project-id',
	captureId: 'capture id for replaying',
	publicApiKey: 'your public api key',
	secretApiKey: 'your secret api key',
	privateKey: 'your private key',
	mode: 'capture'
})
In Next.js, your Flytrap config might get cached, so you need to delete the .next folder after changing the Flytrap config for the changes to be applied.

Add Next.js specific packageIgnores

Next.js’s internal code transform expects things such as font imports to be in the top level, without any kind of modifications. Due to this, we ignore the next/font package in our Flytrap configuration file:

import { defineFlytrapConfig } from 'useflytrap'

export default defineFlytrapConfig({
  // ... the rest of your config
  packageIgnores: ['next/font'] // 👈 ignores transformation of next/font package
})

Catch your first bug

Now your app will be enabled with Flytrap. You can test out the setup by throwing an error in your development environment.

Example

Next.JS usage example

See how you can use Flytrap with NextJS

Learn more

Explore how you can use Flytrap to ship more confidently, solve bugs faster and increase the productivity of your QA & developer teams.