Naar hoofdinhoud gaan
De AppSignal-integratie voor Next.js. Om zowel back-end traces als front-end fouten te rapporteren, wordt aanbevolen om @appsignal/nodejs te gebruiken in combinatie met @appsignal/javascript en @appsignal/react aan de clientzijde, voor full-stack performance monitoring en foutopsporing.
Vanwege technische beperkingen van de AppSignal-agent is het niet mogelijk om @appsignal/nodejs te gebruiken in Vercel’s serverless omgeving. We bevelen aan om in plaats daarvan onze Vercel log drain en onze front-end JavaScript- en React-pakketten te gebruiken.

​
Installatie

Volg eerst de @appsignal/nodejs-installatie-instructies. Pas vervolgens het next.config.js-configuratiebestand van uw Next-project aan om instrumentatie-hooks in te schakelen: Als u Next 15 gebruikt: 
const nextConfig = {
  serverExternalPackages: ["@appsignal/nodejs"],
};
Als u Next 13 of 14 gebruikt: 
const nextConfig = {
  // Add the `experimental` object if not present
  experimental: {
    // Add the following lines inside the object
    instrumentationHook: true,
    serverComponentsExternalPackages: ["@appsignal/nodejs"],
  },
};
Voeg vervolgens het volgende bestand toe aan de root van uw Next.js-project als instrumentation.js:
Als uw project een src-directory heeft, dan moet het instrumentation.js-bestand in die directory worden geplaatst.Als uw project de Next.js App Router gebruikt, moet het bestand niet in de app-map worden geplaatst, maar in de map die de app-map bevat.
export function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    require("./appsignal.cjs");
  }
}
Het instrumentatie-hookbestand verwijst naar het appsignal.cjs-bestand dat is aangemaakt bij het configureren van AppSignal. Zorg ervoor dat het appsignal.cjs-bestand zich in dezelfde map bevindt als het instrumentation.js-bestand, of pas het pad van de require in het instrumentation.js-bestand dienovereenkomstig aan. Pas tot slot uw appsignal.cjs-configuratiebestand aan om de HTTP-instrumentatie uit te schakelen, die anders overbodige traces zou genereren: 
const { Appsignal } = require("@appsignal/nodejs");

new Appsignal({
  // Add the `disableDefaultInstrumentations` list if not present
  disableDefaultInstrumentations: [
    // Add the following line inside the list
    "@opentelemetry/instrumentation-http",
  ],
});

​
TypeScript-ondersteuning

Bij het gebruik van TypeScript verwijzen de backtraces die door server-side Next.js-fouten worden uitgezonden naar de gecompileerde JavaScript-bestanden. Volg deze stappen om Next.js zo te configureren dat de backtraces naar de originele TypeScript-code verwijzen. Configureer Next.js eerst om source maps uit te zenden door de volgende regels toe te voegen aan het next.config.js-bestand van uw applicatie: 
const nextConfig = {
  // Add the `webpack` function if not present
  webpack: (config, { isServer }) => {
    // Add the following lines inside the function
    if (isServer) {
      config.devtool = "eval-source-map";
    }

    return config;
  },
};
Pas vervolgens in uw package.json aan hoe uw Next.js-applicatie wordt gestart bij het uitvoeren van npm run start, door de NODE_OPTIONS-omgevingsvariabele te gebruiken om de --enable-source-maps-vlag aan de Node.js-runtime door te geven: 
{
  "scripts": {
    // Modify the `start` script as follows
    "start": "NODE_OPTIONS=--enable-source-maps next start"
  }
}
Tot slot, als u het front-end integratiepakket @appsignal/javascript gebruikt om fouten aan de clientzijde bij te houden, voeg dan de productionBrowserSourceMaps-optie toe aan het next.config.js-bestand zodat Next.js publieke source maps uitzendt: 
const nextConfig = {
  // Add the `productionBrowserSourceMaps` flag
  productionBrowserSourceMaps: true,
};

​
Functionaliteiten

De Next.js-integratie stuurt AppSignal een performance sample voor elk verzoek. Binnen elke sample toont de event-tijdlijn events, samen met hun duur, overeenkomend met:
  • Het renderen van het document
  • Het uitvoeren van de getServerSideProps-functie (alleen pages router)
  • Het uitvoeren van de route-handler
  • Het uitvoeren van HTTP-verzoeken met Next.js’ server-side fetch (alleen app router)

​
Standalone-output

Er worden mogelijk geen gegevens gerapporteerd wanneer Next.js is geconfigureerd met output: "standalone" in next.config.js. Wanneer Next.js de app-grootte optimaliseert om alleen op te nemen wat door de app wordt gebruikt, worden de AppSignal-extensie en -agent weggelaten, die de gegevens naar onze servers rapporteren. Bij gebruik van de Next.js “with-docker”-starter, specifiek de Dockerfile, is een wijziging nodig om ervoor te zorgen dat de AppSignal-extensie en -agent worden opgenomen in de productie-Docker-image. Voeg de volgende regel toe aan uw Dockerfile, na vergelijkbare COPY-regels nabij het einde van het bestand: 
# Dockerfile
COPY --from=builder --chown=nextjs:nodejs /app/node_modules/@appsignal/nodejs ./node_modules/@appsignal/nodejs
De wijziging in Git zal er ongeveer als volgt uitzien, maar uw Dockerfile kan iets anders zijn: 
--- Dockerfile
+++ Dockerfile
@@ -48,6 +48,7 @@ COPY --from=builder /app/public ./public
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/node_modules/@appsignal/nodejs ./node_modules/@appsignal/nodejs

 USER nextjs