There are a few ways to do this. Here is what I would recommend:

Dynamic routes

You can use dynamic routes a feature built in to both the Next.js pages and app router. Then you can nest these in a similar structure to this [slug-1]/[slug-2].

Setup your project like so:

|app
   |components
      |Steps.tsx //this is your page you want to display
   |[slug-1]
      page.tsx
      |[slug-2]
         page.tsx

Then setup each page as shown:

import Steps from "../components/Steps";

export default function Page({
  params,
}: {
  "slug-1": string;
  "slug-2": string;
}) {
  return <Steps />;
}

See the code sandbox for more info.

This follows the exact plan that you had in mind with what you were doing with Angular.

Query strings

Only in the app router

Personally I think this a more ideal approach it is simpler and produces more dry code. Instead of using a dynamic route for wafrToken use a query string. This will follow this url structure: https://some_domain/step1?wafrToken=56e6a6d7bacd4db14eadbd7bf4eeee550ec13853c64c946f490aa574.

Setup your project like so:

|app
   |components
      |Steps.tsx //this is your page you want to display
   |[slug-1]
     page.tsx

Each page as shown:

import Steps from "../components/Steps";

export default function Page({ params }: { "slug-1": string }) {
  console.log(params);
  return <Steps />;
}

And the Steps component:

"use client";

import { useSearchParams } from "next/navigation";

export default function Steps() {
  const query = useSearchParams();
  console.log(query);
  return <h1>Steps</h1>;
}

Important: the Steps component must be a client component as it uses a React hook. Learn more.

See the code sandbox for more info.

Further considerations

• Consider a more consistent url structure. Maybe always require a token and if there is no token encode null.
• Consider not using Next.js for this portion of your app. Maybe Angular is better suited here. You could try a monorepo like Nx and have a steps directory written in Angular and everything else in Next (this however will add more complexity).

App router vs pages

So my question is: how can I achieve this using NextJS App router or Page router?

In case you were unsure of which to use I thought I would include this bonus section.

The short answer is: almost always use the app router for new codebases. Since you are migrating start on the new app router.

Here is a more in depth comparison:

Credit krishnaacharyaa

As a general rule if you are unsure use the app router.

Conclusion

Circling back to the original scope of the question I would recommend using the query string approach using the app router.