Next.js Data Fetching, Dynamic Routes & Metadata | Nextjs 13

[Music] hello and welcome I'm Dave today we'll learn about data fetching fundamentals with nextjs and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there next JS just released 13.2 and as I discussed in the previous lesson the metadata was changing and we see this now with built-in SEO support so we'll quickly cover those changes and then we'll get started with data fetching fundamentals we're back in the beta docs for next JS and we're going to go ahead and create a new app we don't have anything from the previous lessons one or two that we really need to carry over to number three so we'll just create a new one because there's some changes with next 13.2 I've had a couple of comments with people asking why I'm teach experimental features moving forward while next JS is using 13 going forward and they are constantly incrementing these features and adding some new things so I'll try to cover those if they continue during this series however I'd rather teach the new features than the previous ones because this is the direction that next JS is headed so with that noted let's go ahead and just copy this automatic installation here this npx command that we're going to use in the terminal and let's go over to visual studio code okay I'm in Visual Studio code and I'm in my parent folder you can see it's for the next series folder that I created and I've got lessons one and two here so I'm going to go ahead and create a new app and call it next03 you can call it whatever you want I'm going to open the terminal first and then with this terminal opened I'll just clear out whatever was in here before I'm going to paste in what we just copied and that's npx create next app at latest and then it has the dash dash experimental apply Flags so we can add that new app folder and that's the direction that next.js is headed so I'll press enter it's going to ask me some questions I'll go ahead and expand this up so okay to proceed yes I want to and we're on 13.2.3 right now and 13.2 was just released one week ago so you can see they're constantly incrementing these features what's this project called well I'm going to call it oh I'm sorry not lesson 03 but next O3 to just add to my series then we're going to go with the default selections here so typescript yes eslint yes Source directory no because we're using the new app directory and then the import Alias yes just the default there it will quickly create this project and then we can see a few of the changes once we go into the next O3 folder because I won't leave this full file tree over here I'll go ahead and open up this folder all right I'm in my next O3 folder and if we look over here to the left in the file tree the individual files that we see there's eight of those and those are the same as before when we started a project however you'll notice there are fewer folders there's no longer a Pages directory at all everything is now in the app directory including that API folder that was in the Pages directory and I've had several people ask questions about the API folder right now it has a hello folder and the new route TS file we may eventually get to that but of course that's about an API Ai and right now we're building pages and a website with next.js and that falls under the app directory but it follows the page and layout model that we covered in the previous lesson what I really want to highlight is what I said was changing in lesson two and that is the metadata and I showed how they were going to do it and now you see it is already added to the layout file in the top app directory here we have metadata right here now this is static metadata and we'll learn how to add Dynamic metadata later as well right now though we're using typescript and if we Mouse over this I can see well I should be able to see what type we have there we go and you can see it's an object with the title and description string and that's all it is you could let typescript infer that or now you can go ahead and import the metadata type so I'm going to show you how to do that with import type and then we can say metadata and this is going to come from next and after that you can actually use the metadata type right here if you want to so there's metadata and now if I Mouse over this we should be able to see just a little bit more information it's the interface metadata type you could actually click and look at the definition of that as well but it's going to give all of the different possibilities that you could put in your metadata object so again just to note this replaces the head components that we were adding like head.tsx that no longer exists over here and there's no reason to create it it's no longer supported that is deprecated and we're now using an export of metadata to create the metadata for a full layout this would add this to the full branch and all child branches or you can add this statically to any page that you want to statically create that with and once again I will go over how to generate the dynamic metadata if we're generating Pages dynamically now before we start with data fetching there's just a little bit of setup I want to do so one of the things I want to do is pull the font that the page actually has here I'm going to just copy these three lines I guess four lines two through five right here I'm going to just Ctrl C go back to the layout and now here at the top I'm going to paste those in I'm going to remove the Styles one I just really needed the font ones because this is pulling a Google font in and I haven't really covered how to do that yet but this is exactly what it's doing it's pulling in this enter font from Google and then we need this next line with the subset as well and then back here in the page TS we can see how they apply that also I may need to quickly control F just to search for the word enter and here you can see it applied to the H2 it has class name and then it's enter.classname and I'm going to pull that over Ctrl C that line as well or just that piece of it and go back to the layout and I'm going to apply that to the body just because I want to use that font on everything from and now I want to go back to the root page and as nice as their default rip page looks I want to go ahead and remove just about everything for now and make it very simple for us to work with today so selecting everything between the main elements and I'm just going to put in a couple of extra things here so an H1 that says home page so we know when we're back at the home page for sure and then a paragraph and inside the paragraph I'm going to use a link so we need to import link and we're not using image anymore so up here we can import link and we did this in a previous lesson as well and this link is going to come from next slash link and then here we can use that link put link put the href equal to and we're going to create a user's Branch so we'll go ahead and indicate that and I'll just put users here of course it's not going to work right now we'll need to create that branch and finally while we're not focused on CSS today I'm just going to go into the global CSS us and scroll down here where they have the body area and I'm just going to add some padding to the body overall so it will move everything away from the edge just by one rim and that's good now our initial setup is complete and we're ready to move on to data fetching fundamentals we're now back in the next JS docs and we're at data fetching fundamentals and there are four recommendations that I want to go over because we're going to come back and refer to these as we write our code so the first recommendation is to fetch the data on the server using server components that's a big part of the power of next JS we're going to create these things in advance rather than on the client so we're going to use server components the second thing is to fetch data in parallel that minimizes waterfalls and waterfalls would be fetching one type of data waiting for that and then fetching the next type of data waiting for that and then doing something else so step by step where in parallel you can fetch the data that you need at the same time so one isn't waiting on the other of course course this reduces loading times recommendation 3 for layouts and Pages fetch data where it's used so you may see the same fetch request more than once and that's okay because next JS will automatically dedupe that means deduplicate those requests in a tree so it's going to just request it once even though you might see that request in there more than once so if it's already requested it's going to use that information that it has it's not going to send duplicate requests and recommendation 4 is to use the loading UI which remember we went over the loading.tsx pages you could create to indicate loading for a specific Branch or even a leaf which would be an individual page if you put a loading page in that area however there's also streaming and suspense and if you know what react suspense is that means we can break apart a page load part of the page and then add suspense while the rest of the page loads so that also improves the experience and it progressively renders a page to show the result to the user while the rest of the content loads so these four things we want to keep in mind as we create our code with data fetching okay we're back in Visual Studio code and we're ready to create our users Branch so I'm just going to create a new folder here in the app directory and I'm going to call this users now inside of the users directory I need to create a page.tsx now the first thing I'm going to do here is import the type that we saw before and that is metadata because I'm going to use it as we add the metadata for this page it will just be static metadata like we've already covered so we'll start with our export const then I'll say metadata and the type is metadata and then let's set this equal to an object and I'm just going to set the title here and it's going to be users now below this I'm going to use my es7 Snippets extension and just type RFC to quickly create a functional component let's rename this component even though it is page.tsx we don't have to name the function that I should say that the file is named page.tsx but the functional component inside the file does not have to have that name so I'm going to call this user's page and now the first thing I'm going to want to do inside this component is actually request the users and so to do that I'm going to need to create a library function I don't want to keep that just in here like I've seen others of course just Define a function inside of the same file you can do that however I want to organize my code and possibly be able to reuse that same function again and again without typing it again and again so I'm going to create a library outside of the the app directory so just in the top Parent Directory I'll create a new folder and I'll call it lib and then inside of this we can create our function that we export so a new file here and I'm going to call this get all users.tsx I'll once again start with RFC and just press tab now we have export default function but this is also going to be an async function so I want to add that word at the top as well and now we're going to fetch some data from a website called Json placeholder I've used that in several other tutorials and so some of you may be familiar with that let's go ahead and create the fetch here so I'll start off with const I'll just say response equals await and fetch and now really it would be handy if I could just paste this URL in so I think we should go to the website and I will just get the URL from the browser we're here at the Json placeholder website and you can see in the URL bar it's jsonplaceholder.typicode.com and from there it offers resources I'm just going to click on this slash user's link and it provides 10 users and here we'll see the data that comes up this is just Json data I'm just going to copy this URL out of here to use back in our code now we're also going to come back here and grab one of these objects to create a type for this data as well but first let's just go back to our function and create that all right I'm going to paste in that URL into our Fetch and I'm going to press alt Z so it wraps any code that would extend down to the next line now after that we just need to check to see if we got a good response or not if we received a good response so I'll say if and then res is not okay so res dot ok but it's got the exclamation in front of it which means not and we're going to throw a new error and I'll just say failed to fetch data that works and then after that we're not returning a div with get all users we're actually going to return the response dot Json right there let's bring this down line it up well see if it lines up after I save there we go so that's our basic function for get all users worth noting that I did not put a try catch in here because we're going to use error boundaries if we were creating a project and of course that would catch the error and we would get that response from the error boundary which gives a component allowing the user to try again and we covered that in the previous lesson as well let's go back to our page in the users branch and now we're going to import that function so we will import get all users from our library and you can see how it uses that Nat has the at symbol slash lib slash get all users and now once we've imported that we can actually get that request going this is our server component so it's going to request this as it builds the website so it will not be requesting it as a request this will be a static page it requests this during the build and so we're going to say const users data and now this would be a promise and we need to put the type in there and we don't have the type yet so we'll need to create that then it will be git all users so we should grab that type I'm back at our data here on the Json placeholder website and I'm just going to grab one of the users objects here in the Json data we're going to create our type from that so I'm just copying all of that and then we're going to come back to visual studio code okay we're back in vs code and notice this next enb.d.ts well this is a type definition file right here so we can create a file like this so I'll just highlight this for a moment and we're not going to create anything like you see inside this file but we're going to name it with this same pattern because if we look at our typescript config file it wants to include this file that I just highlighted but also any other file that starts out with this pattern and so we're going to use that same type of pattern so typescript picks up on the file so I'll create a new file here I'll just call it types dot d dot TS and you can see I'm using vs code icons it gets the TS icon over here we can put in definitions so to Define our type user I'm going to say type user then set this equal to an object but I've got this object to paste in now of course I'm not going to use these literal values here I'm going to change these based on the data type but I won't have you wait around and watch me do that okay I've converted everything over now so you can see most everything's a string here and we start with an ID that's a number so I'm just going to save this type now typescript will pick up on this we don't need the word export here or anything else but we'll be able to pull this into our file so This Promise is going to return a user type and then it's going to be an array of users actually and so now we've added our type there but we're not quite finished because what happens is we start requesting that data right away but notice I'm not using the await keyword and then we'll have const users equals a weight users data and of course for a way to work we need to add the keyword async above here for our component as well now let's finish out our page but one thing we need to do is import link once again so I'm going to say import link and that comes from next slash link now that we have that I'll go ahead and finish out the page I'm going to Define some content right here and map over what we expect to receive so I have const content set this equal to I'll use parentheses I'm going to start with a section element so we have a parent element for the entire thing now let's put an H2 here and inside the H2 I'm going to use that link and the link is going to link back to home essentially back to our home page and inside of that I'll just put back to home so that's at the top and now we need to map over our data let me put one line break in there as well so our headers separated just a little bit because I'm not really using any extra CSS here today now inside of this we're going to map over the users and with that map I'll say for each user and inside of this we're going to return because we're down to the next line and I've got I've started a new block scope so we need to use the return statement there and then inside of that I'll once again use parentheses I'll create a fragment here and inside the fragment I'll say paragraph This paragraph is going to need our key though as we map over and let's give that the user.id and then inside of the paragraph we'll once again create a link and inside the link we need to link this to our users so these will be dynamic Pages this href is going to receive some value here let's see what we get we'll have a template literal and it will go to users slash and now I'm going to provide user dot ID and then inside of the link itself what we're linking to Let's link to the user.name which would make more sense than somebody looking at the ID I'm going to press alt Z again so that wraps down then after the paragraph I'm going to go ahead and add one more line break just to separate those so I'm not getting back into any CSS for now and then at the very end here instead of returning this div with a page we're just going to return the content we defined above and so now our users page component should be complete and I almost forgot one other thing I want to add just to demonstrate how this is working with a server component is I'm going to add a console.log statement here and just say hello so we can see where this appears as well with this much complete let's go ahead and open a terminal window we can type npm run Dev just to begin running the program in Dev mode and you can see that we are now at localhost 3000 and I can just control click on this link and it should launch the web page in the browse might take a second to get going yep we see the home page and the link to the users is way down here because we still have some of those Styles applied but if I pull this over to the right maybe I can close the terminal or a few things here in vs code and I could see both at the same time I think if we go to the layout I believe no maybe it's the page here itself and I'll go ahead and hide the file tree I could just remove this main class name styles.main part here of the main element and save and now it should remove that and so now our home page title and our users link is right here at the top let me go ahead and bring this over to the full screen but then I want to go ahead and open up Dev tools and notice we're at the network tab in devtools I'll clear this out let me reload everything and we're in Dev mode so it's going to load several things I wonder if I could make this any taller but doesn't look like it but it loads quite a few things here in Dev mode because that will be different than you would see with a build let's clear this out and now when I Mouse over the users link you see requests happen immediately so it goes ahead and starts pre-fetching that before we've even clicked on it I haven't clicked on it yet okay once I do we should get our data and yes we see all the users names and notice as I moused over I did the first three it tried to request those pages now we haven't actually built the pages yet so we're getting errors for now but if I Mouse over another one for example there we see it for number six as well so it tries to get that data in advance of course we can go ahead and handle these errors and anything that would occur that way but what we should do is just go ahead and create those Dynamic Pages we're back in vs code and now we're going to create a dynamic route that's something we did not previously do when we learned about pages and layouts so let's do that now it's going to be inside of the user's Branch now let's create a new directory and we'll put this in Brackets and now we need to name this whatever we're going to name the parameter the prop that we are passing to our component that is dynamically generated so I'm going to name this user ID because that is what we'll be getting from the param in the URL so now press enter and we have that inside of this let's create a page dot TSX and inside of the page.tsx we're going to create a functional component here so RFC with my es7 Snippets and we'll go ahead and rename this as well and this is going to be for individual users so I'll name this user page so above our functional component I'm going to need to create a type for the params that we're going to receive so I'll just say type params I'm going to set this equal to an object that has params then inside of that it's going to have the user ID which your parameters from your url are always strings so that will be a string here now we can specify that inside of our functional component so we start off with params and then inside of that we're going to receive the user ID and now we need to provide the type so we come out here outside of both of those curly brackets and we'll provide params there so this component is going to fetch data in parallel like the recommendations that we previously went over let's quickly go back and look at those docs now we started our first users component by fetching data on the server and that's what we want to do and this next component is also a server component and we're going to need more data from two different API endpoints and so we're going to fetch data in parallel and not create a waterfall so now back in vs code we need to go ahead and create a couple more functions inside of our lib directory here our library so let's start I'll just highlight the first one and create a new file and we'll just call this get user instead of getting all users we're just going to fetch the data for one user and once again I'll start with RFC and press Tab and then I need to add the async keyword here or our function after that let's go ahead and put in our request so it's going to be const res once again set this equal to a weight fetch and we'll need to get the URL from Json placeholder again let's go ahead and finish out the rest first so I'll say once again if res is not okay then we're going to throw a new error and now we can just say something like failed to fetch user and then after that we need to return the Json once again so we'll say earn res dot Json and we'll add an extra line there and save that's our basic function so now let's just put in the URL to get the specific user we need okay back at the Json placeholder website we can see the resources here and the slash users gave us all 10 users but if we go down and look at routes you can see the example they give if you just put posts 1 which would be the ID afterwards you would just get the post with the ID of one so we could do the same with users and we could just put an ID after it for one for example and that should give us the user so let's try this out inside our browser and yes that gives us just the user so we can just replace that one with Dynamic data in the URL back in Visual Studio code we now know this needs to be a template literal so I'll remove those single quotes and put in back ticks instead paste in the URL that we just received alt Z to wrap that down and we can see the number one here that's what we want to replace with a template literal so here we're going to provide the user ID and that means our function needs to receive the user ID above we already determined that's going to be a string type now we also need to create git user posts so we need all the posts from an individual user I'm just going to copy everything in this file Ctrl a to highlight all control C to copy now I'm going to create this new file over here and call this one get user hosts.tsx inside of this file I'll paste in what I just copied but we'll change the name here to get user hosts it's once again going to receive the user ID alt Z to wrap everything down now it is going to have a different URL but without going back to look at Json placeholder again I can just tell you what the URL will be instead of users here it's going to be posts so we're looking at the posts and then we need to pass the param that says what the user ID is you can do that at with a question mark and then we're going to have user ID equals and then we'll of course have our user ID value and with that created you now know we need to get the post type as well once again I'll do it the same way that I did before for the user go to Json placeholder copy one of the posts and then of course turn that object into a type without having you watch that full process I'll just scroll down here to the types.d.ts and I can paste in the type that I have previously created but you know how I did it the same way as I did with the previous one so we just have a post here with a user ID that is a number which will come into play an ID that's a number and then the title and body that are strings let's go back to our page that we are creating here the individual user ID page that is being created and we need to fetch this data in parallel now that we have created those functions so at the top we should import both of those functions so we will need git user and we also need to import git user posts now that we have those let's request that data in parallel as recommended by next Js we'll start by defining the user data and this will be a promise and we're just receiving an individual user back notice we're not going to use the await keyword here we'll just say get user so it starts the request right away and we'll have an ID however we do need to make this an async function as well because we will eventually await something after that we need to go ahead and create our users posts data as well so let's say user our user just individual user hosts plural data there we go and this will be a promise and it's going to receive back an array of posts so that is our type and we'll set this equal to git user posts and of course we need to pass in the user ID here as well and I noticed this extending off the screen so I'm going to press alt Z just to bring this down now our emphasis here is that we are requesting this data in parallel notice we're not using the await keyword on either one of these requests we just say start both of these requests but then after that one way to do this is to use promise.all so then we could say const and we would be receiving a user and we would be receiving posts or user posts we could name it that be clear and then we could await and we would say promise dot all and then inside of this we first have parentheses then we have our user data and our user hosts data and we could let this then resolve in parallel and we are waiting until we have the data from both but we start the requests at the same time we're not creating a waterfall where we wait on one after the other so then we can complete the component here with the return statement and I'll just change what we currently have there instead I'll use parentheses and then a fragment and inside the fragment I'm going to first have an H2 and inside the H2 we could use the user name and then after that we would say have a different component that we haven't created yet let me create a another line break here but then let's go ahead and put in a component called user posts again has not been created yet so we won't like what we see here with a red squiggly but we'll eventually create the component and we'll set the posts equal to the user posts that we got back then after that we would just go ahead and give the slash because this would retrieve all the posts for that specific user now this approach does work especially after we create the component we need and it is documented in the docs however the recommendation number four actually gives us something that will improve this approach if we look at recommendation number four back here in data fetching fundamentals it says we can use loading UI streaming and suspense to progressively render a page and we could incrementally show results to the user while the rest of the content loads so let's do that with our component so the approach we will take here is to load the user and we'll show the username but then we could use suspense we could wrap our user posts in suspense so we could actually show the username while we're still waiting on the posts and to do that I need to import suspense at the top so we'll import suspense from react and now we can use that in our component and we'll also be changing our promise all approach but first let's just apply suspense down here inside of the component and so inside of the component now after our break I'm just going to put in suspense and then we'll go ahead and of course take the closing suspense and put it after the user post component and then inside of suspense we need a fallback and I'll just provide a simple one here fallback equals and here I'm going to put another H2 and I'll just say loading so that's our simple fallback for the suspense but now inside of users posts we're going to change what we're sending here and we're going to change our approach above so instead of This Promise all which I'll just comment out to leave inside of the resources for the lesson in case you want to refer back to that because it is a valid approach that's documented but so is the one that I'm about to use that follows the recommendation number four and this will be getting our user here we'll just await user data but now we still have a promise for the user post data and that's what we're going to pass down so let's switch this to promise and here this would be the user post data that we're sending down into the user posts component so let's go ahead and create our user post component and to do that I'm going to create a components directory here inside of our route we'll put components and then inside of this components directory we'll go ahead and create a component as we would normally name it I'm just going to name it user post dot TSX now this components route is not available to the public because it doesn't have a page.tsx inside of this directory and that's the way we want to leave this here I'm going to start by typing props again so I'll have type and we'll have props I'm going to set this equal to promise that is being sent down and it is a promise it is a post well it's an array of posts there we go then after we have our type here let's go ahead and create our function RFC and now this is going to be an async function as well because we need to await our promise that we're receiving and so then inside of our props here we'll see that we have a promise and the type is just going to be the props we created before okay now that we're receiving that promise let's go ahead and get our post first thing so we'll say cost posts this is going to equal await that promise that we receive then let's define some content so I'll say content set this equal to hosts.ap over each post and then inside of our map function we will return now I'm going to create an article and this article is going to have a key and that needs to be the post ID as we map over then after that inside of the article we can just use what we want from the post so I'll create another H2 here we'll make a post whoops I need this inside of curly braces post dot title after the H2 I'm going to create a paragraph for the post body and then let me put one more line break in because we're not really styling anything too nicely today this will just add a little separation and then finally at the bottom of the component here instead of the return uh div once again we're just going to return that content that I created so that is our full component not too complicated there but we are receiving that promise from above again it's still requested in parallel but now we're able to incrementally show the results back here in our user page because we can show the username right away and we can use suspense while we're waiting on the post data and this is also shown in the documentation and speaking of documentation you can see we still have an issue here even though we created our user post component we need to import it above let's go ahead and do that user posts and this is going to come from our components.user's post and after I save you'll see there is still an issue and we're going to need to go back to the docs to reference this current issue again we're using beta docs here for next 13.2 as of the making of this video if you're watching this months later this issue should already be resolved but right now it's noted in the docs and I want to highlight it if I Mouse over we've got a typescript problem here it says users post user posts cannot be used as a jsx component well actually there's nothing wrong with what we're doing but we have a typing issue okay we're back in the beta docs under data fetching and then fetching and you can see there's a warning here it says you can use async await in layouts and Pages now they're specifically talking about the file names layout and page or pages.tsx that we've created before but it says there are server components and they are however we're creating a server component that's named user posts as well using async await inside of other components like the one we just created named user post with typescript can cause errors from the response type from jsx it says we are working with the typescript team to resolve this upstream and as a temporary workaround although none of us are probably going to like it you can use this comment line right above your component so that's what we're going to do just copy this right here we'll put it above the component for now and realize this probably will not be an issue a few months after this video is created so if you're not receiving an error right now the way things are then you don't even have to do this but let's go back to visual studio code and apply this so back in vs code I'm just going to put that line right above what we had and now of course our typescript error is gone it tells it to basically ignore what it's experiencing but we have created a valid server component it just doesn't have the name page TSX or layout.tsx so now that we've created our Dynamic routes with the user ID and we're receiving that as a param that user ID comes in from the URL then we get that and pass it into these fetch functions that are created here in parallel and we get that data and then of course we use suspense to incrementally show the data we get so we have the user information and then instead of using that loading.tsx page that would apply to the entire page or the entire Branch inside of here we're just breaking this down to part of the page using suspense and then we're going to show that user post data so let's see how it all works back in the browser okay we're back in the browser I'm going to clear out the network tab we'll go back to home here and I'll even just hold down shift and refresh so we get everything new and of course we're still in Dev mode so we have a lot of information coming here with network requests I can clear out now I'll just Mouse over the users link and we can see it already requested it so when I click on it there it is and we've got all of the users now we should no longer see errors when I start to Mouse over these user IDs we're seeing those requests and we're seeing the data of course that comes with those requests so it's pre-fetching those before I've even clicked now let me go to one of the users and there we have the username and then we have all of the user posts the title and the body of each of those posts so everything's working as we expect it to but back at the beginning of the tutorial if you remember we covered metadata and we only covered the static metadata I said we would cover how to generate Dynamic metadata as well and notice for our user Leanne Graham the title of the page is still create next app just like we had in the layout there at the beginning for the overall app so let's go ahead and create individual information for each user when we go back to our users list remember we created some static metadata and of course that applied the user title up above and that works just fine fine now let's go back to the code and create some Dynamic metadata we're back in Visual Studio code and we're back at our user page component that is inside of the dynamic route and we need to create some Dynamic metadata what we're going to do is create that above I can do it after the params because we're going to need that with this function as well we'll say export async function and the function we're going to create is called generate metadata and now it's going to receive the same params that our user page component receives so I could just copy all of that and paste it right inside of our generate metadata function as well because it also needs the user ID to get that specific metadata and after we do this it's going to have a promise and this is going to be metadata that we get here now we haven't imported that metadata at the top yet so let's go ahead and do that import as well so we'll say import type and that is metadata and that comes from next okay now that we have that let's continue creating the function here so afterwards we need curly braces and then inside of this function we're going to need that same user data that we got in the function below now remember one of those recommendations from next was to go ahead and request data where you need it because it will automatically de-duplicate these requests and that applies to this generate metadata function as well so because we have the request here and the request here does not mean that two requests will be issued they will be deduplicated okay after that let's go ahead and get our user and once again that is the user type and we'll set that equal to a weight user data and now that we have our user data we can return our metadata so we're going to return and then I'll have a title and inside of this I'll say user.name then I'm going to have a description as well and here I'll use a template literal so I can say this is the page of and once again I'll just use the user.name here so that creates our metadata so we'll apply this and then let's go back to the browser and see if it applies to each one of our Dynamic Pages I'm back in the browser and we're still running our code in Dev mode I can clear out the network request so we can see them happen once again I'll go to users after that let's go to Leanne Graham and now if we look at the top tab here it says Leanne Graham and I think if we're to inspect the page we could also see that other metadata that we added so let's look inside the head element here as we inspect scroll down and we see the title is Leanne Graham and then there is a meta description and it says this is the page of Leanne Graham so our Dynamic metadata is being generated as we expect it to be all right we've come a long way and next time we're going to dive deeper into fetching with our server components remember these are all server components right now and we're going to look at the differences you can control including static site generation server side rendering and even the powerful incremental static regeneration strategy remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 42,294

Keywords: Next.js Data Fetching, next.js, nextjs, next.js fetch, nextjs fetch, next.js data fetching, nextjs data fetching, next.js fetching, nextjs fetching, next.js dynamic routing, nextjs dynamic routing, next.js dynamic routes, nextjs dynamic routes, next.js metadata, nextjs metadata, next.js 13, nextjs 13, next.js static metadata, next.js dynamic metadata, next.js tutorial, nextjs tutorial, nextjs ts tutorial, next js, nextjs 13 fetching, next.js fetching data

Id: 1n7slbDB1bQ

Length: 43min 8sec (2588 seconds)

Published: Fri Mar 03 2023