Next.js + React.js tutorial - YOU REALLY should be using Next.js

Next.js should be your go-to for any React.js work these days. If you're using Create React App...STOP! You're missing out on the joys of Next.js.
This tutorial covers Next.js for building React.js apps, websites, blogs. Almost web development you do with React will benefit from Next.js.
Next.js is perfect for building an SPA (single page app) with React.
Next.js is an amazing SSG (static site generator).
Next.js is a great node.js server for your frontend UI.
...there's almost nothing Next.js isn't great for.
~-~~-~~~-~~-~
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
• Tailwind CSS - why CSS...
~-~~-~~~-~~-~

[@csmithDevCove]

Dude I need you to create videos more often. You were the first KZbin person that got me into web dev years ago. At this point when you post it's like nostalgia for me lol.keep it going sir.

[@learncodeacademy]

Nostalgia, haha. Thanks for the love. After a lot of transitions for about a year, I'm happy to be getting back in the swing of videos.

[@xenialxerous2441]

@@learncodeacademy Yes, I totally agree with him. I rewatch most of your videos whenever needed. I've an opinion about you that, for me, you are the authority when it comes to web dev and Javascript. Love to see you more often!!

[@unitygamermaker9941]

Where were you I missed you 😭😭 but finally after more than a year you are back

[@learncodeacademy]

Yeah...was way too long. I actually super missed doing videos.

[@MaxRovensky]

I learned JavaScript and React from your channel years ago. I then went on to work at Vercel (then ZEIT), including partly on Next.js for 2 years until last December. I'm now an accomplished software engineer and couldn't be happier with my life. Thank you for what you do!

[@ouss]

did you do front or backend dev?

[@MaxRovensky]

@@ouss both A lot of the dashboard is my work, entire team invite system, both back and front, large chunks of git integrations and more that I won't remember off the top of my head

[@robertgregg7028]

Haven't even watched this video yet but have just completed some other courses on redux as a project I am working on uses an older version of Redux. You are a phenomenal teacher and vert grateful to have found this channel. I hope you have continued to hug your wife! haha

[@jazzmaster89]

Been meaning to create a project using Next, this was my motivation. Great content, thanks for the info.

[@webunlocked]

Ohhh he is back! 🥳

[@limapix]

Hey Will! Wow, great to see you back on KZbin! 😃 You're one the guys on KZbin who inspired me the most to become a front-end developer. At that time, I was working in a call center in Ireland. And now, I work as a front-end developer in Barcelona! 😎 And I have my KZbin channel too...but in French! 🇫🇷

[@learncodeacademy]

Hey thanks! Wow. Amazing to hear what little I've done has been of help to you. Way to go starting a channel! You'll be amazed how much it can grow over time. Best of luck to you.

[@MarcoAntonio-gi4tz]

It's been some time, I used to watch and study your videos to prep for web dev (I think I watched all). And if you are planning to come regularly you have a strong base audience for what I see in the comments. I hope you have plans for: Web Dev RoadMap 2021. It was one of my favorite videos. Welcome back.

[@learncodeacademy]

I'm working on that video now, actually! I don't always do it annually, as I usually wait for the moment of "there's enough new stuff to say"

[@NoNo-pz4lm]

Hoping to see your yearly state of web development rundown for 2021! Thanks for continuing to create content

[@learncodeacademy]

I'll be doing it fairly soon ~1mo.

[@shafu_xyz]

Quick and to the point! great video! would like to see more videos!

[@learncodeacademy]

I'm working on more of my favorite react tools.

[@anilloutombam]

Dman man long time.... Welcome back, good to see you back🙏🙏

[@learncodeacademy]

Appreciate it!

[@imraff]

2:46 "and now I can go to /products and also get... Hi" Watching this on 4/20 was too perfect.

[@xenialxerous2441]

Hey there! You may not believe me, I check your account/channel every now and then to make sure whether you've uploaded something new esp the one video that you do almost every year about must know tech.. Love your content, learnt a lot from you. Ever indebted and lots of love and respect 🤗

[@learncodeacademy]

Dang! Thanks so much for sticking with me. I appreciate it!

[@andylinkOFFICIAL]

welcome back dude. watching your vids since 2014.

[@limapix]

Thanks for the video, that will be definitely useful for me as I use React at work but I haven't used Next.js yet! 🙂

[@learncodeacademy]

Oh, you're gonna love it!

[@yashsolanki069]

This video truly shows the awesomeness of nextjs. Great work ser!!🔥

[@patrickc.6183]

Great content, and it's awesome to see you back to making videos!

[@learncodeacademy]

Thanks a ton!

[@matthewao]

Simple and concise, I love it!

[@learncodeacademy]

Thank you!

[@micoberss5579]

One of the best webdev youtubers is back.

[@learncodeacademy]

🙇 Haha. Well thank you very much!

[@haans8]

its been a long time since i learn html, css and responsive web design, missed your voice haha

[@learncodeacademy]

Brings you back to "How to Train Your Dragon" from what I hear :)

[@GifCoDigital]

Good to see you back mate!

[@learncodeacademy]

Hey, thanks!

[@Gigusx]

Could you give some (quick) examples of those apps you don't think you'd use Next.js for? Thanks for the video!

[@learncodeacademy]

The only scenario I can think of is if you want it to be really light on JS and you don't want React to begin with. Then I'd probably do something more along the lines of just a static site generator (eleventy maybe?) and svelte for any superlight JS work?

[@Gigusx]

@@learncodeacademy Damn, that'd be very few cases indeed! I guess it highlights how much progress Next has achieved, and how much people like working with it. Thanks for all the insights, will definitely give it a try! :)

[@dyunior]

The man is BACK!!

[@learncodeacademy]

Sorry :( was off for way too long.

[@mabroorahmad2182]

Oh you are back! Thanks!

[@trevorlahey6175]

So great to see you're back. Right on point with the tech and especially with your way of teaching. It's really the best learning content I've come across on YT, really concise and on point with a great pace. I learnt React from you years ago, and have since then actually had a few times where I thought "You know, I could really use a video by @LearnCode.academy on this and that subject, wonder what he is up to nowadays" - so please, keep doing more videos!

[@shaineelnayak3465]

Simple yet satisfying

[@eduardolopezcolmenero]

Great video!!! 🤘🏻I’m really new on react so my question is do we have to use nextjs or create react app? It is just one or other? Basically I have to choose one?

[@tobara]

Nice, in bite-size. Plz make this a series.

[@learncodeacademy]

Already on that! There's a little more to show about Next past the intro layer coming in another video, then...some of my other favorite react tools.

[@AbiodunSam]

exactly what I'm looking for. Thanks 🤝

[@webhelp4574]

Welcome back mate... Please create a new React series.

[@jeffery_tang]

WELCOME BACK!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@jackfairfield1109]

Hey Will. Thanks for putting this together! I'm definitely going to try out Next.js in my next project. Do you see this as a full replacement for react router and express.js? Or is there still value to using those tools? Thanks.

[@learncodeacademy]

React router for sure. I haven't touched react router in a long time due to Next. Express...it depends. Next also supports backend routes by adding an /API folder nextjs.org/docs/api-routes/introduction If you want an API to be its own backend that deploys independently, then you'd still want express, apollo server, etc. But for any application where you want it all in the same server, then absolutely. Just-next is all you need!

[@jackfairfield1109]

@@learncodeacademy Thanks a bunch! Been a longtime fan. You're the man!

[@ytwatcher181]

Thank you for a new tutorial! 1) How do we manage state in next js? I guess we can use _app.js for this purpose, can’t we? 2)Can we use plugins for react in next js(react-spring, redux-toolkit etc)?

[@learncodeacademy]

It's full-on react, so you can use anything you want! Next.js is really the server-layer + routing + SSR/production environment goodies (or static site generation if you want to go that route). My favorite way is to use mobx-react-lite, but lots of people use react hooks or redux. I have a video coming up on mobx-react-lite soon.

[@kotopult]

Yay, you are back! Still using keyboard you advised 😄

[@learncodeacademy]

Hah nice! I only recommend things I personally love, so glad I didn't steer you wrong.

[@alexandrmandryka7536]

Hi. Thank you for video. It's relly cool. Tell me, how do, that prefetch will not work on hover? I see one like a bug.

[@Adam-eats]

Welcome back friend!

[@learncodeacademy]

Thanks!

[@TheRisingSilver]

what did you use to make your terminal look like that?

[@bhuvaneshdesai3053]

Hi, i already have a react app, i want to make a particular route in react app as separate next.js app for SEO. please can you tell me how to do or where to start from

[@andriykuts1981]

Awesome explanation, thank you!

[@learncodeacademy]

Glad you enjoyed it!

[@md.mahbuburrahman6155]

Great tutorial Can you please let me know which color schema you are using at vscode?

[@learncodeacademy]

Sure! I'm using the "rainglow" package, the "rebellion" theme on that.

[@parasbuda9174]

loved it very much plzz make a ecommerce site using next js plllzzzzz

[@shubhamverma7613]

Hi.. Could you please provide the GitHub link of these setup/code?

[@damo190]

Bro, will u make a detailed video on web accessibility and aria attributes?

[@learncodeacademy]

This may be one of the few areas I'm not passionate enough about to do an "authoritative" tutorial on. There are others out there where accessibility is their passion and they have more research and opinion on the matter.

[@sayyidishaq7797]

The legend is back

[@belminmuranovic8109]

Is it possible to create a mobile app with nextjs?

[@oleksandrdiatchenko1192]

Cool intro! Thank you.

[@mushfikf.rahman9700]

After long time ❤️

[@learncodeacademy]

Yes. TOO LONG.

[@aundefined]

Do Nuxt.js next!

[@masterkhoa]

I think this video is a bit outdated. Nowadays you should use "yarn create next-app" instead. Can you explain why you didn't use it?

[@prudhvichinnam1488]

Do react modern tutorials

[@learncodeacademy]

This is ...kind of a roll into that - at a higher level. Going to be releasing multiple videos on the tooling people should be defaulting to for React work.

[@MarcelRobitaille]

Long time no see

[@tusharpapnai2907]

long time mate

[@learncodeacademy]

Yes, too long

[@kennyb5537]

This video is mis-informing people. There are so many reasons why you wouldnt use NEXTJS ... BS