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.

Integrating HotJar in SPA with same URL

I'm trying to integrate Hotjar with an admin panel.
The way it currently works is some sort of SPA without page loads and neither URL changes.
It all happens under /index.php and then when we need to change a page, just send an AJAX request to load it's content.
From checking the documentation, Hotjar seems compatible with SPA's but only when there's a change in the URL (either query string or hash).
Is there a way to trigger in JS a page change to a page name (i.e. Main Page) ?
I've tried
hj('vpv', 'Main Page')
But the output seems weird
url: "http://mydomain.comTest Page"
Thanks.

You can track your changes manually by adding additional JavaScript after your AJAX calls.
Documentation:
To Manually Issue a State Change
hj('stateChange', 'some/relative/path');
Example:
Imaging that you have a SPA with base URL http://example.com/ and you want to track the main page and a page that gets dynamically loaded with AJAX once you click some button.
In order to do that, you would need to:
1) In your Hotjar account, create two heatmaps. For the main page, you can use the base URL http://example.com/. For the page that is going to be loaded dynamically, you can put a virtual URL, e.g. http://example.com/my-dynamic-page, which will be used only for recording and will not need to exist in your SPA.
2) In the JavaScript of your application, add the state change code after the AJAX call that will dynamically load the page.
You need to use the virtual URL that you defined in the previous step to let Hotjar know that this is a new page and you want to track it separately:
hj('stateChange', 'http://example.com/my-dynamic-page');

Differences between MVC routing and SPA routing ?

I know how a MVC application handles routing,
(/foo/bar get) request hits the server
route /foo/bar with get method is found or not found, if found route handles the request by calling a method which serves a view page with corresponding data filled up.
client gets a html document with many links to other pages.
Another link is another procedure just like this one.
However, I have been learning react+meteor pack, which is a SPA (single page application) without ssr(server-side rendering). The most critical part that gets me confused is routing.Let's say I have 3 different routes for my SPA. (/), (/route2), (/route3)
(/route2) request hits the server. What does the server serve ? The whole application code with (/route2) active or what ?
Let s say we are on (/) route and clicked (/route2) route. So what s happening now ? Does react empty the #mainDıv and put related component instead, from where, the bundle.js which already contains all of the views' html as components ?
Is there a way to send only requested page's html and js, and after showing the content, getting other pages' html and js in the background, without client even feels. So that when another route is hit, only data will be on the wire.
Finally , only sending the related page's html - css - js when requested,I don t don't know if such a technique exists, seems to lack the SPA experience, but I am not sure If it would lack SPA expereince. It would be great to explain how to approach this issue.

With a SPA you typically (read: virtually always) configure your server to serve the same bootstrap HTML/Javascript regardless of which URL has been requested. A request for /route2 will get the same HTML response as a request for / or any other URL (unless you have specific exceptions for specific reasons). The SPA always starts with the same bootstrap code and examines the current browser's URL, then dynamically loads content as needed. How exactly that content is loaded and when it is loaded depends on the specific framework/code/circumstances/configuration, but yes, ultimately the contents of the DOM are dynamically being replaced by Javascript.

Handle page refresh/f5 angular js and laravel

I am building an application with angular js( new to angular js ) and laravel. All laravel routes except home page route serves only json data needed for that page. Home page loads all the necessary stuff that angular js has to work with. The problem is that if user decides to refresh the page when he/she is on a url other than home page, the page displays only json data, since there is no css,script and html loaded. My question is what is the best and professional way of handling page refresh/f5 with angular? Should i prevent the page refresh at all, if yes how? Hope my question is clear enough...

According to your post and comment here are 3 proposed solutions/suggestion.
Stay on one url and manage the json only,dont change your url it direct to your laravel route request if refreshed by user.
Using angularjs default hashtag(#) method is better, to understand angular and laravel.
Send a variable with your angularjs request to route to identify that it comes from angular and check in your route. If from angular return json otherwise you can redirect to home page.
I hope it will help

Calling router from backbonejs and nodejs

I have an web app. Basically its a single page application. The initial page is a flat html file called index.html, with a single script declaration pointing to require.js. From there I use backbonejs to handle the client side logic. The index.html is being served by nodejs.
My issue is that, any action within the page, for example, i click on a link, the backbone router is called. Which is the behavior I want being a single page application.
For example: www.testserver.com then i click on a link which shows a modal screen for registration www.testserver.com/register, via backbone router with push state on
The issue arrises when, instead of accessing a certain link within the app, i open the url straight in browser. For example I paste, www.testserver.com/register, in the browser. The request is then sent to my node router. I am assuming this is the correct behavior, since the page doesnt exist yet, meaning the backbone router doesnt exist as well.
I was wondering, on what the correct work around for this is. What am i supposed to do, when i access this link? How do i pass the correct behavior back to my backbone application.
Thank you very much.

The server should return always the index.html page. When you start the router in your Backbone than, the router handle the navigation and call the function you defined for the actual route.

Assuming you don't need to do any SEO type stuff such that each unique URL loads its own metadata, just always serve the same index.html as stated. However if you want to have different static head content based on the URL, you should do that within node based on the path (e.g. keep an array of metadata for each route that you slip into a slightly-more-dynamic initial view template, based on your existing flat index.html)