So we want to create a big website with nextjs and strapi.
We sometimes have deep nested pages like
www.ourwebsite.com/onderwijs/bijbelscholen/parttime-bijbelscholen
How is this possible?
I have tried to setup dynamic routing in nextjs which is working fine, but I have a problem.
If I want dynamic routes which are all nested I need to do something like this:
I know it's ugly, I'm sorry.
so now when I go to
www.ourwebsite.com/onderwijs/bijbelscholen/parttime-bijbelscholen
I just get the latest word from the URL and take that and put that into my API to get the right data which is working fine! I configured strapi so it finds by slug and not by id. So my API URL looks like this: www.myStrapiInstalation/api/pages/parttime-bijbelschool
but when I go to
www.ourwebsite.com/onderwijs/parttime-bijbelscholen
It's also working! but that's not good! Because it needed to give me a 404 page because it doesn't exist but now it just takes the latest word and gets the data from strapi. My API URL is still this of course: www.myStrapiInstalation/api/pages/parttime-bijbelschool
So what do I need to do?
Is it just not possible to make everything hardcoded and do I need to make nested folders with real names like: 'onderwijs', 'activiteiten' etc.
Or can I make everything dynamic so that people can make nested routes in nested routes in strapi?
I feel like this is a very stupid question, but I'm really stuck here.
Next JS allows catch-all routes, which is useful for nesting pages and have this format:
pages/post/[...slug].js
In your example, the pages folder structure would be:
pages/secondNest/[...page].js
However, since you're using Strapi to fetch the content, the routes of these pages should be known in advance so that if the user navigates to an invalid page, the result should be 404.
You can set the valid routes in Next with getStaticPaths. But notice that you will also need to set up a custom controller in your Strapi application to return the content tree of your website the way that getStaticPaths expects.
That way, it's ok to use the last part of the URL to get the content.
One disavantage of using catch-all routes, though, is that you must know the base of each URL. For example, if you have the following URLs
www.example.com/onderwijs/bijbelscholen/parttime-bijbelscholen
www.example.com/activiteiten/bijbelscholen/parttime-bijbelscholen
the folder structure in pages would be:
pages/onderwijs/[...page].js
pages/activiteiten/[...page].js
The key factor here is that the paths following the base of the URL should be set statically with the help of a custom controller that returns the tree of the content.
Related
I'm using Wordrpess as headlessCMS, nextJS, graphQL.
When i get my menu from wordpress it has links in this way
For ENG:
"/about-us"
For PL:
"/o-nas"
My goal is to have one template in my files, for example "/pages/about.js"; and then when user enters "/about-us" or "/o-nas" then "/pages/about.js" file is used (inside it, by useRouter I can detect if user is /en or /pl and then make specific query for data).
How can I create this kind of idk. 'redirection'? I tried using but i wasn't able to make anything working
https://i18n.nuxtjs.org/custom-paths/?fbclid=IwAR1k5T5AI5hX60ep4coXtOwUpXirNfc5W4-5NzVv-y0G7wLoPPKPAL4xNv4
https://nextjs.org/docs/advanced-features/i18n-routing
Can anyone help me or provide some kind of working example?
I've been reading through the documentation, which is great, however I'm still not entirely sure the best way of creating a nested route in NextJS.
In my example I have modules that have nested lessons. Or in other words, my module could be a book and each lesson a chapter.
So, my current thought is to have my pages directory like so:
pages/modules/[mid]/lessons/[lid]
Pretty generic route path, but it feels off to create a dir path like this:
/Pages
--/modules
----[id].js
----/lessons
------[id].js
It seems very very coupled to modules. What happens if I want a different route to lead to lessons or if I make another page that just GETs all lessons regardless of modules. What then?
Would the ex below be a normal/suitable design? Seems a bit messy having all these tucked away places to have lessons appear. I'm sure I'll get a better grip of it soon enough. Just want to make sure I'm not going well off the beaten path.
/Pages
--/modules
----[id].js
----/lessons
------[id].js
--/lessons
----index.js
Thanks!
If you want to nest the entire content of a directory under a route parameter you can name the directory itself between brackets. Then all the content under moduleId directory will receive a module Id.
You can have
/Pages
--[moduleId]
----/lessons
------[id].js
I am using nextjs to enable SSR in my application. Application structure is:
components -
component1.js
public -
img1.png
pages -
/order
[order].js
[country].js
contact-us.js
review.js
if I do 'localhost:3000/contact-us/' ,it routes me to [country].js.
I think when we do /contact-us/, it consider it as folder, but folder is not really there it takes first page that comes in that directory.
I have tried using exportTrailingSlashes: false in next config but it did not help.
I think the best way to avoid this would be to put your [country].js page in a /countries folder. That'll make your pages look like:
pages -
/order
[order].js
/country
[country].js
contact-us.js
review.js
Then you can get to the country endpoint via http://localhost:3000/country/[country].
So, in the WordPress page, I need to link the pdf in wp-contents so I linked it with the relative URL as href="/wp-content/uploads/2017/03/test.pdf"
when I click it since my root in localhost is localhost/test it takes me to localhost/wp-content/uploads/2017/03/test.pdf (which doesn't serve the file). However, I don't think it'll be an issue in the server. Still, I want to know if this is the correct way?
Also, so I'm in page localhost/test/page22 Now on the page, I have an anchor tag as href="/page23" it takes me to page23 correctly, but when I'm in a different sub page say localhost/test/page/page2 now, the link takes me to localhost/test/page/page23 which is not correct as it should be localhost/test/page23. How can I solve these issues
WordPress provides functions for getting the URL of resources you should use these instead of having your code generate the URL. In this case you should call wp_get_attachment_url().
I'm newish to ASP.NET MVC 3, so sorry if I'm my details are slightly murky. I'm trying to publish my web app to a server here. I'm running in IIS 7, set to integrated, and I can get to the home page of the app just fine. However, certain links remove the directory out of the url. Example:
URL of home page:
http://localhost/CMS/ - this will take you to the first screen, with links to "Contract," "Customer," and "Employee." Clicking one of those brings you to...
http://localhost/CMS/Contract (or whichever you choose.) From there, it's broken down into different categories. One of them is "Create Contract." Here's the problem I'm having: that URL points to
http://localhost/Contract/Create - completely omitting the CMS part out and throwing a 404. I can reach it by inserting CMS back inside, and those pages route correctly.
What could be wrong? Let me know if you need more information on any of my code or whatever.
You can define an alternate controller in the route than what you would expect
routes.MapRoute("Contract", "Contract/{action}",
new { controller = "cms", action = "index" }
);
and you should be constructing your links like this within your pages
<%=Html.ActionLink("Contract", "create", "cms") %>
rather than doing it the old fashioned way like
Contracts
which side steps routing.
It sounds like you don't need additional routes but need to create ActionLinks propery using the HtmlHelper
When you are using your paths to to the controller actions you need to use #Url.Action("action", "controller"); instead of just using "action\controller".
See an example http://codetuner.blogspot.com/2011/07/jquery-post-url-problems-in-iis-hosted.html