Next.js in 100 Seconds // Plus Full Beginner's Tutorial

[Music] next js create fast search engine optimize react apps with zero configuration a traditional react app is rendered client side where the browser starts with a shell of an html page lacking any rendered content from there the browser fetches the javascript file containing the react code to render content to the page and make it interactive but there are two major drawbacks with client-side rendering one the content is not reliably indexed by all search engines or read by social media link bots and two it can take longer to reach the first contentful paint when a user first lands on the web page next is a framework that allows you to build a react app but render the content in advance on the server so the first thing a user or search bot sees is the fully rendered html after receiving this initial page client-side rendering takes over and it works just like a traditional react app it's the best of both worlds fully rendered content for bots highly interactive content for users inside of a next project you have a pages directory each javascript file defined here exports a react component that represents a route in the application in other words the file structure here mirrors the actual urls that the user will navigate to and next provides its own router to make navigation seamless but the real magic comes into play when we talk about data fetching because next can perform multiple server rendering strategies from a single project static generation or pre-rendering allows you to render your pages at build time each page or component can implement a function called get static props it might fetch data from a cloud database then pass the data as props to the component you can then build your app to render out all the html locally and upload it to a storage bucket where it can be easily cached by a cdn that works great for a blog or any kind of app where the data doesn't change often but if the data does change often you can implement server side rendering which builds the html page each time it's requested by the user in the component we implement data fetching with the get server side props function instead of running at build time this function runs at request time that means the page will fetch the latest data on the server each time a new request comes in that's great for pages with rapidly changing data but maybe you want something in between yet another option is incremental static regeneration by simply adding a revalidate option to get static props next can regenerate a page whenever a new request comes in within a certain time interval this has been next js in 100 seconds if you want to see more short videos like this make sure to subscribe and hit the like button then open up the s code and get ready to go beyond 100 seconds with a full breakdown of next before we get going i'd like to point out that i'm working on a full react next firebase course which i hope to have finally finished by the end of january which will be available to fireship pro members my goal over the next few minutes is to teach you the fundamentals of next while also explaining the complexities of server-side rendering to follow along open up the terminal and run npx create next app followed by the name of your app and if you get lost at any point make sure to grab the source code on github or fireship io let's open up the project in vs code and then go into the package.json file in development the only script we need to worry about is dev which you can execute by running npm run dev from the command line which will run our app on localhost 3000 that should give you the default boilerplate in the browser now before we get into the react code there's a few things that i want to point out first in the styles directory here you'll notice how next supports css modules in the globals file you can define styles that apply to the entire application but in other files with dot module you can define classes that only apply to a specific route or component and you don't have to worry about coming up with a bunch of unique class names or naming conventions when managing your styles if you want to use styles from a certain module you just import the style sheet in your javascript then reference your styles in jsx as if the styles were a javascript object that's pretty awesome but from there let's shift our attention over to the pages directory inside this directory we define all the pages and routes for the application at the highest level we have this underscore app.js file which is like the main entry point into the app in other words every individual page will start from this template currently the application only has one page which points to the root url and is defined by the component in the index.js file when a user navigates to this url next will find the default export which is a react component in this file so every file or page in your application needs to have one default export to demonstrate this further let's create our first route in the pages directory create a new file called hello.js then we can define the content of this page by exporting a default react component from it from there we can go back to the browser and navigate to localhost 3000 slash hello and we should get the content of that component congratulations you just built your first web page with next but now let's imagine a route that's a little more complex we have a cars route that should show a list of cars then an infinite number of cars that might be dynamically generated under that url we can implement a dynamic route like that by first creating a cars directory then inside the directory we'll add an index.js file which will show the main list of cars then for each individual car we'll add a component that has a file name of brackets paramname dot js the brackets make this route dynamic which means anytime a user navigates to cars slash whatever or cars slash tesla it will render the component in this file to see that in action let's go ahead and implement the component logic in the index file we'll just add a placeholder for the car's list for now but in the dynamic component we'll import the use router hook from the next router it allows us to access the query parameters from the url in this example the value is id but you can give it a name of whatever you want and then we'll render that value out to the template now back in the browser if we go to the car's url it renders out the car's component then if we add any string after the car's url it renders out the dynamic component now one other thing you may have noticed in the pages directory is this api directory so what is that all about the api directory is a special part of next for setting up routes that will only apply to the server that can be useful because the code you write here won't increase the client-side javascript bundle that needs to ultimately be sent over the network we're not going to get into api routes in this video but just know that it's a useful feature when you have work that needs to be done on the back end or if you simply want to expose an api for your end users but now let's shift our attention over to the most valuable feature in next which of course is data fetching next allows us to fetch data and render html on the server and again the benefit of doing that is that the end user gets rendered content quicker and the content can be reliably crawled by search bots and social media link bots now when it comes to server rendering there are two main options static generation and server side rendering static generation is also called pre-rendering because you generate all the html at build time it makes life very simple because you generate a bunch of html files then upload them to a storage bucket or static host and they can be delivered with very high performance over a cdn but there's a couple of big trade-offs here the first one is that your data may become stale if the data on the server changes you need to rebuild and redeploy your site in order for those changes to be reflected another important trait i have to think about is scale if your website has a million pages it'll be very slow and difficult to pre-render all of them that makes static generation most well-suited for data that doesn't change often and for sites that have a relatively low number of total pages a good example would be a blog because it might have a few hundred pages and those pages likely don't change on a daily basis let's go ahead and take a look at how we might implement static generation in next in the car component let's imagine we need to fetch data from an external source like a database or api to simulate that for the demo i've added a couple of json files to the public directory we have a file that returns an array of ids then an individual response for each car which contains an image and other data about the car now we can fetch this data for the car component by implementing the get static props function inside the component file when you build your site next will automatically call this function then send the result as props to the component itself what we want to do here is fetch the json for an individual car so it can be used in the html or ui for the cart page in this case we need the id from the url to know which car was requested we can get that information from the params argument and the function then from there we'll use the fetch api to make a request to localhost to request the json file with that id we can then convert it to json then the final step is to return an object that has a props property where each prop can then be accessed by the component up in the component code we can destructure the car prop and then use it in the jsx which i'm doing here by adding an image tag which relies on the data fetched by the server as the image source now if you're concerned about search engine optimization you likely want to add an seo friendly title as well as meta tags to the head of the document next makes that very easy to accomplish by simply importing the head component anything inside this component will be rendered out to the head of the document like in this case we add a title with the car color and id and we could also add meta tags for twitter and facebook cards if we wanted to now because we're working with a dynamic route there's one other thing we have to keep in mind and that's the fact that next has no way of knowing how many pages we actually have associated to a dynamic route in order to pre-render all the car ids next needs to know those ids in advance and the way we provide that information is by implementing the get static paths function this function can also request data from an api or database then its job is to return a paths object that contains an array with every route for this dynamic url in this demo we only have three routes tesla forward and lambo we map those values to an array of objects then return them from the function along with additional options like the fallback behavior now if we go visit the app in the browser we should see a fully rendered web page it doesn't look any different than a regular react app however if you open up the sources panel in chrome dev tools it'll show you the fully rendered html before it was touched by javascript notice how it contains the title and pre-rendered content which is essential for seo and sharing content on social media sites so that's how you implement server side generation but another big strategy is server side rendering the big difference is that with ssr the content is generated on a server when requested by the user this approach is ideal when data changes constantly because it ensures the end user will always get the latest and greatest data from whatever your data source happens to be however it's far less efficient because you need to have a server in place to respond to those requests as opposed to caching everything on a global cdn imagine something like an ebay auction where you have millions of listings and those listings are changing all the time that's probably a good candidate for ssr in any case it's very easy to implement it next back in our page file we'll go ahead and implement another function called get server side props the only thing that actually changes in our code is the name of the function we can simply copy the body of the git static props function and paste it into our new function it does the exact same thing but does it on every request instead of it build time then we can comment out get static props and get static paths because we no longer need those functions but the real beauty of next is that we can apply both of these paradigms wherever we want in the application we're not limited to one or the other i'm going to go ahead and wrap things up there if there's anything you want to see in my full next course make sure to let me know in the comments thanks for watching and i will see you in the next one

Channel: Fireship

Views: 350,008

Keywords: webdev, app development, lesson, tutorial

Id: Sklc_fQBmcs

Length: 11min 52sec (712 seconds)

Published: Tue Jan 05 2021

Reddit Comments

[u/Spirited_Return]

I love fireship, his courses on his website are actually helpful and neat, but his videos on his youtube are great for learning without going through a tutorial or something.

[u/wise_introvert]

Fireship is a great channel but his way of making the videos, specifically the coding part (where he pastes the cide instead of writing it) throws me off balance for some reason. However, his content is really good.