Nono.MA

Build a Next.js App with React & TypeScript

OCTOBER 28, 2022

How to build a website with the Next.js React framework and TypeScript.

# TL;DR
npx create-next-app@latest --ts
cd my-app
npm run build
npm start
# ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Chapters

Transcript

Hey everyone. It's Nono here in, this is an introduction to Next.js with React and TypeScript.

We're going to see an overview of how we can use one of the Next.js templates to build a React application that uses TypeScript from scratch. Next.js is a powerful library that allows you to do server-side rendering and build a single page applications with a lot of stuff for free. And if you're familiar with React, maybe with JavaScript or ideally with TypeScript, this video will walk you through some of the differences between having it in.

JavaScript on TypeScript and how we can get started quickly and build a website.

All right. Let's get started.

Next.js is made by Vercel and is a React framework for production to create websites.

It has TypeScript support. It has a bunch of optimizations and things, and also server side rendering. What I mentioned before to render your website before it's going to be served. So it doesn't have to be dynamically served to... as you were using the thing.

So let's take a look at how to create a new React with TypeScript app.

Build a Next.js app with React and TypeScript

So learn excel TypeScript. Next.js provides an integrated capture experience out of the box. In this lesson you learn how to convert the blog app.

You've built. I don't, I haven't built any blog app I'm Shu.. So this is a blog application built with a Next.js. Which is, it's pretty plain, but it's cool. Yep.

And to do, or do you learn how to set up Next.js with TypeScript, how to use makes it a specific dives, how to convert your blog to that? Yeah. Descript. All right. NPX create next app blah, blah, blah, blah, blah, blah. Alright let's just try this Next.js. Blog directory. Maybe we can put this on the live stream, open source repo. So it would be in folder 26 or 27. Yeah. I actually made a mistake here. So this is 27 and we're going to go here to live. Mean there or 26, 27, 27. And let's work in this directory. So we are going to follow these ones. So I rather Simple.

What other examples are there? MPX creating one. And let's first see we have MBA

right. 7.6. So NPM is is that a library that comes with NPM to execute functions or package of binary? So as he calls here and, we can have a command, I think, from the web or something. So we have this create commands create next app or create react app. So we can say NPS create Next app.

And here, I'm just going to be copying

Next.js blog use NPM example. And then we copy the

We copy the URL, the example, which we can actually open here. Basics final. All right. We can browse The. Through the cold here. So we have this components. All right. And what it seems that we're going to be doing is, so we have a project here that is our next year's blog in JavaScript, and we're going to convert it into a TypeScript project.

So we will get probably two to these results a, like a spoiler, but yeah, let's actually go through it and that way we can all need to install the following Bytes. Yeah. So we need to install the create Next app buckets downloading from Marcel and Marcel. That was before called satie now say now is what this was called before Nights Core versatile. And it's a platform that allows you to develop applications and ship them to the web release city started deploying. I do have my own when I got on the, we might use that. All right. So now we have here this next year. Yes. Blog, I guess from that command, this was the name of the application that I was creating and I'm going to change it so well, let's leave it like that.

And I'm going to go inside there. What did that say?

Yeah. MPN run Def. So MPN run Def and port 30,000 is already in use. Who's using port 30,000.

Okay. So our other application is actually being served there. So I'm going to stop it. And now we're going to run it again, start it. There are only going to allow connections and we're going to open that URL and we're going to see our website. Yeah.

Cool. Your name yourself introduction. The Simple website, blah, blah, blah, back to home. All right. There is a lot of stuff that is given to us here for free. And today we're not, I don't know if we have time to learn every single thing, but we need to take a look really quickly and to, okay.

So this is the other application. I'm going to go on EBIT that Coding here.

So we have this and I'm going to go. I'm gonna go back to where we were before gonna close everything else. And the only thing we want to see right now is this tutorial. We want to see the full instructions CD into the , which we did. You should also have the following files with your photo. All right.

Let's actually do that. So we're here so we can let me see. Profile picks. Let's see which one I can get this one. So that should be on public images. Public images profile. What else? Constant name, your name. Cool. So done. So constant name in layout.

Yeah. Hello this to see you're connecting today. Hello, or his posts? Wait components. Okay, so we have these layout component here and in name, I'm just going to put my name. So Nono Martinez, Alonso, and self-introduction, let's see bio, let's see if we can get a short one. Here. Let me just put this one.

I'm just going to put my description. You can put yours self. Where is that?

So we have here a self-introduction, which is an index to JS. We're going to put it here. All right. And yeah, we have Lee Nono. We have hot three loading, which is awesome. So we can see here let me see that every time that I changed something here. So for example, change a few words. This is updating live, which is really convenient.

And now we're going to get that back to where it is. Yeah. So this is really nice. It's really convenient to have that because usually you don't have that. It takes a lot more time to develop things. All let's keep going with our tutorial. So we have here to do next and create a Ts conflict to get started, create an MTTs config JSON file in the root of your project.

All right. So these, you don't need to do touch Ts configure. You can create the file manually, but where you're going to do it that way. So before we do that, if I list my files, there is no Ts config. When I do that, he has configured Jason, and then I do LS again. You can see that file exists.

And if I do get Ts config, it's empty, right? If I edit it and put here something you can see that cat shows the contents, right? So we go to our Ts config file, which is wrong because it's JS so many. It doesn't really have Jason syntax. You has to have something like this, that list. And Jason schema, no inputs were found, blah, blah, blah.

And we're just going to follow a guide. No try starting restarting the server. It will give you a warning. It looks at your trying to use TypeScript, but didn't have the required part of this installed. Let's do as this one says to do so we can open a terminal here and I can maybe put this here. So MBM run dev, but we need to stop the other window.

So port 3000 already in use. Let's see if this stopped already. Hi from Toronto. Hi. Nice to see you around. Thanks for connecting. All right. Right now I'm a full of the TypeScript. All right. So I don't really know why the server is still on, should be off, but, and I didn't really know how to reset it right now.

Let me just try it. MBM

MPN run Def. I don't really know why these got here. It's in limbo and you can see this is the process name, and we're going to delete that.

That doesn't work. All right. So NPM heavy now.

Okay. Now it seems like it released the port. So I can do that. We allow connection. And now these gives us the warning that we could see there on the tutorial. So we don't have the packages. So we just have to install the packages with NPM. So we do NPM install or I, and then we do save them.

Which you can also do with the we do TypeScript and then we add the note types. So that types four React and for Node if we go before we do run this command, if we go here to dependencies, right? We only have dependencies right now. We don't have development dependencies. What would be called the dependencies here.

And we have React, Dom remark, HTML. This is to parse Mark down and do some other nice things. We have next data and Fs and green matter. I don't know this one, green mater bars front matter from a string fast, reliable part of the Gerard Michel. Okay. While they're in your script date utility library, right?

This is nice because this actually fetches The so next the React framework. Okay. React this a JavaScript library. Cool. So when we do this this is saved them. You can test the same happens if we do that, The is exactly the same I press. And what this does, is it fetches the packages and installs them even before I can finish the sentence.

And now they're here on the dev dependencies block. And if we wanted to install them, we could actually remove this ones. Do NPM. Install. And they will get deleted again, right? Remove five packages, blah, blah, blah. So we're going to install them back and you okay. We would, of course also manually specify versions and other things, but we don't really need to do that because these results to the bonuses that are required by this other dependencies Drive, starting the development server again, after starting the server, next area will populate at the, as comfy for you.

You may customize this file, create the next-env.d.ts file, which ensured next year its types are picked up by TypeScript competitor. You should not touch this file. You can now use TypeScript for your Next.js. Application. Let's talk about how to convert your next ASF. Yeah. TypeScript. All right. I don't need to look at this anymore or this for now we can leave this empty leave it open and take a look at our files.

So right now I'm going to do MPN run dev. You're going to see that, these doesn't work at the moment at what we closed the guide, but yeah. We're going to leave that there using weapons for future Webpack option, not enabled with the text, the TypeScript in your project and create at the S config file for you and probably the types as well.

So now we have the TypeScript file here with all the boiler plate code for TypeScript to functional on our application. You can see here. We'll probably not learn a lot about this right now, but this has specifies a lot of the things of how TypeScript has to work. And we probably need to also understand what type shape is and on how to use it with JavaScript.

Again let's straight to move fast with this tutorial today. And we have this next M D T S, which is, it charge it, references the next and next types global types, which let's take a look next year. Yes. The types let's take a look, if we can find that types

type Stipe, stipes.

Yeah. I don't know. We're going to be able to relax. Yeah, I don't know. But those types would be defined somewhere else that I don't know. Right now we might be able to see something if we open our Node models next and take a look at this. So in, in types with, okay, so these are the files, so we can open that one.

And that one, this is what's called. Vaping's right. And these define some type things that if we use them. In our wait, this is here in our code. They're going to be picked up, which means that they're recognized by the application. And if, for instance, we used a redirect that rhetoric type it's only gonna allow us to use the status code three or one, three or two, three or three, three or seven, three, eight, eight.

You will fail if we use something else. And maybe we can try that later when we're going to try that now. But yeah, there's a lot of typings things that have to do with how next year works here and that's why these files grid. Alright, now that we've understood that even more, we're going to close everything and click next.

So we're going to continue. Is this the fourth page? All right, so this is the four space. So everything Next.js specific types, here are some names JS specific times you can use starting generation and server-side rendering for get started props, get study paths and get server site prompts. You can use, we won't learn that much about them right now.

Get study props, a sync on tickets, study grubs. Yeah, we probably, learn about this some other time. So let's see. Maybe leave it here for live. 28. And next year. Yes. And what is this next year stapes or tapes, right? Let's continue API routes. The following is an example of how to use the building types for API routes.

Maybe we do need to open this a bit bigger import at blah, blah, blah, costume up. All right. Custom app. You can convert pages up into pages up TSX on use the building type of prop and so all right, so let's try to do it. Okay. So we go to app JS and, when I View command P and they can type the name of a file here and enter, and then are you open that quickly?

So for example, Hub and then enter, and here, the main difference is, we import differently. Approps from next stop. So import props from next.

Bye. We need to change the extension to Ts X.

So functional

function up component. You may actually just put this here

export default app. All right. So we, the return, the same component and here we have app component batch props,

I don't know if these will work, like no such file directory. All right. So we have the Coke here and maybe we put these there

export default function. All right. This seems so you would work, but I think we need to update the entire application. I don't know if this is let's see where op is referenced. Do you find the entry point? That's what I'm trying to figure it out. All right. Yeah.

Okay. So you're up in a bar to learn more or blah, blah, blah. All right. So this helps us update the project manually. But as we saw before, we have here the dab screen final, which is something you can go to. If you want to take a look at what the end result is. And we're going to call on that now to have that as a test and dah, this doesn't work.

Of course. That's great. Final. And here we go here. Two pages,

right? That's what it is in the X. Yeah, because the system is looking for Abdullah JS steel. All right. So I can see here. So we have a new member on the Discord community. So I want to welcome you publicly now that you did that. So feel free to introduce yourself on the introductions channel of the Discord server, if you feel comfortable doing so there is a template at the top of that channel that you can copy paste and change with your things like interactions, say hi, I'm feel free to introduce yourself.

What's your name? Where are you from? What are your preferred pronouns? If you're a student or teacher, whether you would School, how do you find nine Getting Simple in the machine learning live stream, your favorite or first Coding language and other hobbies or interests. Yeah. And if you're new to Coding, that's okay as well.

And this is a template based on The Coding Train site channel. All right. So with that, I'm going to continue really quickly. I'm going to go back here again, trying to be concise today and not spend too much time with the nitty gritty of this thing. So what I'm going to do is I'm going to go to the terminal.

I'm going to go back to that same folder. So we have this all 27, so we have this next to yes. Blog and we're going to see we've stopped that website. So that's it stopped. And let's see if we can record that code that we used to. Okay. So these would be next. Yes. Blog TypeScript. That's good.

We have the basics final, so we could actually do here TypeScript final, and we already have next creating next app from before. So we don't have to install that now. So we'll run that. Yes, we're in the right folder. And after that's cloned this installs all the dependencies, this already has TypeScript installed, we're going to go.

So these would be the name of our apps, or we're going to enter that directory. I'm writing that before this finishes and I can click on MBN, run that I think. Yep. So it's there. So I'm going to stop it because I'm going to edit this on visual studio code and we're going to take a look now. So these already has it Ts config.

We already have the packet. So we have all those dependencies, everything we did. And if you take a look now at our components our lab and where is it? Fetus? Posts API. Yeah. So we have the app here at TSX and the index TSX. So everything is now on a React application right now with TypeScript and next year has installed.

And now again, if I go here and these already installed all the, are you do MPN run dev? Now we can go back to our application in 3000 and I will have the boiler plate, like start application. We don't have the the configuration. So of the things that I customize, but, we can do that again.

So let me get that one. And then we are here self introduction. Copy that again.

React and TypeScript. All right. So now we have that here. That's pretty cool. We could even add here. We need to see this in more in detail, but I think we can put this like this. So we put an object here. Yeah.

And all right. And now the picture, so we just need to,

we copy, let's see, copy next year's blog, public images profile into next year's blog, TypeScript, public images. Yeah. And maybe that's updated. All right. So we have our application. So this is like a replica of the application we had before, but completely built in React TypeScript using next a yes.

What's special about next year. I speak before we wrap up or moving to something else. What's special about this is that if we go into pages, so we have API and we have posts. I could, if I go and look at my page, I have posts. And by these are, we have an ID that refers to that posts a SSH Error by creating these folder posts, we do create this route.

So this is, you can see

you can see it in here. So we, by creating these posts folder and then this ID, this is going to be our URL. So it's last posts is last. And then the idea of the post, if we do the API, hello, we'll do a slash API slash hello. And in kilo, we have this API, which is just a it just, so Jason responds, that says hello. And we can see that if we go here and say, okay, BI lo and we have that, and it's a Jason response. You can see it here on the where is it on the bar sources? Maybe. Yeah. Hello. So here in,

can we see that?

Okay. Here. So in Kelo, we can see the Heathers and we can see that this is, so we do that.

Yeah. Now first time we load. So we have here a 200. Okay. This is our URL is a get and it's application Jason. So we have a perfectly formed Jason output here. And, we could for my whatever names Pier no Maria or something. Or we cannot from the public, they're a little bit of this.

Sujay not up, which is yeah. And the scenes. All right. So yeah. So now we have the names and we have a perfectly formatted Jason right there and easily, we could make another one. So for example I don't know, they a lot of Ts or something, and then we just copy paste that one and they say yeah. And then some data,

right? No, we could access that one. So we have this one here, we will here API data. And then we have that one there, which is pretty cool. So these boilerplate application comes with the API, a directory and the posts, which, it's a bit of a more complex. It actually. Gets some properties from the front of the data, which guess is here on these markdown files.

So it does get some static items to render them service side with Mark Daniel, and then put them in there. And then we could also create a new file here and say, for example I dunno, bio TSX and we just copy the boilerplate from our index. And two, we don't really need all this stuff.

All post data. First let's see if it works, right? So we have bio here already, which is already working. Now we can say layout home. This is a site title, we could put here different site title, which is bio their rights on that. Wait one second. So site title next year. Simple. So we put bio, so you get that there.

And now I'm just gonna remove everything. So I'm gonna just leave a section and remove this.

Layout seems home and this is not home. So what happens? All right. So we have layout, which if it's home is going to run there, the image greater, if it's not during their something else. So we have our biome, we don't really need all these things. Now we don't really need to get this data so we can remove all these things and this, and that's it. So back to home, cause he's not home.

And now from index, we could link to R let's take a look at the layout back to home, right? So we just bio and we could do something like this. So instead of back not from here. So I'm going to link from the I'm going to make a new section just to try it and I'm going to make a link and it's going to be called by a beach.

And he's going to go to bio, so we know go back. And now we have a bio page here, which we could, this section could be moved up here and now we click and we go to bio and then we back home and then we're here. So in a nutshell, what next IES does is it's a, it's an opinionated framework of how you have to build or use React in order for the framework to expose your website as a axon actual website that can be served on a port, as you can see super fast because he's React, but it uses the history API to create actual URLs.

And he's doing service. I rendering. So when I load, I think you actually, if I, or here I'm actually let's see. So we have this thing here, we go to the source code with command, I'll you. And then we search for that. And indeed the content is there. And something I was trying is if I do this right, I get this URL and I do curl download that website and then the output, put it on my desktop.

So by other HTML, for instance, right? So these downloads, and then if we open that file, we actually get that code, which lets us actually open it to read it Chump, not the Tim. And so if I go here, right click for my document and you can see this is the actual HTML, this is SEO friendly, it's properly formatted.

And it's something that Google would like to do index as a web result of a search result. And we have all the content here, which is, that's really important because that's quite many people, including myself are afraid of when you're like, say, okay, let's use React to build a single app, single page application, but these Getting Reid of that and problematic.

And it does it by creating a React component or like a class file bear route that you want to have. And by default, it does use that folder on file name, convention to establish the route of the things that you're going to be showing in there. And I believe that as far as I can see the routes and the ID are somehow magically converted from the name of these files.

So for example, if I were to put here a new post, so say Next. Yeah. So Nono MA Nono.MA live for instance. And then we might copy just the template from here. So this was written today Nono.MA live and then we raised some rank down here. You can browse so you can watch live stream or live live streams on the, I put none of them, my last live, for instance, we now can go here, go back to home. We have this post, which is probably being sorted by date. So from new, old to new, so new to old, and I click here and I have that Mark down page rendered, which is fairly simple for any quick, and I'm pretty easy to make. And you can think of this. It doesn't, you don't really need to have this con this sense of that.

You're building a website with different pages, but maybe a single lap that every time you click, you can send that URL to somebody. You can open a new tab and then you get to the exact same state at which you were. So for example, we go to two forums or pre rendering, right? We can go here and open that or open it for instance, in Safari.

Cool. And the entire website works here as well.

All right. So that's a quick intro to many things. I know we've gone to many different things and probably if you're not familiar with this, it's really hard for you to grasp. I've talked about React and the next years and these things before not next year's, but React on that trip and Electron, we could all add this this beach into our Electron application.

I don't really know what the main changes would be. That will be required. We're not going to do that now, we don't really need to do that right now. But if we do have this running and it's a localhost 3000, so it's still here, there is something super cool. Let me see if I have it native fire.

And you just put here a URL. So localhost, 3000. That's my web. I put it there enable converting icons and able to blah, blah, blah build team to here or right. Move up. Into my desktop. All right. And we got is a Darwin app, which is a wrapper of a website. So it's not really an Electron app per se, but it's a wrapper of an Electron lab, which seems like it right now.

Doesn't work. He's called. All right. Maybe. Okay. So let me do this properly. So I'll go to the desktop, I'll remove the app and I'll, I'd run the command again, so you can see it. I guess I was on a weird folder, native fire, and then HDPS and then the website, and then unable to other name falling back for bringing Electron preparing.

Not sure if this is actually working.

Okay. Doesn't work. Ah, not sure if this is an Error with native fire or with me trying to, so just to show, so we don't spend a lot of time with this, so just to show the potential behavior so I can go to native fire with any URL. I don't know, for what reason. Oh, okay. Okay. Okay. Okay. Let's actually, let's step back for a second.

I had an error there. I was using HTTPS, which doesn't exist. So we're going to build this one. And by the way, we're also going to build native fire. For example, I wanted to have my YouTube channel Electron lab Nono Martinez Alonso there, or my Getting Simple website. So Getting Simple dot com and that's it.

Boom. So what this does, and this is really quick there's some errors there.

Run Verba file. Ready, access in conversion. I'm not sure what's going on.

Let's see. I'm not sure if this is going to work, but not that one.

Nothing works. Do they here? Native fire. So NPM install.

Okay. So NPM update global native fire. Let's see if that actually works. Remove that.

Cool. Now I'm going to try once more native fire HTTP, localhost, 3000. You think this is going to work? It looks different, but I'm not sure there's an error SIM link. Not sure what's going on. Yeah. Maybe

let's update Electron because it seems like the version is 12 and we might, there might be like a Train. Yes,

huh.

All right. So that's the, that end right now. But you would see an Electron app wrapped on. That's not that impressive either way. All right. So we've seen. That. So I will now stop on this section. We've covered a lot of things, so intro to React. So at the end we saw on the intro to React.

We've seen next. Yes.

Look how fast this is, because he's probably appealed with next to yes. All right.

Call to action

I will just remind you to like the video. This is a really good way to support the channel and the work that I'm doing here and the subscribe, if you're not subscribed yet, because this is a way in which you can get notifications when I go live next or when I upload new videos you should join us on the Discord community, that's something you want to do?

It's nono.ma/discord. A lot of people there. Yeah.

And thanks a lot for watching and I'll hopefully see you next time.

BlogVideoCodeReactNextjsTypescript