# Next.js and dynamic routes

**URL:** <https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302>\
**Category:** APM\
**Tags:** nodejs\
**Created:** [December 15, 2022, 11:58am UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302 "2022-12-15T11:58:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aarhus](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@Aarhus](https://discuss.elastic.co/u/Aarhus)\
**Post date:** [December 15, 2022, 11:58am UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/1 "2022-12-15T11:58:08Z")

</div>

I have setup our Next.js app with Elastic amp and it works fine out of the box.  
The only thing is that I have a catch all route which handles all dynamic routes and send the url back to the CMS to retrieve the correct content.

I Kibana its reportet as GET /[...pages]

Is it possible to modify this to send the current URL?

So if I hit localhost/about-us it sends this as GET /about-us

---

<div class="post-metadata">

**Author:** ![trentm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/trentm/32/77647_2.png) [@trentm](https://discuss.elastic.co/u/trentm)\
**Post date:** [December 15, 2022, 7:07pm UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/2 "2022-12-15T19:07:34Z")

</div>

Hi @Aarhus. Thanks for the question.

> [@Aarhus](#):
>
> Is it possible to modify this to send the current URL?
> 
> So if I hit localhost/about-us it sends this as GET /about-us

Currently, no this isn't possible. However, this _should_ work with the [`usePathAsTransactionName`](https://www.elastic.co/guide/en/apm/agent/nodejs/current/configuration.html#use-path-as-transaction-name) config option. It doesn't currently because the APM agent's Next.js instrumentation isn't honouring that config var. I'll open an issue to fix that.

Once that is fixed in the APM agent there is a concern with using `usePathAsTransactionName: true` -- high cardinality transaction names. When that config var is turned on, a request to `GET /about-us` will result in an APM trace transaction name of `GET /about-us`. This is what you want, I think. However this will happen for _any_ request path: `GET /foo`, `GET /whatever`, ...  
If there are thousands of different request paths, the result can be performance issues in the APM UI. If your situation won't result in thousands of different request paths, then it will be fine for you.

Does your Next.js app have _other_ dynamic routes? Setting `usePathAsTransactionName: true` would be global to all routes in the Next.js app.

---

<div class="post-metadata">

**Author:** ![trentm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/trentm/32/77647_2.png) [@trentm](https://discuss.elastic.co/u/trentm)\
**Post date:** [December 15, 2022, 7:14pm UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/3 "2022-12-15T19:14:35Z")

</div>

> [@trentm](#):
>
> I'll open an issue to fix that.

I've opened [Next.js instrumentation doesn't honour `usePathAsTransactionName` config var · Issue #3072 · elastic/apm-agent-nodejs · GitHub](https://github.com/elastic/apm-agent-nodejs/issues/3072)

---

<div class="post-metadata">

**Author:** ![trentm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/trentm/32/77647_2.png) [@trentm](https://discuss.elastic.co/u/trentm)\
**Post date:** [December 15, 2022, 7:26pm UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/4 "2022-12-15T19:26:26Z")

</div>

@Aarhus I have an initial branch ([PR is here](https://github.com/elastic/apm-agent-nodejs/pull/3073) with a potential fix for this. Would you be willing to try it out? To try it, you would need to install the Node.js APM agent from the branch. I believe this should work:

```auto
npm install 'elastic-apm-node@elastic/apm-agent-nodejs#trentm/nextjs-usePathAsTransactionName'

```

---

<div class="post-metadata">

**Author:** ![Aarhus](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@Aarhus](https://discuss.elastic.co/u/Aarhus)\
**Post date:** [December 16, 2022, 7:03am UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/5 "2022-12-16T07:03:31Z")

</div>

Hi @trentm

I tried using the usePathAsTransactionName in the old NPM package but would stil get GET /[...pages] but I could se the get requests for our favicon and fonts would get logged.

I then tried a workaround by importing elastic-apm-node into [...pages].tsx and then in our getServerSideProps function calling

`apm.setTransactionName('GET ' + context.resolvedUrl);`

This works, but am a little unsure if it causes any side effects?

I will try out your PR and report back 🙂

---

<div class="post-metadata">

**Author:** ![Aarhus](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@Aarhus](https://discuss.elastic.co/u/Aarhus)\
**Post date:** [December 16, 2022, 7:19am UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/6 "2022-12-16T07:19:42Z")

</div>

Hi @trentm

I installed your PR and it kind of works.  
I does log the Paths but only when I do a hard browser reload.

When I navigate to another page it doesent log the URL, I think this has someting to do with state between dynamic routes.

I do however reset state between dynamic routes by using the router.asPath as key in \_app.tsx,  
because we had problems with the state not being reset and new calls to the API not being called.

As for now I will use the old workaround:

```auto
export const getServerSideProps: GetServerSideProps<PageProps> = async (context) => {  
  // Add the current URL path as the transaction name for Elastic.
  apm.setTransactionName('GET ' + context.resolvedUrl);

```

---

<div class="post-metadata">

**Author:** ![trentm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/trentm/32/77647_2.png) [@trentm](https://discuss.elastic.co/u/trentm)\
**Post date:** [December 16, 2022, 5:56pm UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/7 "2022-12-16T17:56:32Z")

</div>

> [@Aarhus](#):
>
> I then tried a workaround by importing elastic-apm-node into [...pages].tsx and then in our getServerSideProps function calling
> 
> `apm.setTransactionName('GET ' + context.resolvedUrl);`

Are you able to show me how/where in your Next.js files you do the import of `apm`? I'm no Next.js expert and I've had difficulty avoiding Next.js attempting to bundle the full elastic-apm-node module to send and use on the _client_. (See the first limitation mentioned at [Get started with Next.js | APM Node.js Agent Reference [master] | Elastic](https://www.elastic.co/guide/en/apm/agent/nodejs/master/nextjs.html#nextjs-limitations))

I think using `apm.setTransactionName(...)` is a _good_ answer -- mainly because it is specific to one route and not a global setting -- but it was those difficulties with only importing elastic-apm-node for the server-side that kept me from suggesting it.

> [@Aarhus](#):
>
> I installed your PR and it kind of works.  
> I does log the Paths but only when I do a hard browser reload.
> 
> When I navigate to another page it doesent log the URL...

Do you get a transaction named something like `Next.js _data/route /[...page]`? That is the transaction name given to _data_ requests that Next.js client-side makes for a page (e.g. `/_next/data/Tsav2cXHuGQxDzP2J-vmr/a-page.json`) -- rather than a full server-side page fetch.

My PR did not update the code that sets that transaction name to use the `usePathAsTransactionName` config var.

---

<div class="post-metadata">

**Author:** ![Aarhus](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@Aarhus](https://discuss.elastic.co/u/Aarhus)\
**Post date:** [December 19, 2022, 7:47am UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/8 "2022-12-19T07:47:55Z")

</div>

Hi @trentm

Sure, I import the elastic-apm-node in my catch-all-route [...pages]

```auto
import { GetServerSideProps } from 'next';
import ErrorPage from 'next/error';
import { ErrorBoundary } from 'react-error-boundary';
import apm from 'elastic-apm-node';
import { withTransaction } from '@elastic/apm-rum-react';
...

const Page = ({ status, data }: PageProps) => {
  if (status === 'error') {
    return <ErrorPage statusCode={500} />;
  }
  ...
};

export const getServerSideProps: GetServerSideProps<PageProps> = async (context) => {

  // Add the current URL path as the transaction name for Elastic.
  apm.setTransactionName('GET ' + context.resolvedUrl);
  ...
};

//export default Page;
export default withTransaction('Page', 'component')(Page);

```

I just ran a bundle analyze and can se that elastic-apm-node is not getting bundled in the clientside bundles, only the apm-rum-react is bundled clientside:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/d/7/d74e1e658e45addc843548ede7a3985f0dc1ee31.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 9, 2023, 3:48am UTC](https://discuss.elastic.co/t/next-js-and-dynamic-routes/321302/9 "2023-01-09T03:48:37Z")

</div>

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.