Dynamic Detail pages from a dynamic list

I try to create dynamic detail pages.
I followed the example Connecting your API data to builder - Builder.io using the person data, all good. Now I added a link on the image Data tab > Element data bindings > Get “Link Url” from (“/person/” + state.resultsItem.login.username) resulting in e.g.


Now I created a Person detail page setting the page URL to /person/{username}/ , the preview URL went to http://localhost:3000/person/__builder_editing__ . The builder UI is showing me a page that I can edit. Problem is when I preview the URL I get a 404.
For the moment I just want to display any user (https://randomuser.me/api), in future I would like to retrieve the last segment of the URL path and query for a specific user.

It would be good to have a end to end to tutorial for this use case. In the moment I find the documentation quite frustrating.

Code stack you are integrating Builder with