Next.js vs React – What's the difference?

what's the difference between nextjs and react well that's what you'll learn in this course from ANA Kari she helps developers level up their careers and she'll help you level up in this course nexs is a framework versus react is a library you can't necessarily compare the two as it's not Apples to Apples comparison but you may always wonder what would life look like without a framework what does a framework provide and should you go with a framework or not so in this specific course you will learn next year and the power that it provides us as it is a framework and compare that to react alongside vat and vat is a really powerful front end tool towards the end of this course you will learn what the difference between a framework and a library is you will learn different data fetching mechanisms and knowing which one to pick for your project and for your page you will learn different rendering strategies you will learn how to build a performance app and what goes behind the scenes of building a performant app you will also learn search engine optimization which is CEO and also how should you get started with learning react all of this will be covered in this specific video along the way you will also pick up skills with taen CSS and also Shad CN UI Library which is getting really popular these days alongside learning complex topics in depth in react wheat and nextjs everything that you need is right here and I will be walking you through each step one by one so what are we waiting for let's get started now if you are interested in following along in getting all the visuals as well as all the links that I have shared in this specific course then check out this specific link this is essentially a cheat sheet and a visual explanation of all the key next year's react and readed Concepts that I'm sharing in this specific course so if you are interested check out the link in the description or as a pin comment for downloading the specific cheat sheet now this cheat sheet is really good it has all the visuals and links that I've shared in the specific course alongside GitHub so you can follow along as I teach this course so check out if you're interested now whenever you are ready to level up your next year skills I have some good news I'm running a exclusive Hands-On workshop for you to take your next year's knowledge to the next level it will teach you everything that you need to know to design build and deploy a fullstack app with nextjs it is a live Workshop so you will get direct access to me and I will answer any questions that you may have as well Plus at the same time you will get lots of exercises to learn different Topics in next year s you will be divided into breakout rooms so you can learn from your Workshop peers as well and learn complex topics together and if you get stuck don't worry because I'm there to help guide you as well Additionally you can show off your certificate of completion at your workplace or on LinkedIn to Showcase that are a certified next year's developer at the same time I will be sharing a lot that I couldn't necessarily share in this specific crash course in that Workshop so if you're interested please sign up to the weight list as the weight list folks get exclusive launch discounts and special bonuses as well so sign up to the weight list and I will see you in the workshop so first let's try to understand the difference between a library and a framework now what exactly is a library versus a framework this specific visual really does a great job at describing what a library does and so does a framework now library and framework both are reusable pieces of code a framework will provide the overall structure a skeleton for your application versus a library is going to provide you reusable pieces that you can utilize and use your creativity to do whatever you want using the analogy of luggers on the left hand side a library is like a box of assorted Lego pieces without any Specific Instructions so as you can see here they're trying to figure out what exactly they can do using the creativity they have the full freedom to use the Lego pieces to create whatever model they like they can use whatever custom designs as per their needs but on the right hand side where say a framework is like a Lego set with a predefined model of instructions you follow the instructions what's on the box and create whatever you want to create now there is little customizations in a framework but because the instructions are so clear you know exactly what you need to do on the right hand side in the framework you're going to think less about a lot of the details in your application on the right hand side in the framework a lot of the hard decisions are made for you so you don't have to worry about making those decisions yourself versus on the left hand side in the library you do have to make those decisions yourself which can be harder depending on your application so in our case nextjs is a framework versus react is a library so nextjs gives you a lot out of the box such as built-in routing different data fetching mechanisms really rich metadata API for search engine optimization and a lot more so you you just use those specific apis and customize and build your application versus react is a library so we need something called as wheat alongside react so that we can compare the two that is react creating a react application with wheed versus with nextjs which is a framework and we will talk about that in depth a bit later as well but this is what a difference between a library and a framework is so what exactly is react versus nextjs well react is a really popular Library built by Facebook it is a library for not just the web but also for building native user interfaces if you want to build a mobile app you can definitely do that with react using react native react has definitely onboarded many many developers because the development is so much easier and faster because of react with react you can create UI that is user interfaces if you are familiar with other programming languages then you can think of react as a view layer Whatever Gets displayed to the user is what we'll be using react for you can create different user interfaces from a concept called as components and components are essentially individual repeatable pieces that combine together and are known as components for example in in this case thumbnail is a component like button is a component but a component can also comprise of different components and we can combine them all together to form different screens and pages and so on now react lets you build seamless applications and that is also a reason why NEX GS is in fact built on top of react now you can write components with different code and react has a special rendering mechanism to know when exactly to update what part of the UI so react is pretty amazing on the on the other hand nextjs is in fact a react framework for the web it is a framework that is built on top of react I also like to say it's the production framework for react and you will learn why in a bit now next GS is a full stack framework so just like we talked about how react is the view layer nextjs not just allows us to build the front end but it also allows us to build the back end and that is why it is a full stack framework in nextjs you can do a lot for example for example you in order for you to add routing between Pages next yes provides us with a file system based router that we can definitely use and we will learn all about that later next yes also gives us the ability to fetch data in different ways so it also gives us allows us to do client side rendering as well as server side rendering which we'll talk about in a second Now search engine optimization is really important in your application if that specific app needs to rank higher on search engines just Google then in that case nexs also offers us with a really powerful metad data API so that you can get improved SEO and web sharability as well now nextjs does a lot for us nextjs also has a few special components that we can use that the fact that we use them means that we get additional performance benefits so this is what a framework does a framework does give you a lot of magic out of the box so you can focus on building seamless applications now one topic we should definitely talk about in nextjs is the difference between a spa work and a static side generation workflow Spa means single page application whenever you think of react you would think of single page application this means that the page is only rendered on the browser and the browser just displays it on the page now it's not great for search engine optimization because if you defin if you do inspect the browser elements for example the page Source then you will not necessarily see anything in there so when Bots are going to crawl your website it's not going to discover any cont content on the page so browsers on demand serve the page to the user so if you take a look at this specific diagram let's say this is a developer writing his blog on cookies because they really love cookies and they ship the blog code to the server on I love cookies.com now in a single page application for example they will ship the website blog to the server and then every time the user asks for I love cookies.com either through search engines or by going to I love cookies.com directly the server is going to say hey hey sure let me produce the HTML on demand and give it to you let me produce the HTML JavaScript on demand and give it to you now let's say there's one more user that comes up and asks for I love cookies.com the server is going to repeat the process and regenerate again the HTML on demand and give it to the browser the browser can render it on the page now this process can be really slow because browser is doing things on Demand versus in a static side generation workflow which is what nextjs is really powerful for or you would also call that as pre PR rendering where we are pre-rendering the pages in this case if a developer writes his blog on cookies builds his code and ship those blog files to the server on I love cookies.com and shares that code and shares the HTML to the CDN which is a Content delivery Network so what this developer is going to do or what next year is going to help this developer do is that they're going to say hey I've written these 10 block post let's just pre-download them and let's just store them on our nearest server this way let's say you are asking for data from let's say Hong Kong or United States and the server closest to you is going to get called and going to they are going to give you the HTML that's already pregenerated for that specific block on top in in a spa workflow this is done on Demand versus in an SSG workflow the work is already done for you all the CDN does is that it returns that predefined work so when the user asks for I love cookies.com the server is already going to send you the pre-built files and they're just like here you go this means the response time the initial page load is going to be really fast and when search engines look for I love cookies.com they're going to get all the HTML code embedded of the blog this means that I love cookies.com is going to get discovered on different search engines and it's going to make the site really fast as well so that is the difference between a spa workflow and a static side generation workflow also known as pre-rendering now react is popularly know known for spa versus nextjs is popularly known for pre-rendering so we cannot necessarily compare react with nextjs because we cannot compare a library with a framework when in fact next year's leverages react as a library but what we are going to do in this specific course is we are going to compare something called as wheat with react which gives you the tooling necessary that whenever we cannot pick a framework we know how to configure our application and depending on your use case you can decide hey should I go with the framework or not and also you will learn the differences so even if you do go with the framework you will know what the other route is as well so weed is a really powerful Next Generation front end tooling it does provide you with lightning fast HMR which means that anytime you make changes in your files in your local file system those changes are immediately available to you on the browser you don't need to refresh the page or do anything of that sort now V also has support for typescript jsx CSS and a lot more but at the same time V also uses a rollup build which makes our development a lot faster and rollup is essentially a JavaScript module bundler that will compile all your code and make it really fast as you ship it to the browser for production and also during development as it already has a really powerful bundler which will bundle all your specific code now Ved with rollup gives you a plug-in system so we can basically plug in play exactly all the things we want in our application now one disadvantage of using a framework like nextjs is that a lot of the decisions are made for us so if we want to opt out of those decisions we can't really because it's going to be a lot harder for us to do that so wheat is really powerful so that's what we would be doing throughout this course we would be essentially comparing and trying to see hey if a framework does provide us this then what does wheat with react give us at the same time we will also be checking hey what features do we really want in our app and what can a framework provide versus what a non-framework versus what Feed plus react will provide us as well this way we can compare and have a little bit of fun while building our application as well my goal with this specific course is to help you decide and give you a solid understanding for how all of this works together now to understand and learn the difference between the two next year and also react plus wheat we will be building an app a recipe planner called as tasty NEX and tasty react so let me quickly give you a demo now these two apps are identical except minor design tweaks now on this specific page you will see a list of recipes of from different Cuisines so on the page you will see a list of different recipes that we pull from an API now when we click on any specific recipe you will read more details about the recipe as the name what is a prep time and cook time difficulty level ingredients and instructions alongside an image if you go back to all recipes then you should see all the different recipes on the page as well you will also be able to filter based on quisine such as Asian American Greek Italian Indian and so on so these are all the different recipes that you see on the page that we are retrieving from the API so now let's say we were to shrink the size of the viewport then this app is fully responsive and we change from four columns to three columns two columns and one columns based on the viewport size now the app is fully responsive on the recipe page as well so it's easily readable on mobile and also on different device sizes now if you go back to all recipes this is an identical app with the tasty react app wherein we will be building these cool gradients as well all of this in t CSS and all the different components that you see on the page are using the Shad CN UI Library so you will be learning Shad CN UI as well and also we will be using the latest and greatest next year's features such as client and server components and so on so this app is fully server rendered versus this app is not and we will learn the differences of the between the two in this course as well and you will be learning all about building a really performant app in this specific course so I'm really excited to get started so let's dive in so now let's take a look at how we can start a new project in react now the docs definitely recommend to use Frameworks in fact they recommend a few Frameworks that you can use with react one is nextjs other one is remix Gatsby you want to use Expo for react native applications and so on now the docs they highly recommend using a framework because they say that you by starting with the framework you can get started with react quickly and avoid essentially building your own framework later which is a valid point so if we take a look at this specific section where the question is can I use react without a framework they say you can definitely use react without a framework however if you're building a new app they recommend using a framework because even if you don't need routing or data fetching at first you will likely want to add some libraries for them as the JavaScript bundle grows with every new feature you might have to figure out how to split the code for every route individually now just to summarize all of this for you what they're saying is react Frameworks they do a lot for you so as a beginner react Dev or as you're starting a new project you don't need to worry about all the bells and whistles that a framework provides you so they highly recommend just going for a framework when when it comes to react but let's say we still don't want a user framework and we have a specific use case or we don't want to TI be tied to a specific Cloud platform and so on then in that case they basically recommend that hey you can roll up your own setup with react grab react and react Dom from npm set up your custom build process with a bundler like wheat and or parcel and add other tools as you need need them for routing static generation or service side rendering and more so that's exactly what they tell us and that's what we are going to do in this specific course we going to grab readed as a bundler with react and add any specific capabilities as we want as we build our app further let's talk about the text tack that we going to use we going to definitely use wheat with react for example to start a project to create a project we obviously going to use nextjs to as a framework option with react and then for styling our application we are going to use a specific Library called as Shad CN Shaden UI has become so popular it's because it allows you to build your component library now Shaden Library uses tailin CSS underneath it so we will be using tailin CSS to style our application so you will be learning a bit of Tailwind along the way as well but let me quickly talk about why we using Shard CM now as we build our application we don't want to start from scratch because we mainly want to focus on the specific crash course and the learnings of that so what we are going to do is let's say for this spe this specific batch component this card component or anything else that we need in our app we are mainly going to stick with using components from Shaden now keep this in mind take a look at the docs it says it right here Shad CN is not a component Library it is a collection of reusable components that you can copy paste in your apps this means these are beautifully designed components that you can mainly just copy paste in your application so you only you will only add that specific component and it will create a folder for you with that specific component code in it so if you look at your package Json there won't be any card in of Shad CN from it because the motive with shad CN UI is that it's going to give you all these reusable components that you can just copy paste in your code and just right away use it it's not going to be installed as a dependency so we can make whatever changes we want and we we can customize it however we like because the base is already provided to us plus it's open source and accessible so it's really awesome so for example from this list we're going to use the card component and all we're going to do is use this command to add card and we also going to use the badge component to display all the different Cuisines as well at the same time because it uses Tailwind we are going to build our application further with Tailwind so the rest of our page whatever we see on this specific page or this page all of it is going to be built using taen CSS now let's go ahead and create our react application with wheat now now if you head over to the getting started section and if you scroll down there are there's an option for scaffolding your first read project here let's just copy this specific command and we have two options we could just copy this command and follow the prompts or we could also just select the react as a template for example but let's just do this and see what the prompts are so if you head over to our terminal I've kind of divided a terminal into two halves the first one we are going to set up a react with wheat and the bottom one we'll set up our nextjs so here let's just paste what we copied and now we're going to call this tasty react because this is the application that we are building where we display the list of recipes and have the ability to filter them and view more information and follow the instructions of those recipes now you can call this whatever you like but I'm going to call this tasty react now here let's just go with react as an option I'm going to expand this a little bit but let's just go with react as an option here when it comes to selecting a framework at the same time we are going to select typescript plus S swc as an option so we definitely want typescript in our project but we also also need s swc now s swc is a extensible rust based platform so it will help us in compiling and bundling and it's 20 times faster than Babble so we can we can basically compile and bundle our JavaScript code in in a much faster manner so since it's built on top of rust it's really fast as well so that's what that's the option we going to select and now let's just change the directory npm install that will install all the packages for us to get get started and once it's done we are going to run the development server now our V plus react application is ready to go and now look at that you can see that there is a counter example with V plus react ready to go which is pretty awesome now let's see what the process looks like for next CHS now if you head over to the docs and head over to the getting started section here make sure you follow the system requirements making sure you have the latest nodejs version and any of these operating systems so let's just go here and copy this specific command now create next stab is a CLI tool that gives you a bunch of prompts just like we saw with beat to bootst our application so now here again if we go to the bottom section of the terminal just going to paste what we copied and here let's just call this tasty next we're going to use typescript we're going to use es lent we are going to use tailin CSS we're just going with the defaults at this point and we will talk about app router later a bit later but let just for now say yes and we don't want to customize anything again this is going to reinstall the dependency now one difference here is that with wheat we had to go ahead and run npm install versus with next this create next app already installs it for us so all we can do is just go to Tasty next and then just run our development server it starts off our project on Local Host 3001 now there you go we have our next GS application also ready to go what we need to do is add Shad CN in our application now now if we go to the installation section we can pick to these two Frameworks we could go with Ved or we could go with nextjs now let's just go ahead and add shat C and to be now remember we have already created a react project so we are going to only add Tailwind with all these different configurations to our project but before we do that let me just give you a quick walkth through of the projects that we have already set up so now let's just stop the server on in both cases and open up the application in Visual Studio code now Visual Studio code is going to be the editor of my choice but feel free to use whatever you like and here let's just open up vs code so now let's just go ahead and check out our Ved with react application now this project is tasty react which is configured with Ved plus react so here we have a public folder where we will sto be storing all our assets node modules has all our packages needed to bootstrap the specific application then we have a source directory now again there's a specific assets folder which you can add any of your assets to as well alongside the public now if we go to the app. TSX this is the main page of our application remember we saw the counter example this is exactly where it is created so app. TSX is the main file is the main page of our app and it also has a app. CSS with all the specific CSS code as well and then we have a index. CSS file which right now does not have anything configured but has a overall look and feel this is where we would be adding tailin CSS then we have the main. DSX file now the difference between an xjs application versus a single page application as this specific one is that it is always going to create the react Dom on the specific root element over here and it's going to render the app now app is the main page of application but this is how usually it works and this specific root element is in fact declared over here so you have the div ID so all your JavaScript code all your HTML code essentially is going going to be mounted here is what it's saying over there right here then we have the index.html file which has our HTML page itself so you can modify it later if you want and then this is where our JavaScript code that's going to get bundled and minified and shown here then we have the TS config file with with configuration for a project and then we also have a Ved config file so now weed config file works really well with the plug-in system from rollup now if we click on this specific option you you can see all the different ways we can configure this specific V config file now remember I said that V uses rollup to power the plug-in system this is why we have react as a plug-in now let's say we want to add some other plug-in here for example then we could just do that in the plugins array and V has a bunch of different plugins that we can use which gives us the plugin play optionality that we want now again we are importing react from plugin react s swc and and then Define config which is this spef function right here that's getting exported from the Ved package itself so this is how the tasty react project works now let's go ahead and take a look at the next year's project now if you take a look at next tasty next we have a directory here called as the directory now directory will have all our build files there so whenever nextjs runs our development server all the files that get built are right here and nextjs us different Json files to map all the different individual files then we have the app directory the app directory is basically the app router that we talked about in nextjs and that's why we have the app directory now the nextjs has one more router that we will talk about in the routing section as well but for now in the app directory we have the page. TSX file now this page. TSX file is essentially the page that we see on our Local Host 3001 so this specific page will have all the code for it so next G uses spe specific file names as special files for example page. TSX would mean that this is the index page in our application similarly we have layout that basically surrounds our entire application it wraps our entire application and here we have the HTML document for example and the children would be all the individual pages that we would declare in our app because layout is in fact the root layout now we also have a specific font setup here called as inter again we will take a look at fonts a bit later and we also have the metadata API which where we can configure our specific title and description for SEO purposes later but layout is essentially the root layout that wraps our entire application then we have the global CSS file which has our Global CSS configuration and this is where we are setting up Tailwind now keep this in mind in V with react we still need to add Tailwind but setting up this specific project in the create next T prompt we already set yes for tailin that's why tailin is already preconfigured which is pretty awesome so one last step for us to configure but these are the three things that we need for tailin this the code for Global CSS then in the public folder is where all the public assets would live for example then at the same time we have a next config file which where we will configure specific values for our next year's project that we will take a look at later then we have the post CSS config file so that we can basically add CSS code inside JavaScript it's for compiling CSS code with JavaScript and this is mainly used for tailin then we have the tailin config file which is a global tailin configuration whenever you want to extend the existing design system of tailin then you can definitely use this specific file as well now I do have a course on tailin that you may want to check out right here which is a tailin CSS crash course if you're interested this specific crash course will give you a in-depth overview of how Tailwind works so if you're if you're interested definitely check that out but going back to our project this is where all our Tailwind styles are set up and how where we would extend the existing design system or even replace it if you like then we have the TS config file which has our configuration for our project now this is how all the project files are set up whenever we bootstrapped our Ved plus react application alongside our nextjs application now as we saw earlier the app router comes with taen CSS as a CSS framework by default as we chose in while setting up our project so let me quickly give you a walkthr of tvin CSS so you know exactly how to style our application and we'll be able to follow along as well so for example here tvin CSS is essentially a utility first CSS framework now if you want to learn tailin in depth then I also have a free crash course for you on tailin CSS that you should also check out on my channel right here if you want to Lear in dep then definitely check out the tillin crash course on my channel now tillin is a utility first CSS framework so for example instead of typing display Flex in a CSS file all you're going to do is write Flex instead of writing padding top is 4 pixel or 16 pixel or one r or two r or so on you are going to write PT hyphen 4 so that is the beauty of tailin it these are all different utilities now you can think of these utilities as essentially JavaScript functions that return the specific CSS for us for example essentially that's what they are now the reason why delin has gained so much popularity because you don't need to create a separate file Al together you can just inline the CSS here so for example if you hover over this then you have display Flex here now if you want to install the specific plug-in that I do have then you can go to extensions in Visual Studio code and then look for tailin CSS intelligence and you will be able to get the intence needed to style your application now heading back to page. TSX if you see Minh screen then it's 100 VH which is 100 viewport so it sets the Min height as well so these are different utilities that tilin provides us so if you head to getting started you can see the utility first fundamentals here and why they're important but if we take a look at responsive design then dilin does provide us a break Point prefix as well so that we can style our application for different viewports so for example by default tailin focuses on mobile and then we go to desktop for example over here p24 applies to all viewports but if I'll specifically say I want p24 to apply to mobile but let's say I want p64 to apply to let's say desktop then I can just add large as a prefix pin also provides us with a design system out of the box so it gives us a bunch of colors already all these different swatches that we can just use so for example if I want to change the background color of the page to BG I don't know gray 800 then I could easily do that thanks to tailin but at the same time I can change this to Pink as well if I want but it provides us on a scale from of 50 to 900 or 950 these are all the different colors that tailin provides us and it goes all the way to 950 now it also provides as a spacing scale if you want to learn anything about getting good at building really good design then you need to make sure that you have a really good spacing scale now we don't need to worry about it because tailin automatically provides us for us which is this default spacing scale for example if you use PX4 then it means it's 16 pixel or one ram and so on so as you saw over here p24 is adding a padding of six Ram here but if I add say PX then it will only add padding left and padding right and if I want only on the y axis then I can just say py so all these utilities are really cool and really great and you will learn more tillin as we build our application further but keep this in mind that I will be providing you all the tailin Sal so you know exactly how they work but I won't be necessarily going in depth in tail so now let's go ahead and set up shat CN in our projects now again we have already created this specific react project with v but now let's go ahead and add Tailwind to our V plus react project let's just copy this and paste it right here similarly there's one more command that we need to initialize Tailwind let's copy that as well now let's initialize tailwind and next let's just add the following code that they recommend us in our TS config file where we are configuring all how our project we are configuring our project so in the TS config file let's go ahead and add the base URL and paths here you're basically saying that the paths anytime that we import it's going anytime we import using at at the rate it's going to resolve it to Source slash whatever now next we need to install the types for node to the Ved types for node and also we need to configure the Alias and the Ved config file as well so just copy this and then paste it now let's also just go ahead and copy how how we can resolve the aliases because we already have everything we also need to import path from path now let's just go to Ved config file and here let's just paste it and we need path so path is going to come from path we can just import path from path there you go now that we have the path added let's just go ahead and run the Shad CN UI init command to set up our project just copy this and now let's just go go here and paste it now this is going to initialize our shat CN UI components that we want and the global configuration for how components would be managed so would you like to use scripes script yes we're going to go with the default style we're going to use the base color now if you take a look at here they also tell us how to answer these questions too so for the global CSS file we're just going to copy this then we will be using CSS variables and the answer is yes then we are going to use no where is your tailin config file let's just copy what they have here where is your located it's right here then the aliases for components are going to be at at theate SL components so let's just paste that similarly the utils are just going to be these utils and then are you going to use react server components the answer is no and write configurations to components or Json now this is the Json file which will manage all our components so we're going to just say yes now again it's writing components. Json file and initializing our project now let's go ahead and check our project so now we have the components folder as you see here but we also have the components or Json file with the different aliases at the same time we have a rough schema for how where all the files are for shard CN to manage now let's just go and test it out by adding a button component so let's just copy this let's head over to the terminal and add shat CN button now that we add this Watch What Happens now here in the components folder now we have a UI folder and it has a button. TSX now remember in package so we not going to see a like an import for button but in fact we have the entire code for button literally pasted right here this means we can modify this button however we like now this specific button has different VAR variants such as default destructive outline secondary and so on so if you want to use that we can as well now let's just go and use this button in app. TSX now again honestly we don't even need need all of this so we can just pretty much get rid of it and these as well and similarly in index.ts we can CSS we can give everything as is but in app. CSS we don't need any of this so let's just get rid of that as well and now what we can do is just add the button from UI components button from shat cm and I'll just say hi hi there so this specific button is added so now let's just go ahead and check out our app so now here if we refresh the page nothing happens because our app is not running yet so let's just run the app now now let's just go ahead and refresh the page and look at that hi there is right there that means Shad CN components have been installed successfully now alongside button we also want badge and card so let's just add that as well so let's just copy this and add card same time let's add badge as well now you can see card and badge are already added here so we we are good to go now let's just go ahead and install shat CN with nextjs so if we go to the dogs and in the installation section this time let's select nextjs as a framework and again we already have the project so all we need to do is initialize shat CN UI in nextjs now here let's just copy what we pasted initialize the UI let's go with the default style let's go with slate would you like to use CSS variables yes and it's going to write components. Json now let's just go ahead and also add card as well as badge here as well at the same time we also need button so now let's just go ahead and check out chat CN right here so we have the components directory we have badge button and card ready to go and we also have a components. Json file which is pretty awesome and now if we go to page. TSX again we can just pretty much get rid of all of this so we don't even need it and now what we're going to do is just use button just to test out that shat CN is configured you can just call this hi there get rid of image import unused now let's just go ahead and restart the server now let's just refresh this page really quickly and look at that hi there sh CN button is also configured here that's exactly how you would configure Shard CN in nextjs versus Wii specific setup it was pretty much the same except that we had to install Tailwind in V plus react versus with nextjs it was already preconfigured at the same time the setup was a little bit simpler with nextjs than it was with beat plus react but more or less it was pretty pretty much the same so it felt like the almost like the same experience so no complaints here let's go ahead and add routes inside of our application so for example whenever we click on any of the recipe card then we definitely need to route to another route called as/ recipe SL1 and remember tasty react as well as tasty next are identical applications with maybe little minor CSS changes but majority of the functionality is pretty much the same so the same routing is also needed inside of next year as well when we route to/ res /1 at the same time when we click on back to all recipes then get taken back to the homepage similarly if we go to the recipe page and if you click on the nav bar and click on tasty next then we also get taken back to the homepage that's pretty much the functionality that we have here so routing is something that's really important and one of the most fundamental things that you need inside of any application so when it comes to routing with react and weat we have a few options so first we can go with a really popular Library called as react router now react router is one of my favorite libraries and something that I have used for many many projects and I have really used that in production applications and this specific library has scaled really well so there's definitely react router as an option then we also have another option called as wi now W is essentially a do one thing do it well Ved plug-in where it also offers us routing capabilities so for example it also uses a file system based routing that that nextjs offers as well as well so we can definitely use W with be to configure application and get routing to now W doesn't just give us routing it also gives us and basically is identical to what a framework provides us different data fetching capabilities and so on we won't be using white but know that this is a viable option that you can use alongside we with react as well we will be sticking to using react router now when it comes to react router we have a few different options and few different routers for different scenarios that we could use in application for example these are the four different types of routers that react router offers us one is the create browser router then we have the create memory router create hash router and create static router create browser routers is what we would use and is the recommended router for all react router projects so this is what we would be using but you would use create memory router for testing and component development essentially like for example when you're using story book you would use something called as create hash router for example when you're configuring a web server and then you would use something called as create static router but again you are rendering things on your server for example nodejs and so on again this is more for server side but we will be using something called as create browser router so if we go to the documentation for browser router what it does it stores the current location in the browser's address bar with using clean URLs and navigates using browser's built-in history stack because browser has a history stack already that's what it utilizes to route between pages so that's what we would be using in this specific project but now on the other hand but when it comes to using nextjs nextjs uses a file system based router this means that whenever you create a new file with that specific name then you will be able to route to it so you can Define different routes inside of next GS and those routes are also called as route segments so if we take a look at this specific diagram whenever you want to route to the index page it's called as the index route then you would just create a new file called as page. TSX which is already what we saw as well for example we have a page. TSX inside the app directory but then whenever you want to create a dynamic route which means the slug is going to be different what I mean by that is let's say we go from one card to the other then this value is going to change right now it's one but if you go to some other card it's two and so on so that specific value is different and that's what a dynamic route is wherein this specific ID which which would be the recipe ID would be different so what we would need to do is create a page. DSX file by creating box brackets inside of recipes and then creating a folder with box brackets so that's what a file system based router does all you need to do is create new files and then you you would be able to route to them so there is no there are no multiple options for creating different routers in xjs but in xjs there are two different types of routers one is the app router and the other one is the pages router now remember when we bootstrapped our next year's project we selected the app router because app router is the default router right now inside of nextjs but before app router came along we had something called as the pages router in the pages router it's it was still a file system based router but the functionality that you get in this that specific router was quite different with app router we get capabilities like react server components and client components the apis are slightly different with the app router and all the new features are now available inside app router this does not mean that pag router is outdated or deprecated or Legacy in any way Pages router is still used by many many companies all across the world this is really important that if you are using Pages router it's completely fine cuz many applications are built using nextjs with the pages router but as the react team partnered with the nextjs team and we had special capabilities for react server components and client components exclusively available in nextjs and the way you create components changes inside of nextjs with app router that is why a new router was born called as app router so if you want to look for into transitioning from Pages router to app router do it slowly and do it one route at a time because you can still have app pages router working alongside app router as you migrate those different routes but that's how routing Works inside of next year in our specific project we will be definitely sticking with AB router as it is the latest one and it has all the recommended features that we're looking for so if you're starting a new project I highly recommend using the app router itself now let's go ahead and set up a browser router again we want one route which is called as the index route this is more of index.js Convention of using page. TSX we'll still be using the same terms for index route and dynamic route and react router as well so what we are going to do is again we already have create route but we are going already have create route here but we are going to create a browser router and wrap it where we Mount our application so let's just copy this and now let's just close all of this cuz we don't need it and now inside of our main.ts X let's just wrap app with browser router now in order for us to use browser router we need to install it so let's just go to so here again we can just install these things to get the route react router just copy this head over to the terminal and add react router inside of tasty react and also let's just restart the server now what we can do is just go ahead and import browser router just go ahead to our documentation and import browser router from react router Dom all right so now we have browser router ready to go but now if we go inside app right now we have a button there but let's just make sure that now app is the central place where we Define all our routes means if you take a look here we have these specific routes so what we are going to do is instead of button let's just get rid of it let's just Define routes here now we are going to import routes from react router same route as well from react router now this means that this is the default route but what we want to do is we want to use the element property inside of react router and let's create a new page called as the home page now even though app is hosting all the routes let's just separate the pages out so what we can do is inside of source whoops inside of source directory let's just go ahead and create a new pages folder and here let's just create a homepage now this is where our code for recipes will be located so let's just call this homepage now again what we can do is we can just use the button that we had over here and let's just say hi I am home from Shad CN so everything works as expected but here let's just import homepage as well but now this is needs this needs to be a react we need to declare it here so this needs to be a react node so let's just declare it here as well so if everything works as expected then we should see hi I'm home here which is amazing but we don't just need one route we actually need two so whenever we go to another route we need SL recipes SL one so what we can so what we can do over here is let's just create a dynamic route and the way you would do that is by saying recipe SL colon recipe ID and this recipe ID is the dynamic segment inside the specific URL inside a specific route and now instead of homepage we're just going to create a new page called as the recipe page now here inside of homepage let's just call this recipe page. DSX again let's just create a new functional component let's just call this recipe page and now let's just say hi I am a recipe beautiful now we have a recipe page as well as we have a homepage so let's just go ahead and import recipe page here this where we saying the recipe Pages go here so let's just go ahead and try it out so now if we go back to our app if we let's say go to slash recipes slash one you can see we get hi I'm a recipe let's say I just go to whatever ID it should still take us to SL High a recipe page because this specific value is dynamic let's say I go to/ recipes page let's see what happens nothing happens it's a blank page so what we can do is there's one more route in next year as well as react router which is called as a catchall route so instead of following this specific convention what we need to do is we're going to say hey if the route PA is going to be asteris that means all of them let's just render a element now we're just going to say over here to keep it simple that this page does not exist for example right just to make sure that that we are catching all the routes so right now if we head over to our app you can see we get this page does not exist which which would be an indication for us that hey we need to create this page if you like but for now let's just keep it as is we don't need to worry about it this is how you can basically create different routes with react router but let's say you want to do the same thing with nexs we want to create a index route a dynamic route and a catch all route that we just talked about but we can do here is inside of our app we have the page. TSX which is our index page so we we can keep it as is so let's just create a recipes folder and let's create another folder called as recipe ID and because nextjs has all these special files where the way we need to Define these Pages we need to create a new file called as page. DSX that means this becomes a default page inside a recipe ID so if you create a page for example here let's just say hi I am a recipe I am a recipe page for example so now if we head over to the browser and go to our create next app and let's say we go to/ recipe slash whatever value we do get high am a recipe page let's say we go to/ recipes page which does not exist at this point let's see what happen the next JS automatically gives us a four or four page this page could not be found which is exactly what we Tred to do inside of a react router as well so we can keep this as is we don't need to create a specific special route for this one but this is good to know that in next year it automatically handles it already but speak speaking of special files like we talked about page. DSX and layout. DSX let's review what are the different special files inside of nextjs now we have a few special files inside of nextjs these are all the different files we have layout page loading error and so on and we will take a look at few of these in this specific course but for now let's just focus on layout and page now the layout page the special thing about this page is that whenever you whatever you add in this specific page will not render and this is where you would typically add your header and footer so whenever we are ready to add our navigation bar we would be adding it here in the layout file similarly we could also add it in the footer as well and then page. TSX is essentially a page itself so whatever gets rendered inside of layout is in fact the page file itself so anytime you want to create a new page a new route then you need to call it page. DSX let's say you want the loading functionality need to create a page called as loading dtsx and so on these are different special files and soed on xjs now by the way if you interested in checking out and downloading all the visuals that I'm sharing in this specific course and definitely take a look in the description below where you can download all the visual assets alongside all the links that I've offered in this specific course so definitely check that out so now if you were to compare routing with nextjs compared to react router or react with weed you can see a few differences it was really simple and easy in nextjs because nextjs already had the router set up so we did not need to set up any additional all we needed to do was create new files and make sure those files match the naming conventions that we talked about in the special files visuals versus in react router we had to set up the router we had to follow the docs and make sure all the routes are properly configured now if you don't follow the right conventions especially in a react router world the routes are not going to reender and you may wonder why at the same time there are different specific routers as well just the browser router hash router static router and so on that we took a look at so you need to know which router is best for each scenario the good thing about next CHS is that all these decisions are made for us so like all we need to do is just create new files in a file system and the routes will be created provided we follow the naming conventions so you can definitely see how a framework is definitely powerful when it comes to creating a router as a beginner react Dev this might be daunting for you where you have to set up your own router but as an experienced react Dev you might or as someone who's maybe architecting the app in your company maybe they can make those choices to decide hey like should I go for file system based router that nextjs offers us or should I just create my own router with react plus weed or even like use something like w that we looked at earlier as well so these are different ways you can create routing options inside of our applications and you can then decide which one is best for your specific use depending on your use case you might you may prefer one over the other so one quick tip I want to share when you're navigating docks inside of nextjs make sure that whenever you search any anything in the documentation you are selecting the appropriate router because we are using the app router make sure that is selected but if you want to search something in Pages router then select that instead because the apis are slightly different and that's why it's important that you get pointed to the right apis when you search for it in your documentation now let's go ahead and add our navigation bar inside of our application for example right now if we look at Tasty react and also if we take a look at Tasty next this is essentially your navigation bar now Shad CN also has a navigation bar but we won't be necessarily using that because our navigation bar is quite simple it literally has one text with a specific font and then we whenever you click on any card you click on the navigation bar it takes you back to home so basically it routes you back to home so what we need is we just we can just create like a custom simple component with navigation and then that would be it so let's just go ahead and create it so now here in components let's create a new component called as now. yes now what we can do is let's just create a functional component and in here let's just call this Navar and now what we can do is just copy what I'm going to give you just going to and what we're going to do is just replace this code with navigation bar now this is the code I've already prepared so you can take a look at the GitHub Link in the cheat sheet to check it out if you like but here this is what we would be calling tasty react now the best spot for us to place this would be in the app. TSX right above routes because this is sort of the entry point for our app the main page so let's just add this here and then save it now if you go to our application you can see tasty react is already on the page but there's one more thing we obviously need to also make sure that we are able to route to homepage as well we can just use anchor link for that and let's just wrap it up inside of each one now you can see that tasty react is right here and then if we go to we are on the recipes route but if I go back to Tasty react then I'm on the home route around now which is which is what we want similarly let's do the same inside of next CHS as well so now again instead of next CH we want tasty next here so let's just go ahead and do the same so what we can do is just copy this nav bar go inside our UI folder and paste it because it's pretty much the same but now inside of nextjs instead of using the anchor tag we will be learning a special component inside of nextjs for example we will be learning about the link component the link component is essentially a react component that extends the HTML anchor element to provide prefetching and glans and navigation between Nots this might sound really hard but what it's essentially saying is that link is a special component it's a special react component what it's going to do it's extend it's still uses the anchor tag underneath it but it also has additional capabilities such as prefetching so if we take a look at what prefetching is pre fetching is a way to preload a route in background before the user visits in so for example if we take a look at this specific app I'm going to let's just refresh the page clear it for example completely now this is an app that we are building inside of my next year's course so you should definitely check it out if you're interested this course will teach you everything that you need to know to master nexts and build production ready modern application so definitely check this out if you're interested it is a really comprehensive course and it also comes with a cheat sheet that you can download so you can follow along as I build the course as well this is the easy cell app that we buil inside of that course now this is an e-commerce app for example NOW Watch What Happens and how the link component performs here we are using the link component to wrap these cards now as I scroll down more images get downloaded for example we have the Nike shoe which is not in the viewport yet but it's about to come in the viewport and that's what prefetching is link component is going to prefetch Pages as it's about to appear in the viewport so you get that additional performance benefit plus you're not just downloading pages that the user may not even see because from for example in a site like Amazon there might be way too many pages now imagine if Amazon were to use nextjs then or were to use the next link component from nextjs then in that case because it's such an image heavy site you will see a huge performance benefit because next GS is only going to load the things that are in the viewport or what's about to come in the viewport this will make it make the initial load really fast and make your website really fast so for example if you head over to the easy sell app the Nike shoe is about to come but you can see how as we're about to scroll down this is the dog photo and that's what shows up here how refreshing Works inside of Link component so that's what we are going to use one to wrap each each of our cards inside of Link component so only the ones that are needed will show up in the viewport but also in our tasty next nav bar we also going to use Link component now even though prefetching inside of test tasty NE n Bar might not have that much of an advantage because just routing to the main page but if you think about it when you want to use the link component whenever you're routing between internal outs because of that addition because of those additional capabilities of performance and prefetching and all of that that we took a look at but let's say instead of let's say we want a route tasty next to my website this is an external Link at kara.com so in that case you don't necessarily want to use the link component you just want to use the Pure Old anchor tag that we took a look at in tasty react while building a tasty react nabar so let's just go ahead and add link component inside of our application we can just copy this line of code and now let's just instead of tasty react it should be tasty next and let's just wrap it with link component now let's just import link from next link instead of dashboard it should go to homepage and then instead of tasty react it should be tasty next now make sure to close the link tag as well so now we need to make sure that we add the nav bar inside of layout because remember that's where we discussed that that all our routes all our headers and footer will be in the layout cuz one they do not reender and second it wraps our entire application so here right above children we can just add nav bar see nav bar is going to be imported from there and just save it so now if we go back and see you can see tasty next is right here but we have also added the link component so this is on recipes page so if we click on tasty next it should take us back to home if you click that look at that we are also redirected back to home which is which is exactly what we want let's talk about the different rendering mechanisms in modern applications so you may have heard of client and server rendering and we definitely took a look at the single page application workflow and the static side generation or pre-rendering application workflow before but let's talk a little bit more about client and server rendering and the different mechanisms needed in the modern applications today again this diagram really does a great job I've asked AI to generate this for me to use the analogy of someone cooking in the kitchen like a person cooking in the kitchen so on the left hand side we have client rendering and the right hand side we have server rendering on the left hand side with client rendering you can think of it as the chef giving you a bunch of ingredients such as the dough the vegetables the bread the sauces and everything and this person right here is putting together all the ingredients and then baking it and putting it on the pizza dough for example definitely take some time as they collect all the ingredients together and place it and form this beautiful pizza for example now you can literally think of this as client rendering when you visit a specific website it's like the browser putting together everything that you need on the page that's your headers your images assets JavaScript files and so on on the page to give you a fully cooked pizza to give you a fully baked website the browser is basically going to act like this person who's going to put together all these ingredients together and making sure your website is functional and exactly how you want definitely take a bit of time if the website is complex enough right because the person is going to take a lot longer the browser is going to take some time to put together that web page for the user so this means that the initial load of your web page depending on the complexity of your website the number of assets on it and so on and will be really slow if you have a lot going on on your web page so what's exactly server rendering then well this time the chef Cooks the entire Pizza it's the pizza is ready made and ready to go all the assets are all there all the ingredients in the pizza are all there it's basically a ready to eat pizza you get to enjoy your meal right away without doing any extra work when you visit a specific website the server a powerful computer somewhere else for example is going to prepare the whole web page and give you the ready to eat pizza for example it sends the browser a complete ready to view page and all the browser needs to do is just show it onto the page that is hydrate onto the page so you see the web page immediately just like you can eat a fully cooked pizza because you get a ready to eat pizza that's what server side server rendering is because that powerful computer is really powerful all the resources are ready to go and the in server rendering you're just going to get the page ready to go so that's the difference between client rendering and server rendering so now if you think of react with wheat for example this it react mainly is known for building single page applications like we just saw what react does is what we described here as client rendering versus what nexs does is that it gives you the option of server rendering by default creting the HTML page in advance and showing it to the user so this is why many many folks opt for Frameworks like nextjs or even remix Gatsby and so on because of the server rendering capabilities over to Tasty react which is our spa application if we go to inspect and go to network Tab and then disable JavaScript and refresh the page you will see a blank application and if we head over to page Source then we what we see here is literally all the assets that are ready to download and then there's a script tag with a div ID root tag now all this JavaScript still needs to be downloaded and that's how the page will get functional but we don't see any HTML that was there on the page now let's say this is not great for search engines because when Bots search engine Bots go to check out your website they're now going to care about which fancy technology your site is using all they're going to look at is the source and see what's on your page and and basically decide where it should rank on Google now because all they're going to see is Dev ID route and until JavaScript gets downloaded then that's when they will see the page the initial load time is going to be really slow and it's not what you want at all let's say we go to an xjs website now this is my blog and it is fully built in xjs now let's say we do this the same thing here we go to sources and then just say disable JavaScript minute we do that and let me just refresh the page the page is fully functional you know why because the HTML is already generated thanks to server rendering and pre-rendering so if we take a look at view page Source I'm just going to enable line wrap here it's a special plugin I've installed in my browser if we do that you can see that all the HTML code is right here in fact let's just take a better example if you go to a specific blog post and go to the page source and again enable line wrap then you should see the entire block post here so when a bot visits the website they can exactly see what's on my page and are able to then rank my website higher because my initial load time is going to be really fast and they are going to recognize everything that's on the page that's what I mean by client rendering and server rendering why you may want to opt in more for Server rendering versus client rendering which is our single page applications in general react is in fact client rendered versus nextjs is in fact server rendered and not just that it has a few other options that we will take a look at next but this is why you may want to opt into server rendering versus client rendering let's add these badges as well as let's add these cards as well so in order for us to do that we have already installed the component from shaten it's time for us to start using it so let's just go ahead and Implement that now so let's do it in react first so if you go to our homepage and it says hi I'm home for example we don't don't need the button because we're not going to use it but we definitely need a badge component for sure so what we're going to do is here we will have a list of Cuisines so we're going to say Cuisines and then here this is going to have our list of Cuisines which we'll take a look at what we need is we're going to map through those list of Cuisines and here we're just going to add the batch component from chatan and we're going to map them we're also going to return them here or rather let's just do this because this is just going to act as a return anyway this then the second parameter of map is an ID so we can use that ID and the name of the cuisine as a way to create a unique key for our badge component so this is what we can do now this cu are just going to be an array of strings so now I already have a list of Cuisines I'm just going to add that so badge we're going to override a few Styles here now the variant for badge is going to be outline but there are several different variants as well you saw here it could be default destructive outline and secondary so let's just say CU Cuisine is going to be badge all right so so now if you go back here you can see that we have all the list of elements now we also want to render a list of cards here too so for that let's just basically use the card component here so we can just say card component so the card component let's just see the API for the card component itself so if we take a look at the shat CN UI Library we have the card component and there are two tabs here the preview Tab and the code tab so we can always review the code that we want here so what we can do is we really want a really simple card so we can just pretty much just copy this and then let's just paste what we copied and save it again we need to make sure we importing all of this from shat CN components UI folder that we have there you go so now if you look at it look at our card component we have an image we have a title we have a footer for example so we could literally make it this could be the header this could be the body the content and then this could be the footer that's ex that's exactly how we can configure this so for that we need an array of items so before we go and call our API which gives us a list of items we need to First make sure we can just add some dummy data so we can just say recipes I guess and then here this these this literally could be the array of recipes so here we can say ID is going to be zero or maybe let's just say start with one and then we will have a name which is going to be something like like chicken sandwich and the cuisine is going to be American something like that this way we can just map through it so we can just say recipes. map recipe again same thing use the second parameter in the map function to use it for the key so again we can just say key is going to be recipe. name and then it could be idx for example at the same time we can also use recipe. ID as well if you like but again let's just keep it as is so now instead of title we can just have recipe. name and then we don't really need a description so let's just get rid of it similarly instead of card content we can have ideally this would be an image but I just replace this so we can just say this is going to be the name this is going to be the footer and this will be some image that we want so now if we go back to our app we can see that the card component is already ready here we have the chicken sandwich and we have the footer which is what we Define in an array of elements so now so now that let's just let's just get rid of all of this and then paste what I just copied right here because again like I mentioned I'm going to give you the structure and the CSS for it so now we can just get rid of header alog together or header could have the image here eventually but for now we don't need to worry about it at the same time we need the key back so we can say recipe. name hyphen and then we can just say recipe. idx oops here here all right or just idx so now we have our basic card ready to go we don't have servings prep minutes or cook time minutes just add it here inside of our servings is going to be four prep time minutes is going to be four and then cook time minutes is probably going to be five okay so now we have our basic card component ready to go with the hover and all that but obviously we need to make sure that only shows one card so we will add a div around it too so that we have like four columns initially on desktop and then three columns and two columns and so on just like we have here where if we switch to for example different devices then our columns increase just like that so we want something like this so definitely let's configure that too again let's just add the necessary styling for that now if we go back look at that we do have our card ready to go let's give it some page styling too so that it looks how we want it to here let's just replace this with these two elements and add another div so now we have our card ready we our card is looking pretty good and obviously this is zoomed in so this is how our card looks like we definitely need an image but our P structure looks pretty identical iCal to what we want in this specific application now obviously we do want gradients as well which we'll configure that a bit later but for now let's focus on getting real data for tasty react so let's talk about data fetching inside of react with wheat alongside nextjs now we will be using this dummy Json data to get the list of recipes so if we take a look at our docs there are a bunch of different different recipes here and this is what we'll be focusing on it will give us a list of recipes for example and then we have it has everything that we need now let's say we go to two a specific ID then this gives us a specific recipe as well that we can get when we go to the individual recipe page for example that's what we would be using for data fetching now in order for us to fetch data inside of a react wheat application what we could do is use the fetch API now this is a very common fetch function that we could use at returns a promise and then we can use fetch to basically fetch any specific resource that we want so we could fetch use the fetch API to fetch the list of recipes and then individual recipes as well but in react and weed like I mentioned we have W which already has different data fetching mechanisms that we can use if we were to use W to basically get the list of items now this would mean that we don't necessarily need to client render we could in fact server render and opt into different data fetching mechanisms as we like as well so for example inside of data fetching we have different modes such as SSR server side rendering Spa that means if you want if you want spa for some reason then we could do that as well SSG which is static site generation HTML only so the page is only rendered to HTML with no zero or minimal JavaScript and so on so this is totally a doable option but in our case we're not using Wes but I wanted to definitely tell you that this is an option that we could use with with beat with beat and react but in that case we're just going to go with fetch we're going to use fetch to fetch the list of recipes but this is great for beat and wheat plus react and we can just use fetch in one of the react hooks basically fetch the data and manage State locally but when it comes to fetching data in nextjs there are a few different ways we could approach this the nextjs also offers us a fetch API but a special fetch API next GS extends the native fetch API and it allows us to configure the caching Behavior inside of our application so remember how I said that we could server render an app or a client render an app and so on in next years in fact there are a few different ways you could fetch data itself so one is called a static side generation what this means is that we still use the browser fetch but next year will extend the specific fetch function and add a property called as cash Force cash this means that whenever you use this specific function by by default your request data is just going to be cached and unless you purge that specific cache that data is going to stay this means that anytime the user accesses the data it's in fact cached on the server and you're getting that cached data over and over again on the other hand your data does get stale after a bit for example in our application if we were to go ahead and cash all of this data but let's say that our title we change our title for example then in that case now the data is still so what we could do in nextjs is we we can use something called as incremental static regeneration which would mean that every hour the data is going to get revalidated that we going to get fresh data you're going to request for fresh data every hour the first user that requests for this specific data the first time is going to still get stale data but but the next time the user any new user is going to get fresh data because that's going to be a signal for next year that hey go fetch new data and lastly we have servers rendering which where we can add a cach no store which means that there's going to be no caching caching and we are going to have fresh data every single time but still we will have the capabilities where HTML is pre-rendered and then we show the data after as well so these are different ways we could fetch data inside of nextjs and all within the fetch function but you need to be careful when you use the fetch because nextjs does cash a lot and this is something you need to be really aware of let's just go ahead and use that in our application let's just use fetch to fetch these recipes so now in our app we have recipes that are coming from a array we don't need this we can do is we can just create a local state call this recipes set recipes once we do get the data from the API we can set the recipes so for that let's just use a life cycle hook called use effect this we want this hook to only run the first time that means we we need to give it an empty array so we we're going to say that hey let's just use fetch so we can just say again in we cannot call a async function directly inside of a use effect so what we could do is we could just say get recipes and make this an Asing function and I's just say response and let's just say fetch and then here call the recipes and then now again let's just get the data so we can just say await response. Json and this gives us the response Json data itself and now if there is data then we can just set the recipes now we just call get recipes right here outside in the function this way we can call it inside use effect now keep this in mind we don't need these recipes anymore we can just do directly call them let's just set the recipes and set with set it with data so now let's just refresh the page and you can see that we do have an error the recipes. map is not a function so let's just see what happens so for example we can just console log data and if we open up browser developer tools and go to console then we have an object and data has recipes as an array so what we need to do is we can just say recipes so if that's the case then let's just call data recipes and now if everything works as expected then we should see a list of cards with all the data isn't that amazing so we have our list of cards ready to go and obviously this card does not look like the card that we want because it does not have an image now here where we had the placehold for image inside of a header let's just add an image so we can say image source and recipe. image and then an all tag we can just say recipe do name width is going to be 500 height is going to be 500 and let's just make it a background cover rounded and then let's just also give it a shadow and these are all different tailin utilities it makes it a background cover makes the corner rounded and also adds some Shadow so now if you do that oh my God look at that this our application looks exactly what we want it almost look like the application that we trying to build here which is awesome so this app is already looking pretty good so now we have all our images from our application right away so now this looks pretty great and this is how you could fetch data inside of react plus wheed but if you're already familiar with how data fetching Works in react and it's exactly that but now let's say we want to fetch data inside of nextjs then how would we do the same well if you want to fetch data inside of nextjs then again we would use the exact same we would do the exact same thing so what we are going to do is we literally going to copy all of this because everything stays the same there's nothing in here that should not be in the other page so if we go to our we go back here we should just basically replace the whole thing now if you take a look we get an error saying that you are importing a component that needs use effect this means it only works in a client component and none of its parent are marked with used client so they are server components by default so this just brings to the next topic which is client and server components which we'll talk about in a second but let's just fix this error for now so now we're just going to call this a client component and by calling this a client component we basically saying that hey just do perform the fetch on the in the browser itself so now if we do that you can see that literally nextjs also has the same code and everything works as EXP Ed which is what we want so you might wonder well why did we add that client again well let's take a look at that next so let's talk about client and server components well remember we had to add the use client on top to fix it but let's talk about what that is to begin with so for example in nextjs by default with the app router remember I said that a lot of things changed with app router this is exactly it with app router we get new client and server components and as of this point it's only available inside of nextjs with client components what happens is when a browser requests data for asking to fetch the data what we typically do is make an API request and that's exactly what we're doing right we're basically calling the recipes API and then the server is going to do the work and it's going to return the data the recipe data and then we're going to display that on the page which is our client on the browser this is fine with client components this is exactly what we did just now but but by default in nextjs all the components are server components so if you want to say that hey this needs to be on the client then we need to make it a client component and that's why we had to add the use client directive which is what we did here the use client directive inside our components inside our page so what exactly are server compon components done well what happens in a server component is whenever we the browser that is the client asked to fetch data we now have the ability to make those components themselves as server components what this means is we can just say that hey if this is a server component instead of browser doing the work of calling the API fetching the data and so on whenever we make an API request we make a call to the server the server then returns it back to the browser and the browser then passes the data and shows it onto the page but unless there's an actual need for a browser that means we are calling we are basically calling the window API or we are calling something that specifically needs a browser and we don't need a browser at all we can just make it a server and that's why and that's where server components were born we could just make components as server components this means the server is going to handle everything this means we can make our backend calls on the server itself and then it will get returned not in the form of Json but in the form of a special stream and then the browser is just going to show it onto the page to the user that's why server components are Bor when would you make components as client components let's say you do need a browser then you would make them as client components now in nextjs there is a really good post when should you use server versus client components well if you are fetching data accessing backend resources keeping sensitive information keeping large dependencies and all of that can be on the server but let's say you have onclick handlers onchange handlers you're using any of the react life cycle hooks such as use State use effect and so on and you're using any browser specific API such as the window object or you want to get users location then all of this can only happen on the browser and that is when you need to make it a client component otherwise by default everything else is just going to be a server component so this is why in our case we decided to make it a client component which we'll get to in a second but one of the other pros of server components are that you don't you now don't need to you don't need to create an a brand new API because everything is within the component so you can just get the back call the backend API whatever data response that you get back you show it onto the component so you can call the back end in the same component and now your client bundle is going to be really small because this because there's less stuff to download for the browser because server is performing majority of the operations and this is why you get a performance boost as well with server components which is pretty amazing if you were to take a look at a component do we want to use use client not really even though we definitely use use State because we just copy pasted the code from our client from our V plus react application we could just get rid of this and what we could do is pretty much extract this function out keep it here get rid of this also and instead of set recipes we can just return data. recipes now what we can do here is we can just directly call because this is a server component now because we don't have the used client directive so we can just say recipes is going to be await get recipes and this means we need to make this a async function now everything should work as expected because there is no client functionality at all so this is the beauty of using a server component so now if everything works as expected at applic application should perform as as it should look at that now we have our application identical but the difference is that we are this is going to be way faster than our V plus react application because the server is doing a lot for us but let's say you do want to make it a client component then you definitely need to add the directive on top called use client but in our case we don't need to worry about it because we don't need to add it now let's implement filtering so for example the minute we click on Asian or American or any of these different amazing usines we want to make sure that the cards Al also filter accordingly when we click on American only American dishes show up when we click on Italian only Italian Indian then only Indian and so on the minute we click on all then we want all the Cuisines to show up all the recipes to show up that's exactly what we want to implement here but in a react application the way we would Implement that is by again making sure that we are creating some sort of a filter storing the state of the badge somewhere and the minute we click on that you want to store the state of the badge and basically check the entire list of array and filter by the cuisine itself so for example here we have a Cuisine every time there's a property for that so we could just filter accordingly the way we would Implement that in react is very similar to what we have for get recipe now instead of get recipes and set recipes let's add another state called as filter recipes and set filter recipes again it can be empty and now what we want is let's also create another state for badge and set badge now here again we can just say use State and by default it's just going to be all so now what we could do is we can say that whenever a user clicks on badge so we can just add a onclick Handler here and we can just say handle on click and let's also pass in the event oops pass in the event and also the cuisine that we have selected so here again we can add another Handler called handle on click which is event and Cuisine and here again Cuisine is going to be a string and then event is going to be react. change event with HTML input element this is the event now we want to make sure that whenever a user does select on the batch the page does not refresh so we can just add pre and default at the same time now we can just set the badge to be whatever the user selects now at the same time let's just make sure by default is just empty and then we as the user selects the badge we can enable it now what we want to do is we want to set filter recipes whenever the user selects the badge so for that we definitely need to repurpose the specific function and add a use a filter function to filter the elements so what we could do is we could just create a new function Al together here and we can just call this get all recipes and just paste it and then return data. recipes oops data. recipes here make this an acing function and now instead of you can just say recipes is going to be get all recipes and then let's just await it here now if there are recipes then we can just set the recipes so everything should work as expected but now this enables us to use it inside another function because whenever the user has selected a badge we need to do the same so let's just add another user effect and say that hey if there is a badge then add the code for it but we need to also make sure that we are closing the use effect and only enabling this only this use effect only should trigger Whenever there is a badge so we can just say if there's a badge then get the filtered recipes so we can just say get filtered recipes now the filtered recipes again is going to be a function which is going to be a async function now here we can just call recipes and since we already checking for badge we can just say if recipes. filter recipe if the recipe. cuisine is equal to badge then we want to show we want to set this but let's just make sure we have filtered recipes by Cuisine here and now we only want this when going to set this Whenever there are filtered recipes by Cuisine so now that we have this we need to make one more tweak right now we are are only mapping through recipes but not through filter recipes so what we can say is if filter let's just make sure the name filter recipes if filter recipes. length is greater than zero then show filter recipes else recipes this way we are mapping through filter recipes if there is a filter else we're just going to return the recipes itself so let's just make sure we enclose this that we are able to map it and now if you click on Mediterranean then look at that we do have the filter working as well as well as all recipes as intended and these recipes are definitely mouthwatering so I'm definitely feeling a little hungry right now all right now we have filter implemented too so let's just go ahead and add the type for recipes so I've already added the type for recipe type so let's just go ahead and assign it wherever necessary so here you're going to have recipe type idx is just going to be number similarly we have recipe type here so we can easily access it and that's it so this is how you can Implement filter inside of react with wheat now we want to do the same thing in nextjs so let's see how we can do that now things change a little bit inside of next CHS remember we talked about client and server components how specific components need to be a client component whenever we need some interactivity so in this case we definitely need interactivity whenever we click on any of these items for example then it is interactivity that we need in our tasty next app so what we could do is but if you change make the entire component as client component then we will lose the benefit of performance what we could do is we could extract this badge component and keep the interactivity limited to that this way we can pass around props and make sure everything works as expected so let's just copy this and inside of our UI let's just create a badge filter component again we can just say it's going to be called Das filter let's just paste what we copied let's just also grab the Cuisines here so now let's just import badge as well and we need a onclick Handler so let's just copy that too so now we can just paste what we copied and we also need a set badge badge and set badge which is going to be a use State and then it's going to be empty but again we need to make this a client component all righty so now we have this going so what we could do is inside of our application inside of our page instead of calling Cuisines here we could just say batch filter and that's it now this way we can get rid of this Cuisines as well this way we can definitely have a client component as a child of a server component so this works as expected now how can we Bas make sure that from the batch filter when we do set the badge is the specific badge value badge value is what gets shared externally so that we are able to then filter our page and show and basically also so that we're able to filter the page and show that P page accordingly as well so for that what we can do is we need to also extract this code out into its own component this way this file can still stay a server component you get rid of this too let's create a recipe list component so if we say recipe list. TSX again this is going to be a react functional component say recipe list and now paste it what we copied we don't need this additional div but we also need to just take in whatever import we have here paste it just paste it and now here we'll have recipe list the recipe list can be a client component if we like for example but we need to set the recipes as well we need to make sure that recipes this specific recipe is what gets passed in here so we can just say recipes equals recipes just like that so we need to take in recipes as a prop so we can see recipes is going to be array of recipe type recipe type is something we need so what we can do is just copy paste recipe over here so we can just say the type is going to be recipe type so now we have the recipe and then we can just say this is going to be recipe type and this is going to be number as well so now here we just need to assign recipes is going to be this value all right so now we have this we have we're still making this a server component and passing the data as prop here but whenever there is a filter for example we also need to pass that too like we need to make sure that we are able to get that information as well so so let's just make sure everything works expected so now if we refresh the page you click on any filter it doesn't work for now but we definitely want everything else now in order for us to make sure that batch filter when it does set the value it's setting in a global place where anyone can access it so that eventually we could just filter the recipes as we want now that's not the case anymore right now we're just getting the recipes from the API and just mapping through it we also need to map through filter recipes and for that we need a reducer and a context to set the badge as well as to get the badge value as well we can filter it so let's just go ahead and create a context value so here we can say recipe context. DSX and if we just create a reducer here again the name is going to be selected Z typo here and now the initial state is going to be State and then selected Cuisine is going to be empty similarly if we create a type for initial State it's just going to be let's just say State it's just going to be State selected Cuisine is a string perfect so now the state can be assigned to here let's just move it on top perfect so now we also need a action type here so we can just say type is action type type again type is going to be string and payload can be and we don't need to default export it in fact it doesn't need to export at all so we can just say recipe reducer so what we ideally want is whenever we dispatch an action for selected Cuisine then the selected Cuisine does get set so we can just say selected Cuisine is going to be payload do selected beautiful so now that we have a basic reducer ready to go now what we want is a provider for context so we can just say recipe provider and this can just take children as a prop and children would be react. react node now we can just return it now this is just typical way of creating context so I'm going really fast but if we just say recipe context provider and then render the children here now we also need to make sure that we are getting State and dispatch from use reducer which is naturally exports and here we can just initialize reducer and add initial State here now here's the thing we don't have recipe context yet so we need to create it so we can just say this needs to be exported so we can just say recipe context will be create context from react and then this could be the initial State itself perfect so now the state or I guess I should say the value will be State comma dispatch and instead of state it is is going to be Cuisine and we can just directly access it here right so now let's just go ahead and initialize it or declare it here so now layout is a central spot where everyone the entire application can access everything so we would be creating recipe provider you would declare recipe provider here and wrap our entire application with it so we can just say this so recipe provider is in fact imported from Context which is what we want now that we have this let's just go to badge filter and instead of setting the badge we're just going to get dispatch from use context and then recipe context and now what we're going to do is we're just going to dispatch it so we're going to say dispatch and then the type is going to be what we just defined here and then you're going to have a payload now we said payload do selected Cuisine so we need to Define it selected Cuisine is going to be Cuisine all righty now we have set it now it's time for us to use it here so right now we just get the recipes from the API and declare it but what we need to do is get just filter the recipes here and paste it here too so we can just paste it and just let's just get the use effect as well we don't need recipes because we get that already from the API and instead of badge this time it's going to be the context that we want so you're going to copy this line add it here get import everything as needed use State and then state will have have the cuisine value the selected Cuisine value so we can just add that here and then we also need the use State the state value of filtered recipes here again let's import this two now we don't have badge but we do have selected Cuisine so let's update that similarly let's just update the dependencies as needed now this is just going to be recipe type array perfect so now we have this we need to add the same condition that we had here which is that if we have filtered recipes then we just need to get it and set it just like that all right so now let's just test it out and see what happens so now it says that you're importing a component that needs create context so it needs to be a client component so here we need to make this a client component but because of the children pattern that we using here only this component will be client component all right so now if I click on Mexican look at that everything works as expected and we are able to filter the way we would want it to so this is how filtering would work and this is how you could basically pull out the value and store it in a global place as well so now speaking of data fetching as we implemented context you can see over here with fetch the specific fetch function is special because by default it has an additional property of cash which is not something that's available in our in the react Ved world this is something that's over here so we by default it's in fact Force cash but let's say I don't want it to cash then I I could pick the other options as well so this fetch function is definitely the special function that we talked about now let's go ahead and build the individual recipe page all this recipe page does is that displays more details about the API and when you click on back to all recipes then it goes back to how it was now whenever you click on any of the individual cards is when we out so again back in react what we could do is on the homepage for card in order for us to link between Pages we can just say HRA and then close the entire card with a link and this time we can just say just go to recipe slash and we can say recipe. ID now this way we are linking between pages so homepage card can go to recipe page for example so if we click on whoops if we go here and click on classic margarita pizza we do get taken back any of these cards should take us back accordingly but this is recipe 1 this is recipe 2 in the URL and three and so on so which is what we want so now let's just go ahead and build the recipe page further now in order for us to build the individual recipe page we just need to get the ID from the individual page and accordingly pull it now as we talked about earlier whenever we go to slash two and that gives you the individual recipe itself so what and we can use this specific image too so right now what we can do is we can just pull that so now in create in react router we can get any individual the ID in the URL by using a function called as use perams what we can do is we can just get the recipe ID from use Rams router this should give us the recipe ID itself and now we can just get the individual recipe and display it so again very the same idea as before we have the use effect and then we're going to just set the recipe accordingly so recipe set recipe use State now we can just say if there is a recipe ID then perform the operation of fetching the recipe fetch recipe recipe ID so now here we can just make this an async function so we can just say fetch recipe a sync now we can just get the recipe so now what we can do is we can just pretty much copy what we had for getting the recipe so we can just copy this code paste it and now instead of/ recipes we can just make it so that we can just get the recipe ID here and we don't need to pass it we can just grab it globally which we have it here now we just directly get the recipes from as an object so we don't need to we can just this is literally the recipe itself so what we can do is just say set recipe as data so this way we get the information as needed so we can just print dat oops data data do name if everything works as expected oops we can say recipe dot name now in case there is no recipe for example we can just say you know no no recipe found so now if you take a look we go here you can see there's classic margarita pizza similarly this should say vegetarian stir fry it does say that chocolate chip cookies and so on so that means our page is ready to get built just like we have a link component inside of nextjs there's also a link component for react router D that we could utilize so right now whenever the app that we trying to build we it does say back to all recipes so we can just copy this and here instead of ring relying on something else we can just use the link component from react router Dom and let's just say two and this just can just go back to home for example so now if we take a look at the app go back here it does take us back to home as intended is what we want but obviously there's more that we display on the page here so as usual I'm going to provide the styling for you so let me just paste The Styling for our app there you go so all we're doing here is we're getting the recipes we printing the names servings prep time minutes and all of that but also adding The Styling with it too back to our app you should see our recipe getting displayed as intended which is exactly what we want but you notice how there is like a really nice gradient in our app that does not exist in the app that we have so let's just add the gradient as well so inside of Tailwind when we go to index. CSS there are three different layers we have the base layer then we also have the components layer and the utilities layer now whenever you want to create a custom class name that could could be utilized in multiple places then you could use the different layers according so if I want to create a custom utility then I could just use the utilities layer itself if I want to create a custom Tailwind component then I could use the layer for components but now since I want to create a utilities this is a way we can extend it so we can say fancy gradient and then we can just paste the specific gradient that I have already created for us this just makes it a radial gradient and these are the three different color stops so it starts from left then turns into Violet and then it's orange towards the end so now if we go back you can see that we have this beautiful G gradient applied similarly because the class name called Francy gradient was already on the card as well we also got this specific gradient so our app is looking really really good now in order for us to implement the same inside next year we need to do something slightly different we need to use something called as generate static params now what these do is that they return a list of params to populate the Dynamic segment and because in nextjs we can cach a lot of the data service side render it and cach it because of that we don't need to necessarily retrieve the data every single time cuz right now what happens in our react app is that every single time the data is retrieved but we don't need to do that in nextjs we can just cache it for that we need to tell nextjs that hey I want you to basically cache all of these params and then keep it in the cache itself keep it in the Cash Store so next time the user access it the same cache itself so what we can do is we can just copy this and head over to nexts page inside of recipes and this time we just going to paste what we copied now here we are just going to give nextjs all the list of pages that we want to Cache so next JS can just cash it and for that reason we can just pretty much copy what we had inside of page so here we have the get recipes function so we can just extract this function out and in the lib utils or I guess let's just create a new lip for oops new lip for recipe and here let's just add it so anyone can access it from here so now in our page let's just import it similarly let's also import it here too so we can just say recipes are going to be get say await get recipes now we can just map through the recipes and this can be recipe will which will be of type recipe type and now here instead of slug it's going to be recipe ID because that's what we defined here the dynamic slug segment is going to be recipe ID so we can just say recipe ID is going to be recip do ID and we always want to make sure that ID is always a string and not a number so we need to make it do to string so now this tells nextjs that please generate and cash all these paths in general Whatever Gets generated in this will be accessed it next time but we still need to access the individual recipe as well over here so so for that we need can just we can just copy what we created in the recipe page here so now we can literally copy all of this and then paste it inside the page we don't need a use effect at all here we can just directly call it because by default this is a server component we don't even need react here you don't need to set the recipe we do need recipe ID now in nextjs we could just access the prams here and then params are going to be we should say recipe ID going to be string now Rams would be just here now we don't need any of this but if there is no recipe then we can get it we need to make this an async function and now we are able to get the recipe itself from our API and now again like we did earlier we can just get recipe. name and add it here now if we go to our nextjs app and click on classic margarita pizza nothing happens because we haven't linked it so now just like we did in our react app let's just go to our page and then link it so now here in card we can just add a link component href is going to be two back ticks and then let's get this and move it here now all we need here is we need to move this key on top and now all we need here is/ recipes recipe. ID there you go so now if we try again when we click on it it takes us and it shows us classic margarita pizza which is exactly what we want similarly it also gives us the vegetarian surfy name then we have chocolate chip cookies and so on and just like we did in our recipe page in react which is what we have here what we can do is pretty much get the recipe styling that we have and then add it to nextjs 2 so we can just get the recipe page and add it here now if everything works as expected the only thing is we need to add import the link component from nextjs here in of react router D and this should be hre all righty so now if we go to a classic margarita pizza we do get the classic margarita pizza we want with all the details similarly if you want vegetarian stir fry then we do get that as well then we have chocolate chip cookies and so on which is which is what we want now lastly let's just also add the gradient that we want as well again similar idea but the gradient would be slightly different this time so if we go to index. CSS that is copy this whole thing go to another file here it's not index. CSS here it's global. CSS and all the way to the bottom oops let's add but let's just tweak tweak it because we don't want the same colors all over again just make this orange we'll make this 400 and that's it let's see now well look at that our colors are looking beautiful and if you click on vegetarian stir fry then it also changes the background of this to which looks really good I'm very happy with how the app has come along so far and along with alongside that we're learning so much comparing reat with react alongside nexs 2 which is pretty awesome so this is how you would essentially Implement caching inside of nexs but how it works inside of react plus V2 it's pretty much typical react app that we are building for react plus weed but the difference is that in inside of nextjs we can basically cash all these so how exactly should you get started with react should you go with the framework or should you go with react plus speed well here's the thing as a beginner reactive it's really important for you to focus on react and weat and here's why even though Frameworks do provide a lot when though the react dogs recommend the use of framework it's really important that you understand what goes behind the scenes as well cuz if you were to get stuck while fetching data you can already see that next yes caches a lot by default so you may not know how to purge the cash or the fact that it's happening to begin with so this is why it's really important that you start with react plus we because you don't get get any specific caching there's not a lot done for you so you get to pick what you want now react as a beginner Dev is already complex enough there are too many topics such as react life cycle hooks how to update State how to avoid rendering how does rendering work and so on so react in itself is definitely a beast that you really need to master before you get involved with other Frameworks like nextjs or remix or anything of that sort that's why I would highly recommend you to go with react plus weed and that's why why this specific crash course was provided so that you get a really good understanding that hey how does life look like with react plus weed and what does that compare to using a framework as well so even though nexts is great as a beginner reactive it might really trip you up because nextjs by default cashes a lot so if data does go stale and if you're not sure how to purge that cash then you're going to get really confused as a beginner de you may not even think it's the framework that's doing it you may think that it's your own mistake which can be which may be true too but again it's really important important that you start with react plus s and then as you get more familiar with react and how it works then start adding a framework and use a framework but if you were to get started with a production application obviously it depends on your needs if you get a chance to start on a brand new project where you are among the few developers that are starting their specific project then I would highly recommend you to take a look at the pros and cons of framework as well as react plus site and just see how the two compare with each other also look into deployment options for how it looks like and you want to maybe evaluate that as a cloud platform as well for a specific company there's obviously a lot that goes to make sure application can scale V and so on so this is why this course was provided to help guide you so that even if you are getting started or not you can sort of compare what the world looks like with reactor suite and alongside a powerful framework like that now let's talk about performance now react plus weed by default doesn't have much when it comes to Performance yes we can optimize the react re rendering and make sure that the client side rendering is really fast and so on but out of the box there's nothing that it provides if you but if you were to use nextjs then just like the link component that we saw earlier which extends the HTML anchor element there's also a image component that nextjs provides you based on the user's viewport nextjs image component is only going to download the image sites necessary for your viewport for example if we go to the next yes app that we have over here and let's just view all the images so now let's just head over to the nexts app and let's go to the browser developer tools and right now we are on mobile this cash and now if I empty cash and hard reload let's see what the image size is of this one it's now 127 kiloby but now let's say I clear this and switch to mobile for example on a smaller device and let's clear this and let's just see empty cash and hard reload and see what happen this same image is now 83 kiloby now you can already see how the image component is performing really well here on a smaller device we don't need a huge image and these kilobytes are going to add up so that is why it's really important that we use the next year image component because it's gives us a lot of performance benefit out of the box so you may want to check out all the different properties that nextjs has and to configure your image so how about we just go ahead and do the same in our image here so now let's just go to our image so like we can go to recipe list and inside that there's the card component we have the image and this is why the prompt was that you need to use the image component here we can just use the image component from next image and that's it that's all we need to do so now as we do that it does say that we need to configure the domain and if you click on this specific URL we can just pretty much copy what we have here and we need to add cdn.com so if you go to next config here let's just add CDN dummy jon.com and we just need it on all ports now let's refresh the page and see what happens let's see so now you can see that the image still appears but now it uses a performing next year's image which means we going to get a lot of performance benefits out of the box which means that we are going to basically download a smaller image based on user viewport and as a result our app is really performant now there's a lot you can do with image component in general but I but I just want wanted to give you an overview of how there are specific components in a framework that make your app really performant out of the box but just by the fact that you're using them let's talk about fonts now so speaking of performance when you were to use fonts inside of react plus speed we just have to mainly just imported in our HTML file and that's pretty much we don't get any font optimization out of the box but let's say we want to optimize our fonts in general the next yes does offer us a a font package that will allow you to optimize any font fonts and remove any external requests in general so what they do is that they Again download our font files and our CSS file just like our additional assets that we have and download them at Bild time and they are self-hosting the rest of the static assets just like that so if you were to use Google fonts which again we can just use Google fonts using the same package it's really easy you need to import a new link from Google fonts or download a package it's all available out of the box and also no requests are sent to Google as well so we could just directly use Google fonts in general so because the font files are downloaded and then cached and then we can access it whenever an application is gets really fast now one of the reasons why your application the fonts can have a significant impact on your application you download a really heavy font it might really slow down your application and really cost your performance so that's why this next font package is really useful in order for us to use fonts and apply fonts in our app for example in the react TW we want the header to be a specific font we also want the rest of our page to be a specific font too what we're going to do is we're just going to head to Google fonts going to select two fonts we're going to select the Lita one font and also we're going to select the monserat font all we need to do is just copy this code head over to our react file and go to index.html and just add it in our head element this would mean that our two fonts are downloaded monserat as well as theader now if we head over to our app and go to our Network Tab and we look for Google font you can see that lilita 1 and monserat have been applied as well but now they are not necessarily applied to the elements themselves and for that what we're going to do is we're going to head to index.css and here we are mainly just going to paste what I have here we're just going to paste all the font families that we have so we're applying H1 to monat monserat and so on we can just tweak this and say H1 is going to get Lita one the font we have downloaded and now you can see Lita 1 is in fact a really cool font and then the rest of the fonts have moner ad has been applied to the rest of the font so for example if I inspect element select the specific title then it's moner ad whereas this one is L one so that's how you can just apply fonts and react plus site you want to do the same thing inside of next and what we can do is again use the next font package the next font is already available as an import so instead of inter font which gets applied by default when you bootstrap your nexs app then here we can just get Lita one and moner rat now what we're going to do is we're just going to say mon set out is going to be default and just keep it as is and add the weight necessary too so we can just get different weights that we want so we want 500 600 700 similarly if we want lilita as well then we can just get Lita font to so we can just just say again going to be Latin and then we're just going to say weight is going to be it only has one weight so it's just going to get 400 so now alongside enter what we could do is we can just apply enter whoops enter as a class name and then we can also apply Lita as a class name too so this is how we can apply multiple fonts as well but again it's not going to work until we apply it here too so again we're just going to do the same copy pasting over here we're just going to say Lita one for H1 minute we do that if you head over to our nextjs app you can see how the different fonts have changed this one should be lilita one and then even these ones have lilita one for some reason so we can fix that but or we can keep it as is it doesn't matter but for example you can see how monserat has been applied to the of the text on the page so this is how you can apply fonts in xjs and how simple it is now you can do whatever you want the difference is that in with react plus wheat we did not get any performance benefits versus with nexs these fonts are going to get bundled and and available at build time and they are they they are basically going to be cashed and not redownloaded every single time from Google which is what we want so this gives you a really huge performance so now let's talk about search engine optimization and SEO now the way SEO works is that let's say on Google I type best mushroom lamp or I basically just type best recipes or best chicken recipes and so on that our site should be available on Google otherwise it's not going to get discovered unless you share the direct URL to your friends let's say we look for best mushroom lamb we have three different results orange lamb CB2 mushroom lamp and a post on top five mushroom lamp now the reason why these three things showed up on Google is because they are following a specific criteria that's necessary due to which Google have ranked them higher now in order for you to learn about SEO in general this is a really good guide on developers.google.com which is amazing that you should check out on how Google search works but give you a really quick summary we need to have a few different criterias to make sure that are we get more points by Google by the different search engine Bots that Google sends out to basically parse our site and check out what's on our site one is the description of the site so for example whenever we go to any site we should have a really good description so let's say we go to my website and if we go to the network tab right now in the head element I have a title of my website which is my website but then I also have a description here which is tutorials for developers and Engineering leaders and this is what I focus on I have an OG image I have a bunch of I have a URL I have a image all tag I have some Twitter information and so on now all of this is really important when it comes to configuring your site for SEO description is important what the site is all about What's the title of the site what's a canonical URL that is what is the true URL of that specific site am I following any semantics so if there are NE if it's necessary then for example this specific value should be H1 because this is very important but this is for example P tag honestly this could be H2 and so on but like for example this one is H2 because this is really important title on my website and this necessarily needs to be H3 because again this is really important on my website now all of this is is really important and this specific hierarchy is what Google looks at when it tries to parse your website and there's a lot more that goes in SEO but these are a few things we need to definitely take a look at when it comes to SEO now an application should allow us to easily update this information unfortunately in react and V world it's not as straightforward if we were to update the description and add any of the metatags on the homepage then we could add that over here for example we could change this title to Tasty react and this is good in order for us to add the description we can add the description here and then all any of the meta taxs in general configure our site further but let's say we I want to do the same dynamically for the recipe page there is no API that's available out of the box to do that and this is where a package like react helmet is very useful where you could basically update it and it you can see already it has so many downloads but you can update the meta tags in your site and dynamically generate them this is great but it's not available out of the box what say inside of nextjs there is a specific API called as the metadata API now anytime you want to expose the title and description you can easily do that with the metadata API in fact if you go into layout it's already exposed here so if I want to change the description all I need to do is update this tasty next and if I want to say whatever description I want curated recipes based on 10 plus different Cuisines such as Indian American Asian and more something like that then in that case now this gives a really good description for my site now let's say if I want to update the URL in metadata API I could easily do that by looking at the documentation for instance but at the same time if I want to update Dynamic metadata then there is a function just like we have the function for Generate static prams there is a function for Generate generate metadata and we can can update open graph images we can update different different information and so on now this is all really straightforward inside of nexts because it gives us really uh additional capabilities for doing that but in order for us to do the same thing in react and V we might have to install a package called react helmet and there are more that I haven't really discovered yet but SEO is something that should be top of mind and next yes does make it a lot easier for you or Frameworks in general will make it a lot easier for you to do that because they do think about all of this in mind now now first load of your website is also really important for SEO so as we have seen earlier whenever we look let's say we disable JavaScript in this specific app we have done this before but if you do that again and disable JavaScript refresh the site we get a blank page versus if you were to do the same thing inside of nextjs Guru sources disable JavaScript and refresh the page we still have a fully functional site so when Bots look for it they're going to get all the information necessary we have a fully functional site we don't necessarily need JavaScript that means there's minimal JavaScript that needs to be downloaded and because we're following semantics our site is going to rank higher so this is why using a framework that focuses on pre-rendering and gives you that server rendering is really important versus something like react plus weed so using something like wi that will give you that server rendering capability is really really important as well so definitely keep that in mind when you make a choice for what you want to use in your app so now before we wrap up let's just make typescript happy and make sure that you're not making any mistakes with initializing state or anything of that sort so one for recipe context we added payload as any but we do know the payload now we know that payload is going to have selected Cuisine because that's exactly what we are setting over here payload do selected Cuisine so let's just make sure we have that specific payload and then it does say that state has no properties in common with type so as we decide to assign selected quisine directly we also can just tweak this area so we don't need an additional property called State we can just make it by default as state now recipe context does not know what the initial State value should be or the type should be so let's just fix that so we can just say it's going to have two values one is going to be the state is going to be just State and then the other value is going to be a dispatch fun function is going to be react. dispatch and then we just going to take an action type here now the initial State can probably have dispatch function as well which is going to be null whoops not here but here now this can be optional too text will be initialized with State as initial State and then dispatch is just going to be null so now this way we have made typescript happy because we have added the necessary types for everything now if we head to badge filter it should be a mouse event instead of a change event so let's just fix that too so we can just say mouse event HTML div element and then mouse event all righty now in order for us to make sure that everything works as expected let's go ahead and run a production bill now we have an additional command called build that will help us run a build for production so it will bundle all our files together and let us know if there are any errors as well so now here let's just go ahead and run npm run build now the minute we do that it's going to create a production Bill compile all the files and now it has given us an warning saying that image should result in slower LCP higher bandwidth consider using an image component so we forgot to change after copy pasting the recipe itself the image component for example here we don't need to use we don't need to use image we can just use the image component from nextjs and here let's just add recipe. name so now if you run the build again let's see what happens it's generating our static pages and collecting all the page data and now you can essentially see that we have essentially cached recipe 1 2 3 and 27 more paths so whenever we essentially Run npm Run start then our experience is going to be a lot faster for our users as well and this is because we have essentially used generate static perams as we as we created here and this just basically caches all the recipes that we have from the APR so now we can just run npm run start just to make sure everything works as expected so now we can just go to Local Host 3000 and make sure everything works as expected all righty so our application loaded really fast and if you click on any of the information then it works as expected then we have filtering working as well on different Cuisines and you can see how quick the application load is the initial load of our application is really important so this is really good now if you were to do the same thing with react let's say we were to run a npm run build which runs the build for react we have quite a few errors here so let's just fix that too so if you go to react you can see here we have these red swigle lines it says that property name does not exist on type so what we need to do is when we created State we can just add a type here called as recipe type so that we are telling the weed bill that hey we know this type and this does exist with all these different properties now if you go to homepage and if you take a look at e tag again we can use the mouse event itself so here we can just say react dot mouse event whoops and then just paste that similarly let's just copy this and paste the same over here as well all righty so now we have this let's also delete this code because we don't need it importing react but we're not using it anywhere so for that let's just get rid of it in the homepage do we have it no in the Navar we do have it let's get rid of that too we had it in Navar we have it in recipe page now let's run a build again so it's building for production and it has essentially built for production which is pretty amazing just go ahead and start our site and we have a preview command that we can use to start the site so let's do that so now the page load was also quite instant if you click on it then it's going to load the API data and then if I go back to all recipes we can filter everything as well as expected as intended so our application is looking pretty good but keep this in mind API calls are being made to get all the recipes and then individual recipes too so for example if I refresh the page you can see an API call is being made versus inside of nextjs if I go to the network tab you can see that this is the react server component description file that I talked about which is a very different looking file than a Json file it is not Json but that's what it uses to essentially get the description of the page and generate all the pages all righty this is how you set up an application in react Plus weat versus nextjs really hope you enjoyed this specific course thank you so much for checking out this specific crash course as next steps please go ahead and subscribe to my Channel at Kara because I really focus on tutorials and different crash courses and different things that help you level up as a developer in your career as well as if you into engineering leadership then I have some stuff for that too at the same time if you are interested in learning nextjs further then I also am running a nextjs workshop and you should just check out at next year's workshop. to sign up and you may get some launch disc counts as you part as you watch the specific free Cod Camp video so thank you so much for watching bye for now

Channel: freeCodeCamp.org

Views: 25,286

Keywords:

Id: JB1aKAoj2o0

Length: 137min 56sec (8276 seconds)

Published: Tue Apr 30 2024