This feature requires{" "}
{v.name} version {v.version}
{getBoundText(v.bound)}.
)}
;
};
De AppSignal-integratie voor [Next.js](https://nextjs.org/).
Om zowel back-end traces als front-end fouten te rapporteren, wordt aanbevolen om `@appsignal/nodejs` te gebruiken in combinatie met [`@appsignal/javascript`](/front-end) en [`@appsignal/react`](/front-end/integrations/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](/vercel/logs) en onze
[front-end JavaScript](/front-end)- en
[React](/front-end/integrations/react)-pakketten te gebruiken.
## Installatie
Volg eerst de [`@appsignal/nodejs`-installatie-instructies](/nodejs/3.x/installation).
Pas vervolgens het `next.config.js`-configuratiebestand van uw Next-project aan om instrumentatie-hooks in te schakelen:
Als u Next 15 gebruikt:
```javascript JavaScript theme={null}
const nextConfig = {
serverExternalPackages: ["@appsignal/nodejs"],
};
```
Als u Next 13 of 14 gebruikt:
```javascript JavaScript theme={null}
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](https://nextjs.org/docs/app/building-your-application/routing/defining-routes) gebruikt, moet het bestand niet in de `app`-map worden geplaatst, maar in de map die de `app`-map bevat.
```javascript JavaScript theme={null}
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](/nodejs/3.x/configuration#minimal-required-configuration). 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:
```javascript JavaScript theme={null}
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:
```javascript JavaScript theme={null}
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:
```json JSON theme={null}
{
"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:
```javascript JavaScript theme={null}
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](https://github.com/vercel/next.js/tree/canary/examples/with-docker), specifiek de [Dockerfile](https://github.com/vercel/next.js/blob/canary/examples/with-docker/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:
```docker Dockerfile theme={null}
# 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:
```diff Diff theme={null}
--- 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
```