Thanks for the video. I never knew that `Link` took an `as` prop - and if I had seen it in the docs I would have assumed it was for changing its internal element. Very useful.
I'm a very experienced next dev, this vid is super clear, straight to the point, and nicely presented. The video quality is well beyond your sub count. Keep it up and you'll have thousands of subs! 👍
@@aleksandrv2646 Hi there! So Next 13 will eventually support route intercepting. See this link in the original RFC: nextjs.org/blog/layouts-rfc#intercepting-routes The idea is that you would intercept routes to the photos page and instead show the photo in a modal. I don't think route intercepting works today, but keep your eye out for it!
Nextjs modal using headless UI! You save my life ^^ Every tutorial used react modal and not headless ui I was starting to lose hope. Thank you so much !
Nice . Thank You! I'm using it in a list-feed and I wanted to maintain the scroll position, so I've added `scroll={false}` prop to the Link component and also`router.push("/", undefined, {scroll: false});` on modal close.
Hey Ryan, great video. One question. How did you accomplish the autocomplete at 5:32, doing the auto-increment in the numbers inside the "as" prop? I was assuming that you selected `href="/?image=` and then did cmd+d until you had them all selected, then moved the cursor to the right and typed `as="/`, but then magic happens and you get the correct numbers. Thank you!
Hey Daniel, thanks! I use the vim plugin for VSCode and the way I accomplished this was using multiple cursors with the yank and put commands. Here are the exact steps: 1) Find all of the first `href="/?image=` occurrence and hit ctrl+D to select them all. 2) Enter vim multiple cursor mode by hitting ESC. 3) Move the cursors over to the number. In other words I put the cursor on 4 in the `image=4` part of the href. 4) Have each cursor copy the number it's over by using vim's yank command (the y key). 5) Move each cursor over to and start typing the `as="/` part of the Link component. 6) Now I use vim's put/paste command (the p key) to paste the number that was yanked by the cursor in step 4. Each cursor will paste its own number, so the line completes to `as="/{1,2,3,4,5, or 6}". Pretty amazing, It feels like magic! The vim plugin for VSCode blows me away every time I do something like this. There's so many cool things that fall out of knowing vim.
The easier way is just to attach cursors by pressing Alt and clicking, then move using arrows and select by Shift + ArrowRight, Ctrl+C, move to the place to write multiline code and Ctrl+V the number copied from the before. Is most cases the default is enough. But Vim mode is pretty good thing, yes.
Hello, Ryan! It's seems that video kinda old but idea is still cool. I have a question, what if we have thousand images and because of static generation we will have like 10,20 minutes build time. It's cost a lot money for us. So what will be better?
Hi there! Yes build times can get long when you have that many pages! One thing you could try is only build static pages for your top 100 or so pages. For the other thousands of pages you can build them only at request time using `fallback: "blocking"`. Check out the docs on fallback here: nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-blocking The nice thing about this approach is you statically build your most popular content, but you keep your build times controlled by limiting the number of pages your process at build time. You less popular content is still statically buildable, but it only happens after the first request comes in.
In Next 13 you could try to combine intercepting routes with parallel routing to get a modal experience like this. I haven't done it yet so not sure I can be of much help, but if you try it let me know how it goes!
Hey there! I'm not sure if you can use this approach with Next 13, I haven't tried yet. That said, modals that have state would need to be client components. Next 13 will eventually have a better way to do modal routing with it's upcoming intercepting routes and parallel routes features. These aren't available today, but I'll make a video once they are :)
Hey Ryan. this is a great tutorial and I'm trying to figure out what's not working on my implementation. how do I prevent the page from reloading when the link is clicked? that's my only issue right now but it's a big one. haha
Hey Cody! Double check and make sure you're using Next's Link tag around your . You'll need that to use Next's client side navigation. Also, you can check out the source code for the video here: github.com/ryanto/next-modal-routing.
@@RyanToronto hey ryan. I tried that and no dice but I eventually found a work around that works locally. only problem now is that when I try to deploy on Vercel I get "Type error: Binding element 'children' implicitly has an 'any' type" on the modal. any thoughts on what might be happening there?
@@CodyvBrown That sounds like a typescript error. You'd have to provide a type for your modal. I can't be much help there, but here's a good blog post about using typescript with react components: kentcdodds.com/blog/how-to-write-a-react-component-in-typescript
@@RyanToronto thanks! and yes. this is what was confusing me. didn't realize the file type was different on mine. am using type script. it was solved by modifying this code at the top (a friend helped): "interface Props { onClose: () => void; children: React.ReactNode; } export function Modal({ onClose = () => {}, children }: Props) { const overlayRef = useRef(null); "
Thanks for the video. I never knew that `Link` took an `as` prop - and if I had seen it in the docs I would have assumed it was for changing its internal element. Very useful.
In a very short video you just "saved my life". Thank you.
I was serching all over the internet to see a use of the "as" path, with you i finally got it! Thanks a lot 😁
Thanks to Sam's reference I found your channel. Thank you for this kind of high quality content!
I'm a very experienced next dev, this vid is super clear, straight to the point, and nicely presented.
The video quality is well beyond your sub count. Keep it up and you'll have thousands of subs! 👍
Thanks so much for the kind words! Glad you enjoyed the video.
@@RyanToronto Thanks for this video! Do you know how to implement the same with NextJS 13?
@@aleksandrv2646 Hi there! So Next 13 will eventually support route intercepting. See this link in the original RFC: nextjs.org/blog/layouts-rfc#intercepting-routes
The idea is that you would intercept routes to the photos page and instead show the photo in a modal. I don't think route intercepting works today, but keep your eye out for it!
Nextjs modal using headless UI! You save my life ^^
Every tutorial used react modal and not headless ui
I was starting to lose hope. Thank you so much !
Great video Ryan. I had no idea Next could do this. Super cool!
Very helpful! After reading a couple articles (and the docs) this helped me put the pieces together. Thank you!
How to achieve this with app router ?
Today i learned something new! Thank you for creating this video. Super helpful.
Thanks cof sharing very useful!
This is awesome! Neat pattern, I'll have to keep it in mind.
This is awesome! Thank you very much for the great info presented in a great way!
Thx man!! A few changes with Next, but still working
Amazing content as per usual. I really appreciate it!
Love the video man, exactly what I needed
Perfect tutorial video! Thanks!
Great video, thank you for this.
Nice . Thank You!
I'm using it in a list-feed and I wanted to maintain the scroll position, so I've added `scroll={false}` prop to the Link component and also`router.push("/", undefined, {scroll: false});` on modal close.
Oh awesome! That's great to know!
awesome video, thank you !!
Thanks a lot 😊😊
Hi Ryan, it's a very instructive video. Cloud you please clarify how ISR feature will work for Modal?
Hey there! I think ISR should work with the modal. If the homepage or an image changes you'd need to ISR both pages.
Hey Ryan, great video. One question. How did you accomplish the autocomplete at 5:32, doing the auto-increment in the numbers inside the "as" prop?
I was assuming that you selected `href="/?image=` and then did cmd+d until you had them all selected, then moved the cursor to the right and typed `as="/`, but then magic happens and you get the correct numbers.
Thank you!
Hey Daniel, thanks! I use the vim plugin for VSCode and the way I accomplished this was using multiple cursors with the yank and put commands. Here are the exact steps:
1) Find all of the first `href="/?image=` occurrence and hit ctrl+D to select them all.
2) Enter vim multiple cursor mode by hitting ESC.
3) Move the cursors over to the number. In other words I put the cursor on 4 in the `image=4` part of the href.
4) Have each cursor copy the number it's over by using vim's yank command (the y key).
5) Move each cursor over to and start typing the `as="/` part of the Link component.
6) Now I use vim's put/paste command (the p key) to paste the number that was yanked by the cursor in step 4. Each cursor will paste its own number, so the line completes to `as="/{1,2,3,4,5, or 6}". Pretty amazing, It feels like magic!
The vim plugin for VSCode blows me away every time I do something like this. There's so many cool things that fall out of knowing vim.
@@RyanToronto that's amazing. Thanks for the answer! I will need to check it out!
The easier way is just to attach cursors by pressing Alt and clicking, then move using arrows and select by Shift + ArrowRight, Ctrl+C, move to the place to write multiline code and Ctrl+V the number copied from the before.
Is most cases the default is enough. But Vim mode is pretty good thing, yes.
I wish folks could use example examples outside the doc examples
Thank you!
Hello, Ryan!
It's seems that video kinda old but idea is still cool. I have a question, what if we have thousand images and because of static generation we will have like 10,20 minutes build time. It's cost a lot money for us. So what will be better?
Hi there! Yes build times can get long when you have that many pages! One thing you could try is only build static pages for your top 100 or so pages. For the other thousands of pages you can build them only at request time using `fallback: "blocking"`.
Check out the docs on fallback here: nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-blocking
The nice thing about this approach is you statically build your most popular content, but you keep your build times controlled by limiting the number of pages your process at build time. You less popular content is still statically buildable, but it only happens after the first request comes in.
Please can you a video that will allow one to edit data in modal Nextjs
Thanks a lot!
Great vid my guy.
i was just wondering the other day how Reddit does its modal rendering for posts. Thanks for sharing.
But is the home page a "use client" component?
Heya! This video uses the pages router, which was before server/client components existed.
Thanks 👍
But in nextjs13 they got rid of 'as' property. Have been trying to figure out how to do this in 13
Same. I’ve also been trying to figure out how to do this by intercepting routes but it’s really confusing.
In Next 13 you could try to combine intercepting routes with parallel routing to get a modal experience like this. I haven't done it yet so not sure I can be of much help, but if you try it let me know how it goes!
Gonna see if this can work for videos
Amazing!!!!
great video !
Would this example work for Next.js 13 using the App directory without having to set the component as a client component?
Hey there! I'm not sure if you can use this approach with Next 13, I haven't tried yet. That said, modals that have state would need to be client components.
Next 13 will eventually have a better way to do modal routing with it's upcoming intercepting routes and parallel routes features. These aren't available today, but I'll make a video once they are :)
I tried it out in Next.js 13 appDir but can't get it to work... If anyone has a solution i'll be happy to give it a try !
nice video
Hey Ryan. this is a great tutorial and I'm trying to figure out what's not working on my implementation. how do I prevent the page from reloading when the link is clicked? that's my only issue right now but it's a big one. haha
Hey Cody! Double check and make sure you're using Next's Link tag around your . You'll need that to use Next's client side navigation.
Also, you can check out the source code for the video here: github.com/ryanto/next-modal-routing.
@@RyanToronto hey ryan. I tried that and no dice but I eventually found a work around that works locally. only problem now is that when I try to deploy on Vercel I get "Type error: Binding element 'children' implicitly has an 'any' type" on the modal. any thoughts on what might be happening there?
@@CodyvBrown That sounds like a typescript error. You'd have to provide a type for your modal. I can't be much help there, but here's a good blog post about using typescript with react components: kentcdodds.com/blog/how-to-write-a-react-component-in-typescript
@@RyanToronto thanks! and yes. this is what was confusing me. didn't realize the file type was different on mine. am using type script. it was solved by modifying this code at the top (a friend helped): "interface Props {
onClose: () => void;
children: React.ReactNode;
}
export function Modal({ onClose = () => {}, children }: Props) {
const overlayRef = useRef(null);
"
@@CodyvBrown Awesome! Glad to hear you got it working
You are cool!
This does not work on sub pages. if you are on /home this will not work