When Did NextJS Routing Become so Advanced??!
NextJS has been one of the most popular frameworks for building React applications. With its latest updates, NextJS routing has become incredibly advanced, offering developers a wide range of features and capabilities.
Dynamic Routing
One of the most significant advancements in NextJS routing is the introduction of dynamic routing. This feature allows developers to create routes that match specific patterns and parameters, making it easy to generate dynamic pages based on user input or other variables.
File-based Routing
Another major improvement is the file-based routing system, which allows developers to create routes by simply creating files and directories within the project. This makes it much easier to organize and manage routes, and simplifies the overall development process.
API Routes
NextJS also offers advanced capabilities for creating API routes, making it easy to create serverless functions that can handle various types of requests. This allows developers to build powerful and efficient backend functionality without the need for a separate server.
Client-side Routing
In addition to server-side routing, NextJS also provides robust support for client-side routing, making it easy to create single-page applications with smooth and responsive navigation between different views.
Static Site Generation
NextJS also offers advanced capabilities for static site generation, allowing developers to pre-render pages at build time and deliver them as static HTML files for improved performance and SEO benefits.
Conclusion
NextJS has come a long way in terms of routing capabilities, offering developers a wide range of advanced features for creating complex and dynamic web applications. With its file-based routing, dynamic routing, API routes, client-side routing, and static site generation, NextJS has become a powerhouse for building modern web applications.
Overall, NextJS has truly made a mark in the world of web development with its advanced routing capabilities, and it will be exciting to see how it continues to evolve in the future.
I'm lost
what a great new soluton i have seen it before on instgram web, and wondered how they did it <3
but is there a way to avoid displaying the modal on mobile version instead push to the actual route or i need to customize the modal to take the full width on mobile (assuming the modal content is a responsive component )
This might be useful for SEO in case of product listing pages where you want the users to have a look at the product in a modal from within the listing page because you dont want them to leave the page but at the same time you also want to have dedicated pages for each product for search engines to crawl
And if you open new tab/shareable with link "www.***.***/sign-in" and then click on the Back button it will not take you to the "www.***.***" but to completely different website (whatever website you was on previously). Making our user to be kicked out of our website… Because button "Back" is router.back() and not a link to the specific page. But if we use a <Link> component instead to the specific page the Module is automaticly opened even without navigating to the /sign-in…
But what if I want only the "/login" to be a modal and not a separate page? A modal that's above all other content, even on a hard reload or when accessing via a shareable link. I don't want the "/login" to be a separate, complete page. It's a poor user experience when a user sees two different views for the same thing. I understand that in some cases it can be good, but not for what I aim to achieve. In my actual project, I have "/pets", and there's a button that navigates to "/pets/create-pet". I need the "/pets/create-pet" to always appear as a modal above the "/pets" content. How do I achieve that?
Amazing way to break it down, it really helped. Thanks!
cool
I don't know why I used to hate your chanell after watching some of your videos. But man, now I love this channel including you. Thank you for so much efforts.
I am experiencing this particular error. In my case, I was able to intercept a route and render a modal. However, the browser says this page does not exist when I hard refresh. Directly accessing the page via a link tag works, but a hard refresh results in a not found error. this is only happening when I implement the intercepting logic.
Is there any open-source project that applies this concept?
Thank you Josh you are one of the best developers in this community. Keep it up bro
This is interesting. Not really sure how useful it'd be for day-to-day apps outside of signin. Maybe some more examples of this would help me understand. Also curious about how this preforms vs the usual modal methods + code size. Lots of questions, cool video!
what is the benefit of this?
I wonder how this works in the underlying React frame. Does it just cooy the component and paste it in 2 places?
Hey josh i want your help i want the intersection routes to work only whem my website is on desktop but when my website is on phone i dont want intersection routes to happen. So now what to do?
Is important to use app folder? Can we use it our own /pages dir something like custom app! If possible how to do?
You explained that so much better than the documentation. There’s just too many gaps in the examples they provide. Thank you!
A perfect example of javascript going full circle, were back on AngularJS days.
Hallo Josh ❤ can we the code somewhere ?
File based routing exist since nuxt 2 era. And now next suddenly found it 😅. Still they need to figure out auto import and a bunch of other magic 😅😅. So primitive.
Could be intresting for A/B testing aswell