Learn Next.js With TypeScript in 30 Minutes

Подписаться 29 тыс.

Просмотров 91 тыс.

50% 1

0:00 - Introduction
00:41 Boostrap Next.js application
03:01 - _app
4:00 - Build a static website
22:23 - Build a server-rendered website
25:14 - Environment variables
26:50 - Layouts
31:30 - Styling & CSS
Repository: github.com/tomanagle/beginner...
Next.js is the best tool for building React applications in my opinion. The developer experience is fantastic, it has a tone of well-designed features and your final product will be the best that it possibly could have been.
By watching this video you're going to understand:
- How to bootstrap a React application with Next.js
- and, how Next.js can help you build a production-grade React application
Next.js has a tone of features but in this video, I'm only going to be covering the main ones you need to get started. After watching this video, I encourage you to go to the Next.js documentation to see all the available features.
Next.js can be used to build static websites, along with server-rendered applications. In this guide, I'm going to be showing you how you can implement both of these rendering strategies, so you can decide which one best suits your application.
🌎 Follow me here:
Discord: / discord
Twitter: / tomdoes_tech
Facebook: / tomdoestech
Instagram: / tomdoestech
TikTok: / tomdoes_tech
☕ Buy me a coffee: www.buymeacoffee.com/tomn

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 99

@TannerBarcelos Год назад

Link with href makes it feel like a basic anchor tag. I love it. I love the experience of typescript + next. I love the routing by file. Everything is so quick too. Wow. Alright, I’m sold. I’m gonna dive into next. I use react at work, I need to switch it up with a fresh environment lol

@Jambajakumba 2 года назад

Awesome stuff Tom.👏🏼 I've just discovered this channel. Can't wait for more content

@TomDoesTech 2 года назад

Welcome aboard!

@ranjmahmood2429 2 года назад

This is a great tutorial, Thank you.

@biggles325 2 года назад

Dig your fast pace, no bs, straight to the point 👍

@TomDoesTech 2 года назад

Thank you!

@Dave-dl8ey 2 года назад

Yes! Please Don't turn into another "youtuber" with long intros, and stupid lights. Stick to just coding and keep it straight to the point and you're way better than the rest! :)

@TomDoesTech 2 года назад

@@Dave-dl8ey That's so kind of you. I do want to imporve the quality of my videos, but only they will always be 0 fluff

@DevRel1 2 года назад

I learned several things in this video that I didn't know I could do in Next. If you are familiar with CRA and Gatsby it's crazy how much stuff you already know. Nice video mate!

@TomDoesTech 2 года назад

I'm glad you liked it. I am going to do an updated version for all the new stuff Next added but there are so many features in Next

@borisnkuako2936 2 года назад

Great tutorial ! It Helps me a lot to understand Next with Typescript 👏

@TomDoesTech 2 года назад

Glad it was helpful!

@SuperShivammm Год назад

Too good dear, explain all major fundamentals of next with typescript. Thanks

@samtech6181 Год назад

Perfect explanation thanks a lot!

@MarinaTrethewey Год назад

Great tutorial, thank you! 👍👍👍

@julienl1915 2 года назад

Thank you very much for this great video

@Lex-ji9zj 2 года назад

I like your style of teaching, hope the advanced tutorial with Redux in the future 🙌🏿

@marchurst832 Год назад

Helpful, informative, and clear. I do wish that you hadn't edited out your error correction and all of your changes. A few times you would typo (ie: customer instead of custom) from LSP, and then it just ... blipped to the correct thing... if only because showing the troubleshooting process will help people figure out HOW to solve their own issues while following along/building their own projects.

@shivanshpatel4072 Год назад

Type 'typeof CharacterPage' is not assignable to type 'ReactNode'.ts(2322)

@wchorski Год назад

same ^

@superurgmail Год назад

Same

@samsammm7231 Год назад

Sameeeee. Any solution?

@akshaysrivastava4304 Год назад

It seems there have been some changes with Next after this video has been made. I am also getting the same issue. Using ReactNode instead of typeof CharacterPage works for me.

@andycetnarskyj2848 2 года назад

GReat tutorials, came across it after trying to work out adding the typescript props to the .

@TomDoesTech 2 года назад

Glad it was helpful!

@danilbaranovsky9875 2 года назад

Good and usefull tutorial. Thanks for clear and understandable english too and hello from Ukraine

@Arabian_Epileptic Год назад

Thanks Tom

@RobertWestDavid Год назад

Thank you

@mritunjay4ever Год назад

If you following along and didn't see him setup Character type; it's the same as Welcome just change it.

@Szergej33 2 года назад

Daaamn until 5:40 I was so confused, why the hell are you using typescript if you dont use any types at all. I was bamboozled :D Great video, and as an Angular developer wanting to get started with react, I find it really useful.

@realtorBG 2 года назад

just awesome

@pooyadehghan17 Год назад

goddamn i love your tutorials body !

@tonypocketcode6673 Год назад

Really good tutorial ! Thank a lot ! I started with zero knowledge. Now that I have the basics i will continue to practice ! Quick question, I noticed that your code cleans up with every backup. Is it a vsc extension? Or is it a video cut?

@TomDoesTech Год назад

Yeah, I have auto format on save set to true and it uses prettier to format

@Kromeshnik05 2 года назад

Thank you for this tutorial.

@emanuelacosta2541 2 года назад

DUDE thank you, maybe I'll get my second job with you tutorial hah

@TomDoesTech 2 года назад

Hopefully, fingers crossed. If you have any questions hop into the Discord

@emanuelacosta2541 2 года назад

@@TomDoesTech Thanks a lot for the support! I'll do my best and of course I'll join the discord!

@smnomad9276 2 года назад

hey man thanks for the great tutorial! What's the theme you're using in VS code?

@TomDoesTech 2 года назад

Just default dark I think, not sure

@dailymeow3283 2 года назад

I'm lookin for next 12

@ekamauloho4519 2 года назад

this is a nice and helpful introduction as far nextjs is concerned, thanks a bunch please make a video on TTD

@wchorski Год назад

still unsure about the difference between using hooks like "getStaticProps" vs a "fetch" inside the Component's default function. Should I avoid using fetch inside the Component's default function all together?

@TomDoesTech Год назад

getStaticProps is run only at compile time, where the component is rendered at run time, so your fetch in the component will be called every time the component renders.

@DanteMishima 2 года назад

Thank you so much for this! Could you share the link to the site that generated interfaces

@TomDoesTech 2 года назад

app.quicktype.io/?l=ts

@DanteMishima 2 года назад

@@TomDoesTech thank you

@mohdazminmohdazmi2782 2 года назад

i have question about [id].tsx for dynamic route..is it can be use _id.tsx ?

@TomDoesTech 2 года назад

[id].tsx is for dynamic routes, if you just make it _id.tsx, your route will be /_id

@kiennguyencong900 2 года назад

Can you show your VS Code Extenstion ? I see you used keyboard shortcuts to format the code very interested

@ador95 2 года назад

VS Code has Ctrl + Shift + I shortcut to format the code properly. You can configure the TS or JS format with the Prettier extension. It's a really useful feature, try it out!

@user-so5sp3dp3z 2 года назад

Thanks for your lecture. but i wanna solve that problem. `Type 'typeof CharacterPage' cannot be assigned to type 'ReactNode'` how can i fix this error ? Probably because of the character page format...

@ajadavis2000 2 года назад

same issue - did u resolve?

@user-so5sp3dp3z 2 года назад

@@ajadavis2000 nope..not yet... T.T

@ajadavis2000 2 года назад

@@user-so5sp3dp3z i got it: just changed the function to: CharacterPage.getLayout = function getLayout(page: React.ReactNode) { return {page}; };

@user-so5sp3dp3z 2 года назад

@@ajadavis2000 thanks. but after i build , i got a webpack error. did you try build ?

@shirley8840 Год назад

@@user-so5sp3dp3z I change the code to ```CharacterPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; ``` and choose the getStaticPaths & getStaticProps method to do dynamic route.

@davidtojalvarez6424 Год назад

Goat😎

@webdev5180 Год назад

how to make typescript autocompletion or auto suggestion for setting css class names in components ? Does anyone know ? :)

@SonAyoD 2 года назад

can you explain the get layout function, it went over my head

@TomDoesTech 2 года назад

The Next docs have a good explanation on this approach to layouts

@joemart6887 10 месяцев назад

@31:22 I had to put `ReactNode` instead of `typeof CharacterPage` for it to work. Is this okay?

@TomDoesTech 10 месяцев назад

Yeah, that will be fine

@metaknight8846 Год назад

At 6:24 why does the variable have to be "results" and not anything else?

@randompointlessness2766 2 года назад

I don't think you needed to cast that id to a string before returning from the api, ain't it already text once it gets read by the app..

@TomDoesTech 2 года назад

You might be right, casting to a string is a habit for me.

@HoangNguyen-pg9td 2 года назад

Not much explanation tbh. Really hard to keep up when things just appeared out of nowhere trying to cut the video time.

@nikolam-dev 2 года назад

nice 🔥

@alclswk 2 года назад

22:00

@igorluchko4236 Год назад

Seems like that: .container { ... height: 100vh; } makes a mess with list

@horacinis 2 года назад

I did not understand at all xD but that's ok, I have only seen TypeScript very briefly so it is not your fault, thanks anyway!

@ashiqdey 2 года назад

not clearly visible, have to switch to 1080 for better visibility. Can you please record zoomed

@TomDoesTech 2 года назад

I record at zoom level 5

@niallnigeynige Год назад

The editing of the video seems to be all over the place and hard to follow along. One minute your in the file with getStaticPaths and getStaticProps and the next you are working on the file with getServerSideProps without explanation.

@TomDoesTech Год назад

Yeah, my editing skills are very bad. I have gotten better since I made this video

@jeremymunroe Год назад

@@TomDoesTech i think its just fine, with experience you understand whats going on, I loved the explanations. But if youre just starting Typescript it could prove difficult

@davidscarios 2 года назад

In the end of video, i only understand a little :(

@IvoCarbajo 2 года назад

is there any genuine reason why you'd use yarn over npm? I literally don't see a single one... perhaps you could enlighten me? Also, 10:01 yeah I don't see how that's useful, maybe I don't fucking want to block images from external sites from loading... That should be an optional feature and it should be disabled by default... The entire Next Image component seems kind of pointless to me but that's just me I guess...

@TomDoesTech 2 года назад

I've found yarn to be a bit faster and less noisy. If you don't see any benefit of yarn, then don't use it, it's not a big deal. I think your qualms with Next image are something you should take up with the Next team. I think the security-first approach is a good decision.

@IvoCarbajo 2 года назад

@@TomDoesTech About Yarn, yeah I think I'll pass, I was genuinely curious why so many people use it, fair enough tho And about Next images, yep yep just voicing an opinion, you obviously have no say in how Next create their components, I just feel like it can lead to unncesessary confusion especially when you're usually dealing with external data and therefore images usually don't come from the same origin, plus in some more specific scenarios you might even get images from completely different origins you can't even predict

@AnonABC123 2 года назад

You didn't really explain anything here. I have a very good knowledge of react but wanted to know more about Nextjs & typescript...you just sped past all the details in which you should have probably gave more explanation and a better overview as to what you are doing and why.

@TomDoesTech 2 года назад

Thanks for the feedback, I will try to add more detail in future videos. It's a difficult balance between adding detail and making the video short enough for people to actually watch.

@marbles1339 2 года назад

I agree, I needed to research and figure out some parts myself

@joshuagalit6936 Год назад

I don't like how you put typescript in the _app.tsx hahaha just sharing

@TomDoesTech Год назад

what?

@joshuagalit6936 Год назад

@@TomDoesTech sorry for misunderstanding this is what I mean type NextPageWithLayout = NextPage & { getLayout?: (page: ReactElement) => ReactNode; }; type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; }; function MyApp({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout ?? ((page) => page); return getLayout(); }

@WarframeCrunch Год назад

Next.js with Typescript is ridiculous in my opinion.... typescript should help me but it just add another layer of complexity that I need to learn...

@TomDoesTech Год назад

I mean yeah, you could say that about any tech that you don't yet know

@juanpumpkinpie6550 2 года назад

there is just: I'm going to.. without any explanation. Nothing to learn.

@TomDoesTech 2 года назад

Sorry I don't understand what you are saying

@de-ar Год назад

I think he meant you didn't say why you did something and just said "I'm going to do this n that". IMO a bit of knowledge is required if you're going to learn from videos, otherwise you should explore official docs.