Dynamic routing nextjs react - javascript

Help me please.
i am working with next js, i need to make this structure in url sitename/catalog/category/group/product
category, group, product pages are created dynamically, after that I need to generate static pages with ready-filled html markup in the out folder via the 'next export' command. I want to get all category, group, product pages to make a completely static site. In the documentation, I did not find information about a large nesting. Please tell me how to do it. Here is my current structure and what next js generates for me
Is it possible to do this?
my file structure
pages
catalog
index.tsx
[category]
index.tsx
[group]
index.tsx

You need to create dynamic URL using [slug] for all dynamic variable in your URL component.
Check the documentation: https://nextjs.org/docs/routing/dynamic-routes
Once you use dynamic URL, you need to serve getStaticProps (for data as props) and getStaticPaths (for diff routes) method on page to serve the data.
Note: above method are only executed on build time, in case of next export also.

Related

Generating pages in Gatsby from two sources of mdx files using graphql

Need help with GraphQL and Gatsby. Task: separate requests and page generation based on mdx, depending on where the file is located.
Simply put: I have a blog and news on the site. The content for the blog is in one folder, and for the news in the next one. All in mdx format.
Difference: the news has a title, the blog has a header.
Lists for files on different pages, as well as the posts and news themselves, are generated according to their own templates.
Hooks are created to get the data in the appropriate folder.
Problem:
only 1 hook works, which overwrites the second hook
post and news pages are generated from all files
Example site: https://github.com/Tecnika/test-site
Sample:
use different types of files.
--- The idea is good, but not suitable for the original project, maybe there are not enough file types
use your type
--- The type was created, but it was not possible to bind it to files and all requests for it were empty (the NewsPages type was created, the search for AllNewsPages returned an empty array)
sorting, filters
--- limit only display list, not page generation
If any of this works in your opinion, then please show me how to do it right.
Need to:
-Generate blog and news lists independently of each other
-Generate pages with posts and news based on their templates
(It is possible to increase the generated pages, for example, a catalog of cats, with pages of cats)

Export Vue dynamic site to Static HTML on run time

I am trying to generate/export the html/css from a Vue Application to a static index.html and the css assets without the script I wrote within the vue app which makes calls to the internal servers.
Use case:
An employee creates a digital Information site about a car of the company.
Here he needs to enter vehiclenumber etc, it then makes a GraphQL query with these parameters to our internal server.
Once the information loaded and is filled in on the site, an option should be given to "Save" (Export) the html/css with only the necessary js for vue components itself to work (e.g. Element vue gallery)
The Employee creates the page using localhost:8080?carnumber=xxx&info=xxx
The Server queries itself should not be included as they will be unreachable from outside the intranet.
So I want the static html to not care about the route and parameters and display the HTML as seen on localhost:8080?carnumber=xxx&info=xxx
I have looked for "static site generators" etc but I have not come across a result I am looking for as the page itself isn't static only the export should be. I also came across Nuxt.js but not exactly how I want it to be, the best would be to have it call like a NuxtGenerateStaticPage(this) function (in my dreams)
Please let me know if anything is unclear.
I appreciate any input/idea :)

Nextjs Multiple dynamic Routes on the bases of ids

Hi, I am working on the Nextjs project, and I have an issue, where I have Events->Event->Schedule.
I just want to click on the event it will be linked to the event, inside the event there will be a schedule that will be linked to the schedule component,
there will be multiple events, and the routing should be dynamic. Folder structure is visible in Pic
Take a look at the Next.js documentation on Dynamic Routing:
https://nextjs.org/docs/routing/dynamic-routes
You would create a file structure similar to this:
pages/
-- events/
---- [eventId]/
------ schedule/
-------- [scheduleId].js
The last file would live at pages/events/[eventId]/schedule/[scheduleId].js. In that page file, you would have access to both eventId and scheduleId as route parameters to look up the appropriate event and schedule.

NextJS - how to dynamically load different apps with dynamic routes

I have a multi-lingual application that I use exportPathMap but I want to transition to getStaticProps and getStaticPaths. My structure looks like so:
pages/[language]/[app-slug].js
However, [app-slug].js could be any of 20 different applications with unrelated code...
After reading caveats I thought, with pre-defining the getStaticPaths, I would be able to do:
-[language]
--[app1].js
--[app2].js
...
But it throws You cannot use different slug names for the same dynamic path ('app1' !== 'app2')
Is there any way to dynamically load the react app code based on path, or to have multiple dynamic files in one repo? (all static paths are known)
This similar answer to use query values won't work for my case, SEO and bundle size are top priorities.

routes from backend API for content management in angular 2

An Angular 2 app uses the following code to load an array of routes:
export const routing = RouterModule.forRoot(myRoutes);
Currently, the myRoutes array is defined in the Angular 2 app, and works perfectly. But this assumes that routes have been defined statically in the client app.
How can the myRoutes array be fed into RouterModule.forRoot(myRoutes) from a source that would allow users do define routes and content from a user interface in a separate administration app? This would involve feeding the user-defined routes through a backend server.
I figured out how to send a data argument into each Route object in the myRoutes array, so that the same component can be re-used for multiple routes by sending different config into the same component from each route. But how can the routes array be imported from an external data store in a backend server?
This link indicates that I am describing a feature request. However, There MUST be some way to have UI-based content management in Angular 2 without having to resort to third party tools. What is a minimalist approach to importing an array of routes into RouterModule.forRoot(myRoutes) from a backend server?
You could try using dynamic component loading. The docs for it are here: https://angular.io/guide/dynamic-component-loader
I have not tried it ... but it does not look like it does exactly what you want. It does not seem to provide a way to add dynamic routes. But it does allow adding dynamic components.
Also, as per the link you defined, this is an issue with the CLI and its dependence on Web pack and AOT. You may be able to achieve more of what you want using SystemJS as your module loader.

Categories