Introduction to Next.js

Introduction to Next.js Typescript with Next.js

Topics:
Scott Moss
Scott Moss
Initialized

This course has been updated! We now recommend you take the Introduction to Next.js 13+, v2 course.

Check out a free preview of the full Introduction to Next.js course:
The "Typescript with Next.js" Lesson is part of the full, Introduction to Next.js course featured in this preview video. Here's what you'd learn in this lesson:

Scott gives a brief overview of the already existing plugins in Next.js, and explains that it is best practice to check when a plugin was last updated before adding it to a code based.

Get Unlimited Access Now

Transcript from the "Typescript with Next.js" Lesson

[00:00:00]
>> So before we move on to API routes, I want to talk about Typescript support so do you want to use TypeScript? And they say yes, they made it super easy to do all you have to do is make a.ts. config, or is it let's see us.com was it Ts, Ts config dot JSON.

[00:00:20]
>> Jason. Yeah, okay, I can't remember yeah, there we go that's all you got to do and then from there if you just start this, oops. Right here, you can see, hey, looks like you're trying to use type script but don't have a required package install. So it just by adding that file, It detected that I'm trying to use Typescript.

[00:00:44] And it's trying to like automate some stuff for me, but it needs me to install some packages. So if I just installed it, it looks like it even detected I was using yarn, which is really impressive I think you're using NPM I might say NPM here instead. So I'm gonna just install that because I do like Thai script I prefer Thai script and then now if I run, you're on Dev look at that.

[00:01:07] So it says we detected Typescript in your project and created a Ts config JSON file for you. Like wait, what you mean so if I go look at this Ts config boom, they just populated with everything I need for Typescript I don't have to do anything like that to me.

[00:01:22] It's pretty amazing because for the longest one, I was kinda like on the fence about tie skirt, one of the biggest things for me, it was always configuring this file. Like, wait, how do I configure this thing, and what's the difference between this target and this live versus babbles target and live versus WebEx target and live.

[00:01:38] I don't understand so I always kind of just avoided it and we'll just go copy and paste someone else's and not know I do understand it. So it's not so intimidating but still this is very nice and it's insurance will work very well with a next stuff. Our change one of these to TSX I guess you can see it's already breaking because Typescript doesn't know anything about this sx, right?

[00:02:06] So, it's already working it's already breaking so this will obviously fail if I tried to run this let's see I guess they just ignore those types of errors. That's really cool there we go so yeah, it still works with Typescript out of the box really good to go so pretty nice can't argue with that.

[00:02:29] That's the easiest Typescript setup I've ever seen [LAUGH] if I, find me better one, I'll wait. I'll wait for you let me know because I haven't that's pretty legit in fact, I don't know why everyone doesn't do that like ridiculous.