We Keep Coding

nextJS catch all routes with statically generated pages doesn't work

Repo here: https://github.com/Chenzo/nextjs-fallback
Example page here: https://chenzo.github.io/nextjs-fallback
I've got a nextJS project set up like this:
/pages
/things
[thing].js
[[...anything]].js
2 pages are generated from some simple data using the [thing].js template
https://chenzo.github.io/nextjs-fallback/things/onething
https://chenzo.github.io/nextjs-fallback/things/thingtwo
there's a link to a third non-existent page /things/thirdthing that goes to the 404 page. But there's a FOURTH think that goes to /things/thirdthing/what that goes to the [[...anything]].js page.
I understand that the initial call has to land on a page that has the nextjs/react app running but from the homepage, the third link should go to the anything catch-all, yes? why is it only catching the fourth link?
we've got a bunch of "things" prerendered, but then there's the possibility of thousands of "things" that can be linked, and we can just ajax for them, but I'm perhaps going about this wrong?
I want, if staticly generated, use [thing].js if not then use [[...anything]].js
thank you for your time.

Cypress API calls are not triggered for button event, multiple containers

Cypress not catching click event triggered hence API end points are not called for multiple containers.
It’s very difficult to explain issue, tried my best any hints are really appreciated.
I can’t share any application details.
I have a main UI application interacting with couple of backend components. API calls are made to endpoints with the same base URL but API containers are different based on component.
Manual Test steps;
Visit application url In main UI click search link
New tab/form (in same window) is opened which will interact with component 1
New tab is a form, fill in details and click verify button
2 API calls are triggered 1 : button click event success for container 1 2: API call to container 2
On successful 2 API call , page returns to main application page with search result details
In cypress runner for step 4 only 1 API call for container 1 is triggered with 200 success response.
Unfortunately second API call for container 2 was not triggered.
Asked developers about this, suggestion was cypress is not catching triggers, container 2 is not reachable from container 1.
I am stuck here, not sure what to search for or ask developers. Anyone noticed similar issue?

Not knowing much I can read you this quote from cypress.io
"Can I test anchor links that open in a new tab?
Cypress does not and may never have multi-tab support for various reasons.
Luckily there are lots of clear and safe workarounds that enable you to test this behavior in your application."
Maybe this could help: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__tab-handling-links

Cache Angular Component

I have two angular components. The first component has a list with picture items requested from a server. When the user selects one picture he is forwarded to the second page, the detail view, where more information is displayed. Now when he is hitting the browser's back button component 1 loads again and fires some heavy request for getting the pictures.
Is there a way I can cache component 1 so when the user hits the browser's back button component 1 is restored and the server request are not sendend again? I have read about Angular Route Reuse Strategy but I guess this applies not for browser navigation?

Just store the items in a variable inside a service

Routing back with param in Angular2

In my Angular2 project I have two pages A and B.
Page B has parameters, for example http://localhost:4001/pageB/bw0600 has parameter bw0600.
When user push the button back (<-) in the browser, he hast to be able to go to the previous page A (this works fine) and the parameters (in this case bw0600 should be there too. So, the address of page A should look like
http://localhost:4001/pageA/bw0600
So i need maybe somehow to overwrite the usual behaviour of router back (I don't have button (just (<-) in the browser) , so I can't write the function and bind it to element button)...
How could I solve this?

If you set the parameter to pageA and then forwarded them to pageB, the back button would then go to the correct, parameterized pageA.
As in: pageA => pageA/bw0600 => pageb/bw0600
You could also store the data, and then have pageA always look for the data in localstore or in a shared service when it is loaded.

How do I make the back button work when navigating back to an Angular app?

I have an app which uses AngularJS for some of its newer pages, and legacy server-side generated templates on other pages. When a person navigates from an Angular page to a server-side templated page, then uses the browser back button to return to the Angular page, none of the JavaScript responsible for making Angular page runs. This leaves the Angular page in a bad state.
I thought that the browser's bfcache would retain the state of the page just as it was when the user navigated out. However apparently I don't understand how bfcache works, it seems to do nothing except put back superficial HTML template code.
The app does not use the $location service, since I don't want to make Angular responsible for app-wide routing (yet): it would be too invasive to existing legacy code.
In any case, the problem should be exactly the same if an Angular app has a link to an external site: user clicks the link, visits the external site, then clicks the back button to a broken Angular page.
What am I missing to make this case work?
It would be nice to avoid gross kludges with checking some hidden state and issuing a broad location.reload() at the very beginning of all JS execution, but I don't mind forcing controller reinstantiation.

In a single page application(SPA) with the routings properly configure you can use $routeChangeSucess to track the route changes like this:
In your MainController:
scope.history = [];
$scope.$on('$routeChangeSuccess', function (event, current, previous) {
//this is how your track of the navigation history
$scope.history.push($location.$$path);
});
///Your go back code function can works something similar to this
$scope.goBack = function(){
var prevUrl = $scope.history.length > 1 ? $scope.history.splice(-2)[0] : "/";
$location.path(prevUrl);
};