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

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.

Related

Adding language in URL with javascript

I'm creating a single-page site, and I came across a problem that I can not solve. I have my menu with "Home | Blog | Contact" etc, change the URL with the javascript without updating the page with the code below:
window.history.replaceState({url: stgUrl}, "", stgUrl);
so I can see that the URL is modified correctly, the problem is that my site is in two different languages, and I want to put something like "/pt/" e "/en/" so the user can better visualize what language is browsing. The problem is that when I do this:
window.history.replaceState({url: stgUrl}, "", '/en'+stgUrl);
I get file upload errors, such as site images(Get 404: Not Found), which are not finding the path correctly anymore, because of '/en'.
since the changed url looks like this: mysite.com/en/
I would also like to add comments to blog posts on the site, and I saw that to add Disqus comments, I would need to have different urls for each post, so I can better control the comments, it's also something I do not know how to do.
obs: my site will be hosted without access to a server, so everything should work on the client, like a static but one page blog.
And how do I update the page with the url changed without receiving a 404? I would like to go to the home page for example, or update and maintain the current page.
So my question about urls comes down to three questions:
1 - How to change the url with "/pt" and "/en" and not receive 404 for images not found?
2 - How to change the url in order to generate comments from Disqus?
3 - How to update the page with the url changed without receiving a 404?

Is it possible to get data from redirection page in AJAX?

I'm in trouble. I'm trying to do something which can appear easy but I don't manage to do it.
Here is the situation :
I have 3 different html pages :
The first one called index.html is my main page with a button to lauch a test in AJAX (I'm gonna talk about it after).
The second one corresponds to a redirection to the third page.
The third one has data.
What I wanna do is :
Click on "test" button on the first page and then start an AJAX request on the second one to reach data from the third one (with the redirection) to print it in the first.
I mean the first page calls the second one in AJAX, but the just to redirect on a specific third page. Depending on the third page which is called, data returned to the first page will change.
Do you think it's possible to find a solution to this problem in Javascript ? I hope I have been clear enough.
Thank you in advance for answer.
What you are describing doesn't really make sense. There are methods of redirection that AJAX follows (an HTTP 301 code, for example). However, what you are describing is not that sort of redirect. You are describing Javascript code that, when run, will redirect the browser elsewhere.
However, you are not loading that Javascript with the browser, you are downloading the page via AJAX. Once it is downloaded, you will have the text that represents that page, but in order to find out where it would redirect to when run, you would either have to run it and somehow capture the redirect value (not recommended), or parse it yourself (also not recommended).
There are other options that could work, depending on what you are trying to accomplish:
The server could return an HTTP redirect code when the second page is requested
The second page could instead be a text or JSON file containing a URL, which the first page could read, then request data from that URL.
If there is logic in the second page that determines where the redirect goes, it could be moved to the first page
You could have the second page employ server-side scripting (PHP, etc) to determine what data should be returned and return it directly to the first page

Include javascript file for each Component Angular2

When I add a javascript file in my index.html and I use some function it work just for the first time but when I refresh my page it not wokring so I need some way to include for each component a file javascript to avoid this problem
I think you're talking about routing. For Angular2 routes to work you need to make sure that the back-end server redirects all requests to your index page otherwise Angular will not be loaded, and will not be able to show the correct content/component for the current route
More on this here: Angular 2 rc4 can not go to page by typing the url to the address bar

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)

Handling ajax URLs from different pages?

So I have my site at http://example.com/foo/ (under a directory, the main domain is for something else).
Using .htaccess, I've set up my pages so the URLs look like http://example.com/foo/about/, http://example.com/foo/polls/, http://example.com/foo/registration/, etc. This works great and the site loads fine and can be traversed without any Javascript issues.
Now, I'd like to add some AJAX functionality to the navigation. If I'm on http://example.com/foo/ and I click the navigation for "About", it changes the URL to http://example.com/foo/#about and dynamically loads the about page in one section of the site. I also have this working.
I have two problems which involve handling switching between AJAX and non-AJAX URLs.
If I'm on http://example.com/foo/about/ and I click on polls, it would look like http://example.com/foo/about/#polls which doesn't look very pretty. Ideally, I'd want every AJAX URL to be formatted with just the main directory and a hash, like http://example.com/foo/#about.
Should I handle it by forcing an actual (non-AJAX) redirect to the index page with a hash symbol then load it from there?
The other problem is the reverse. If I send http://example.com/foo/#about to someone who has Javascript disabled, or maybe if someone links to it and a bot crawls that link, is there any way to handle that to redirect to the correct non-AJAX page or is this just an unfortunate fact of life I'll have to deal with?
If you need non-javascript support, I'd change all your urls directly to the pages. Like http://example.com/foo/#about to http://example.com/foo/about/
Then, the javascript can intercept it, call event.preventDefault(), and 'redirect' it to #about, which will follow your ajax functionality.
If the client doesn't have javascript, it will go to http://example.com/foo/about/ as normal.
As for being on http://example.com/foo/about/, a javascript client should never get here as they will always be redirected to hashtags.
1) if you redirect to the main page and then use ajax to load the about page that would just not make much sense. what you should do is make everything work through ajax : there should never be a http://example.com/foo/about/ in the first place only http://example.com/foo/#about then you just update the hash and the content when you click on polls.
2) there is no way to avoid, sorry.

Categories