Learn Next.js With TypeScript in 30 Minutes

nextjs is the best way to build react applications in my opinion it comes with a ton of features and the developer experience is fantastic by watching this video you're going to understand how to bootstrap an application with next.js and how to build production grade react applications with nexjs nexus has a ton of features but in this video i'm just going to cover the ones that you need to know to get started building applications with next after watching this video i encourage you to go to the next.js documentation and check out all the awesome features that they have available nextjs can be used to build static applications or server rendered applications if that doesn't make any sense to you don't worry in this video i'm going to be covering both rendering strategies so let's get started building an application with next.js so i'm here in vs code and i'm going to type yarn create next app and i'm going to call my app next guide and i'm going to use the typescript flag if you want to follow along with typescript you need to use this flag as well if you don't want to use typescript that's okay you'll still be able to follow along after next.js has finished bootstrapping the application and installing all the dependencies you can cd into the application and i'm going to use code dot to open mine in vs code so you'll notice we have a few folders here we have a pages a public and a styles folder so the pages folder is where all your pages will go and i think the best feature about next.js is that it does routing from this pages folder so it is a file based routing system the public folder is where you can serve public assets from so in here we have a favicon and the verso logo and then in the styles folder you can create your styles module so you see here there's a global css and then there's a home.module.css and this is just going to be imported into the index page in the pages folder you'll notice this api folder and in here you can make api handlers so you can see here if you go to slash api hello you can send back a 200 but we're not going to be talking about next.js apis so i'm just going to delete this folder so open up the package.json and you can see we have a dev script and we have a build script and we have a start and a lint so to run next.js in dev you can type yarndev and you can see here that the server started on port 3000 so we can go have a look at that in our browser so you can see here we get all the contents from the index page and it says to get started edit pages index.js this is obviously wrong but that's okay so we can come back to the index.tsx file and we can remove all the contents except for the header and this header component is really useful you can use this on any page and it's going to modify the header contents of the page so you can see here we have a title and we have a meta description so if you view the page source you can see we should have a title and a meta description so you can see here our title and we also have our meta description here as well the underscore app is going to wrap every single page so if we put something into here we can add a fragment and we can just say this is underscore app when we come back to our page you can see it says up here this is underscore app so i think the best feature of next.js is this pages system so we can create a new file in here and we can just call this hello dot tsx and we can say function hello page and we can export the holo page as default and from the hello page we can just return a h1 that says hello page and then if we come over to localhost 3000 and go slash hello you can see we get our h1 and we get our underscore app and you don't need to set up any routing for this to work so for this tutorial i'm going to use the rick and morty rest api to fetch some data and display it on the page so the first method that i'm going to use is called get static props so i'm going to say export const get static props equals an async function so the alternative to get static props is going to be get server side props but get static props is going to run when you build your application and get server-side props means you have to run your application in lambda functions so you can use this to build a static website and you can build get server side props to build a dynamic server rendering website and in this tutorial i'm going to show you both methods so inside our async function we're going to pass in some context going to say const res equals await and i'm going to use fetch and i'm going to make a get request to this rick and morty api slash character and this is just going to return an array of characters so i'm going to say const and i'm going to destructure result equals await res.json and i'm just going to return from here i'm going to return props and then i'm going to say my props is called characters and it's just going to be result so because we're using typescript let's add some types to this so my type of get static props is going to be get static props and you can see that this comes from next itself and let's type this result here so to get types for resolved i'm going to go up to our home page and i'm going to get the props here so i'm going to say i expect characters and for now i'm just going to type this as any let's come down to the body of our page and i'm just going to say json.stringify and i'm going to stringify characters so this is an issue here this is actually called results not result so you can see here we have a lot of data and up here we have this is app so i'm just going to remove that and i'm also going to remove the fragment come back to our page and we have all this data here so let's copy all that and i'm going to go to this quick type app and i'm going to paste in my data on the left hand side here and you can see we get some interfaces let's copy those interfaces and i'm just going to create a new folder and i'm just going to call this types dot ts and you can see we get our character here and we get a bunch of other interfaces so in our types i'm going to create a new interface so i'm going to say interface export interface and this is going to be get character results and this is just going to be the interface for the results type so i'm going to say info is of type info and this is exactly what the api returns and i'm going to create this info interface in a sec i'm going to say results and this is just going to be an array of our characters and info is going to have a count pages next and previous and this is for pagination i'm going to come back to results and i'm going to say get character results now up on our next page if we hover over this we can see that it's a generic so i'm going to use that generic to type our characters i'm going to say characters is a type of character and it's going to be an array of characters now we can remove this any and we get all our characters here so let's quickly map through these characters and just print out their name i'm going to return a list item this is going to be character and you can see here we get all the props that we can see on character so i'm going to print their name and i'm going to add a key here and this is going to be character.id so you can see here that we get a list of characters and we know those characters have an image so let's use next.js image component to print out the image for those characters so i'm just going to change this li to a div and below the character's name i'm going to use image and i'm going to say the source of this image is going to be character dot image i'm going to give it an alt of character dot name i'm going to give it a width of 200 pixels and a height of 200 pixels and you can see we here we get an error it says rick and mortyapi.com needs to be configured in under images in your next config so let's go do that and this is a really good feature from next and it's going to stop your website from loading images from unknown sources let's come over to our next.config.js and we're going to say images and then we're going to add an array of allowed domains so i'm going to say domains and then i'm going to paste in our rick and morty api so let's stop our server now and restart it and come back over to our logo host port 3000 so this is good you can see that we get our images loading and we get a name so in theory we should be able to build this website and create a static website so let's try to do that let's come into package.json and next to build we're going to say end next export let's stop our server and i'm going to say yarn build so it's telling us here that we can't export because we're using the image component so to be able to use images and export a static website you need to use a loader so there's different loaders you can use and there's some that will upload your images to service providers like cloudanary but we're just going to create our own loader because these images are already hosted by the rick and morty api so let's make a new file and i'm going to call this image loader dot ts i'm going to say const image loader equals and this is just going to be a function so it needs a lowercase i and this is going to take a few properties but the one property we need is source the next month is going to be width and height but we don't need those and we're just going to return the source let's export default image loader and we can say that source is going to be a string so on our images let's say loader equals image loader so vs code should import your image loader for you and the other option that we need is going to be unoptimized so we don't want nexjs to optimize these images for us because they're already hosted let's try yarn build again so this is really confusing because it's telling us that we need to use an image loader but we're already using one here but what it's actually telling us is we need to have an image loader set in our next config so let's say loader is equal to a custom loader and then the path is just going to be slash which means it's going to be served at the root let's try build again and you can see here that next.js has built our application so you have a few icons here this server is a lambda function the static is just this hollow circle and then the ssg is going to be the fill down circle so you can see here it's created a few files and it's going to tell you the 404 file is going to be a static slash hello because we left that in here is going to be static so you'll notice this app directory here and this out directory has a bunch of files in it now we have an index.html hello.html a 404 and we get some other assets as well so let's try run our static website so you can do that with mpx serve and we're going to pass in out because this is going to be our app directory if yours was in build you would say mpx server build for example so this is going to create a server and then it's going to serve all the files in this folder here you could just drag and drop this into a web browser and that would work let's go to localhost port 5000 and have a look at this and you can see here we have a static website so we can view page source on this page and it looks pretty much exactly the same except this is a production build so let's create a page for each individual character so i'm going to start my dev server again and delete hello.tsx because we're not going to use that then inside pages i'm going to create a new folder and then create this i'm going to call this folder characters and then inside characters i'm going to create one new file and this is going to be some square brackets and i'm going to call this id dot tsx and the square brackets mean that this is going to be a dynamic route so we can say function character page i'm going to export default character page and i'm just going to return a div that says character h so let's go to our website on slash characters and i'm just going to say 11. and you can see here that it's going to return characters page for every single one of these routes so i'm going to build this characters page with both methods and so you'll be able to see which one is going to work best for you so the first method i'm going to use is creating a static website and then i'm going to server render these pages so the first thing we need to do is create a function called get static paths i'm going to say export async function and i'm going to call this function get datech paths and just like before i'm going to say const response is equal to fetch all the characters then i'm going to say results is equal to get characters results and then we're just going to turn the response into reds.json and this is where it gets interesting we're going to return a new object and i'm going to say paths and this needs to be an array so we're going to say results dot map and i'm going to pass in character next i'm going to return a new object this object is going to have one property and it's going to be called params i'm going to say id and i'm going to say character dot id and i'm just going to cast this id to a string as well so when we build our page this function is going to run and then it's going to run through all the characters and it's going to create some params with our id and then we're going to use the output of this function to render a static page for every single item that's in this array so i'm going to create a new function going to say export async function get static props we're going to have one argument here and this is going to be called params and params is going to be this object up here so we're just going to say it's going to have an id of string so i'm going to make one network request and this network request is going to be the rick and morty api and we're going to pass the params.id on the end of this api and this is going to return the result for one character then i'm going to say const character equals res dot json turn that into json then i'm just going to return and like we did on the index page i'm going to say rops then i'm going to pass in the character so let's go up to the actual function and in here we're going to get our character and we can type this out is of type character and let's return a h1 and this is going to be our character dot name and let's also return an image so i'm going to import image from next slash image so let's do a source of character dot image and alt character dot name and for anyone that's new to web development doesn't know what alt is it's alternative text in case the image can't load it will show this text instead and i think screen readers use it as well so let's give it a width of 200 pixels again and a height of 200 pixels and we also need a loader here so i'm going to say loader equals image loader and i'm going to say unoptimized as well so let's come back to our index page and i want to link the character's name to our character so let's import next link the import link from next link now i'm going to wrap the character's name in our link and i'm going to give this a href of and you need to use some templating strings and it's going to be slash characters flash and then we're going to use the character dot id and so link is going to pass the href on to the next element so i'm going to pass an a tag in here so it passes it on to an a tag instead of onto the character's name and while we're here let's wrap the character name in a h3 so we have an error here the fallback key must be returned from getstatic paths so in get static paths let's return ball back is going to be false so if we inspect element on this character's name you can see that we have an a tag and this a tag despite us having not put an anchor on it now has a href and then we have the h3 in the middle so let's click on it and see what happens you can see here we have a little error it says serialization error on dot character and this is because we haven't awaited res.json and you can see that res.json returns a promise so let's add an await here and we can come over and character with idea 10 loads alan rails let's go back and we can click on albert and you can see that it loads the page correctly so let's build this application now and see what happens so i'm going to type yarn build so if we open up our app directory and we have a look we have a new folder here called characters and we have a new page for every single character and this is great this is exactly what we expected but the problem is is that the rick and morty api is paginated and so we only have the first 20 characters but there's a lot more than that so let's turn this into a server rendered application i'm just going to rename id and i'm going to change this to static and if you're going to follow along or you're looking at the github repository you can find the static file in this folder here so i'm going to copy the static and paste it in and i'm going to rename this back to id so let's remove our get static paths and we're going to change get static props to get server side props and instead of params this is going to take a context and i'm going to change this to a anonymous function to make the typings a little bit easier and i'm going to add a type here it's called get server side props and you can see that that would come from next and this obviously needs to be an async function and this means here we get some typings on context so our id is now going to come from context.query dot query dot id and this is all going to be the same now so let's type yarn dev and as the name suggests get server side props is only ever going to get run on the server so if we console log character you'll only see the character being logged in this terminal here and you won't see it being logged in the terminal on the browser let's refresh and we can click into a character and an application behaves as you would expect so if you wanted to access this id from your component up here the easiest way to do that is to import use router so i'm going to import use router from next router and i'm going to say const router equals use router you can see here that router returns a next router so we say console.log router dot and you get a bunch of properties on here so that property would be in query dot id so let's console.log this and come over to our page inspect and you can see here we get an id and it's going to be 10 and you also get it on the server so another important aspect of building an application is environment variables so next.js you can create a new environment file so i'm going to call this dot n dot local and in this file you can make public and private environment variables by default the environment variables are private so i could say db connection equals and have my connection string and if i was to go over to our index page and i wanted to print this i would say process dot n dot db connect and i'll just add this here and a hr tag so we can easily see what we're working with and i'm going to restart the server and i'm just going to remove our characters because i think the styling is means that they're going to be over the top of this string here and you can see it says db connect and there's nothing here so this is going to be a private environment variable so if we want to make this public we can add a prefix here and i'm going to say next public and now if we restart our server we should expect this environment variable to get printed to the screen so we need to change this in the index to process.n dot next public db connect and you can see here that the string appears so next.js makes it really easy to work with environment variables and also make your environment variables secure if you need to them to be so another really common thing in react applications is to create a layout so i'm going to show you an easy way of doing that so create a new folder i'm going to call this components and inside of components i'm going to create a layout dot tsx you say function layout and say export default layout i'm going to return and i'm just going to return a div and the div is going to have a nav and the nav is just going to have one line item that's home and then we need to return children so let's type children going to be react dot react node and so we want to add this layout to our pages so one way of adding the layout would be to just wrap your app in layout and this is a really common way of adding layouts and this would work fantastically you can see here it just says home in our list item but sometimes our layouts need to be a little bit more dynamic we want to add different layouts to different pages so to do that i'm going to create a get layout function let's remove our layout from here i'm going to say const get layout equals component dot get layout so this means that a page can either use a layout or it cannot use the layout it's an optional function i'm going to pass in page here and this needs to be wrapped in a function then i'm going to return our component in get layout so if you're not using typescript this will work but if you're using typescript we obviously need to add some props for this get layout so let's say type next page with layout equals app props so we're basically extending out props here then i'm going to say component is next with so i'm going to add our get layout function and it's going to be optional and we're going to have a page property that has a type of react element and this is just going to return a react node so i need to capitalize p here and i need to import react node from react so let's use this type here so i'm going to create a new type and i call this app drops with layout equals app props again we're just extending out props here and next page with layout should actually extend next page not at props which obviously comes from next you say and i'm going to say component is going to be our next page with layout and then we're just going to replace app props down here with our app props with layout and you can see that typescript is now satisfied so let's come over to our id page and we can use this get layout function so our page is called character page so i'm going to call character page dot get layout and this is going to be equal to a function and the function is going to be get layout it's going to take our page then we're going to return our layout component and our layout component is going to wrap page so this page here is going to be this page up here character page so i'm just going to type it of type of character page let's go into one of our components and you can see here we have our layout so the last thing i'm going to show you is how to style your application there's lots of different ways you can style your application you can use a component library or you could use a css library like tailwinds but i'm just going to show you how to use the next.js native css modules so if you come over to your index page you'll notice here that you're importing styles from home.module.css and then you add a class name a styles.container if we have a look at home.module you can see that we have a class here of container so let's add a couple of styles for our character page so i'm going to create a new file called character dot module dot css and inside our character page i'm going to import dials from styles slash character dot module dot css then i'm going to create a new class called container and i'm just going to make the background color red so now we can use our container class inside of our character page so i'm going to say class name equals styles dot container and if we refresh our page you can see that we get a big red background on our container so that is how to build react applications with next.js if you like the video don't forget to give it a thumbs up and subscribe and i'll see you in the next video thank you for watching

Channel: TomDoesTech

Views: 258

Rating: 5 out of 5

Keywords: next.js, next.js tutorial, next js, next js tutorial, nextjs typescript, typescript, next.js with typescript, next.js typescript, javascript, react.js, react tutorial, react.js tutorial, web application, how to build a website

Id: OTuHnVvxTDs

Length: 33min 11sec (1991 seconds)

Published: Tue Sep 28 2021