Next.js Pass Data From One Page to Another Page

in this video we're going to look at how you can pass data from one page to another page so let's say we're on the home page here and we want to pass some data to the about page now here in next year's 13 you know what the app directory things have changed a little bit so these days we can do this with the link component so we can say link and we can link to you know some other go to some other page and here link I need to import this is going to be next link from next.js right and then what you can do is you can say href and here you can actually pass an object and then we can say where do we want to go to well let's say path name code slash about all right so that's that's where we want to go to and then you can pass uh well search params essentially so you can say you know some name let's say name H25 and let's say that's it right so now we have this now if we go click here we go to the about page but the about page doesn't exist yet so we need to create a new folder we'll say about right so I clicked on that it took some time but it says page not found because it doesn't exist yet so in in Nexus 13 in the app directory you need to create a new folder and that's going to be another page.tsx file right so you're going to have a lot of page.dsx files in your app because for each route you're going to have a page file on the page in the root here is for the home page all right so here we can have um about page right and let's see so now let's go to the about page that should work now so now you can see yeah we are at on the about page right so this is how it's structured in the file system all right now you can see in the URL let me make this a little bit wider URL now has name is John Doe and H is 25. right so now how do we get access to that here in the about page well you can you can actually just access this here in the search params so we can say search params and then we can for example log search params dot well let's say name let's say name now let's see we have an issue here from typescript so I will just type this very quickly search params it's going to be a name and a string for both a name and age and actually age may be a number but I think because it's coming from the URL that it's going to be a string uh oops let me close this all right so here we have search params let's see if this works so remember this is a server component so server components are all the components in the app directory by default are server components so if you do console.log that's not going to be in the browser right so here I need to open up my terminal and now you can see I see John down so if I reload the page you can see it's going to be John Doe if I go back to the home page and click on here you can see it locks John Doe again right so here in server components you can easily access that with search params all right now what if you have a client component so we could have let's say components file here let's say a button component how does the button component that is a client component let's say use client this is going to be a client component how does this button get access to this data here because now you cannot you cannot use search params well what we get here is another Hook is use search params search params and let's see no suggestions so I need to manually import as here so we need to import this not from react router Dom so this suggestion here from co-pilot is incorrect and we need to import this from next not router next navigation so here we didn't need to import anything so now what we can do is if you hover this it will show you what you get from this so you get some URL search params objects so if you have this in the URL you can say dot get so you need to you need to use a get method here so let's let's see so we can say const search params and then you can log for example well this doesn't work you need to do it with a getter a get and then what we get is what we want is for example name and so now we're logging and this is a client component right so make sure you we need to actually include it here somewhere so that's actually included here in the about page import button from components button and then let's remove this console log here let's actually remove this entire thing from the about page and then we need to import it we need to add it here on the page all right so now here on the about route if I inspect the console here you can see we have John Doe right so if I go back let me actually zoom in here a little bit okay so if I go to the home page and we don't see anything now if I go to the about page you can see our button is logging the data from the URL right so this is the easiest way of passing data from one page to another page with the latest next to s13 be careful with making components client components what some people do is they make the whole about because here we're using the button this needs to be the client component but what some people do is they they make it they make this component the client component so the whole page and when you do this when you're importing the button now the button will also become a client component now so this will work but the the downside of this is any other component that you're importing here will now also be a client component right so if you import a component into a client component like here they become a client component automatically right so we don't need to we need we don't need to specify use client here but now we may have other components that that are that could just be fine being server components now that we're importing them here they're also going to be client components now to make sure that you make the you don't make you know components that are so fairly high up in the reactory client components try to confine it to the to the leaves of the tree and or to the edges right so in this case that would be the button here all right so hopefully this solved your issue by the way if this was helpful I'd really appreciate it if you could like And subscribe also check out my courses on CSS and JavaScript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really Master CSS or JavaScript and I will also release other courses soon like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and I hope to see you soon

Channel: ByteGrad

Views: 25,313

Keywords:

Id: o87z9bK7olE

Length: 7min 18sec (438 seconds)

Published: Sat Jul 15 2023