Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Next.js-specific bundling information #27444

Merged
merged 2 commits into from
Feb 7, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@

**Note**: Some applications can have 100% of modules bundled, however native modules still need to remain external to the bundle.

#### Esbuild support
#### Bundling with Esbuild

Check warning on line 133 in content/en/tracing/trace_collection/automatic_instrumentation/dd_libraries/nodejs.md

View workflow job for this annotation

GitHub Actions / vale

Datadog.headings

'Bundling with Esbuild' should use sentence-style capitalization.

This library provides experimental esbuild support in the form of an esbuild plugin, and requires at least Node.js v16.17 or v18.7. To use the plugin, make sure you have `dd-trace@3+` installed, and then require the `dd-trace/esbuild` module when building your bundle.

Expand All @@ -148,7 +148,7 @@
platform: 'node', // allows built-in modules to be required
target: ['node16'],
external: [
// esbuild cannot bundle native modules
// required if you use native metrics
'@datadog/native-metrics',

// required if you use profiling
Expand All @@ -170,6 +170,48 @@
})
```

#### Bundling with Next.js

Check warning on line 173 in content/en/tracing/trace_collection/automatic_instrumentation/dd_libraries/nodejs.md

View workflow job for this annotation

GitHub Actions / vale

Datadog.headings

'Bundling with Next.js' should use sentence-style capitalization.

If you are using Next.js or another framework relying on webpack to bundle your application, add a declaration

Check notice on line 175 in content/en/tracing/trace_collection/automatic_instrumentation/dd_libraries/nodejs.md

View workflow job for this annotation

GitHub Actions / vale

Datadog.sentencelength

Suggestion: Try to keep your sentence length to 25 words or fewer.
similar to the one for webpack inside your `next.config.js` configuration file:

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
// ... non-relevant parts omitted, substitute your own config ...

// this custom webpack config is required for Datadog tracing to work
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
const externals = [
// required if you use native metrics
'@datadog/native-metrics',

// required if you use profiling
'@datadog/pprof',

// required if you use Datadog security features
'@datadog/native-appsec',
'@datadog/native-iast-taint-tracking',
'@datadog/native-iast-rewriter',

// required if you encounter graphql errors during the build step
'graphql/language/visitor',
'graphql/language/printer',
'graphql/utilities'
];
config.externals.push(...externals);
return config;
},
};

export default nextConfig;
```

#### General bundling remarks

**Note**: Due to the usage of native modules in the tracer, which are compiled C++ code, (usually ending with a `.node` file extension), you need to add entries to your `external` list. Currently native modules used in the Node.js tracer live inside of `@datadog` prefixed packages. This will also require that you ship a `node_modules/` directory alongside your bundled application. You don't need to ship your entire `node_modules/` directory as it would contain many superfluous packages that should be contained in your bundle.

To generate a smaller `node_modules/` directory with only the required native modules, (and their dependencies) you can first determine the versions of packages that you need, then create a temporary directory to install them into, and copy the resulting `node_modules/` directory from it. For example:
Expand All @@ -188,6 +230,8 @@
cp -R ./node_modules path/to/bundle
```

**Note**: In case of Next.js the `path/to/bundle` is usually the `.next/standalone` directory of your app.

At this stage you should be able to deploy your bundle, (which is your application code and most of your dependencies), with the `node_modules/` directory, which contains the native modules and their dependencies.

## Configuration
Expand Down
Loading