Installation, setup and very first NEXT JS app launch || Next Js Tutorial
Installation, setup and very first NEXT JS app launch || Next Js Tutorial
Launching very first NEXT Js app. Bonus: installation instructions for VSCode free IDE and node js.
Next Js (React) Tutorial #01 - Installation, setup and very first NEXT JS app launch
Hey Logical People, in this Next.js tutorial video, we will learn about how to install NEXT JS and all its dependencies and subsequently we will launch our very first NEXT JS app.
Learn:
✔️ How to install VSCode IDE
✔️ How to install NODE JS
✔️ How to install NEXT JS with TypeScript
✔️ How to install VS Code for NEXT JS with typescript
✔️ How to launch very first NEXT JS app
✔️ NEXTJS/React tutorial for beginners
0:00 Introduction
0:47 Install VS Code IDE
2:55 Install Node JS
4:30 Install NEXT JS
7:13 Creating NEXT JS project
9:07 Launching very first NEXT JS APP
NEXTJS: https://nextjs.org/docs/getting-started
NODE JS: https://nodejs.org/en/
VS CODE: https://code.visualstudio.com/
Content
4.24 -> Hello logic lovers. This is our very first video
of NEXT JS react fundamental tutorial series.
12.8 -> In this video we will learn how to set
up an IDE for better coding experience.
18.24 -> We will use 'visual studio code' then we
will learn how to install NEXTJS and all
24.72 -> its dependencies, which is only one and it's
called node.js then we will also customize our
32.48 -> vs code editor and install required plugins and
at the end we will launch our very first next
39.44 -> app. I hope you are excited because I am pumped
up. So without further ado, let's get started.
47.2 -> Go to google and type visual studio code, the
first link that pops up just click on it it
57.04 -> will take to take you to visual studio code site.
Hopefully it will detect which operating system
66.56 -> you are on, I'm using windows, you could be using
a MAC, you could be using Linux, doesn't matter
73.6 -> you can download this visual studio
code and install it on your machine.
82.16 -> Once you do that, you're gonna
end up to something like this.
88.24 -> Your visual studio might look little
different than mine but it's okay
95.04 -> there's nothing to worry and probably
yours is looking something like this.
104.56 -> If you want you can keep it this way if you
like the dark theme. I prefer light theme
109.76 -> therefore I switch back to light but I've
also realized that for recording purpose
116.48 -> for tutorial purpose it's better to put it in a
dark theme so I'm going to use the dark theme.
123.68 -> There's one plugin that I use I'm
going to use during the tutorial
128.08 -> and that would be PRETTIER. What you need
to do is click on this button 'extensions'
135.2 -> and search for prettier P R E T T I E R.
140.72 -> You should find something like
this, click on it and click install.
145.12 -> I've already installed it therefore I don't see
the install button here but you should install it
152.56 -> and yeah that's about it. So once you are
done with it we are pretty much ready to go.
165.12 -> The second installation that we would
like to do is installing NEXT of course
173.28 -> so again go to google and we will
search for NEXTJS installation
181.84 -> The way I have designed this
tutorial is I'm going to build it
186.8 -> not in a lecture way but in a way that I would
normally proceed for any project. So I'm going
192.56 -> to use a lots of google I'm going to go through
a lot of documentation and you're going to do
197.2 -> that with me, so that you understand the journey
okay? Perfect!! So we're gonna jump to NEXT JS
206.24 -> and it says there's only two things required the
first is node and one of the operating systems.
215.52 -> So what we're going to do, we're going to
first install node. So click on this button
221.12 -> you will land up to node.js which obviously
or let's say hopefully will detect on which
228.8 -> operating system you are and then you download
the latest version. Download it install it and
238.08 -> once you are once you have installed it
we're going to test it. So the way you test
242.64 -> node.js would be, open a command prompt
and say node minus minus version.
252.56 -> and you should see something like this.
256.4 -> If you see something like this
that means you have installed
259.52 -> node correctly. So that's one thing is out of the
window and now let's look how to install next js
270.24 -> okay. So the way we install next js is super
simple, you just need to copy this command
276.72 -> and paste it in your in your command window. But
we're not gonna use this, we're gonna use this one
284.48 -> where we will use next js with typescript.
If you don't know what typescript means,
291.84 -> it's super simple go to google and search for
typescript and you'll find something like this.
298.8 -> So typescript is basically javascript
but with more advanced syntax typing.
306.88 -> For example when you use python you type some
class and then you put a dot and then you see
314.24 -> a list of all the methods that are that are on
that class so that's what typescript enables you
323.12 -> to do in javascript. Because it's easier it's
strongly typed programming language that you
330 -> can build on javascript it helps you fix your
code while you are you know coding, so yeah
338.8 -> what we're going to do is we're going to go back
to next.js and i'm going to copy this command
347.76 -> One thing that I always recommend people
is, always select a folder where you
354 -> want your project to recide. Let's say the
site basically so i'm gonna select a folder
360 -> for myself where i'm gonna put all my
all my data all my training related.
369.44 -> Excuse me all my training related materials
so i'm gonna say TTS. I created a folder
380.56 -> and here I'll click on this address bar and
I'll press, I'll type cmd and press enter.
388.56 -> What this does is, it creates
a command window for me
391.92 -> in the same location if you want
you can open a normal window and
401.28 -> you can open a normal window and
you can just simply go through it
405.92 -> and you can you can do a cd command and
411.04 -> navigate to that folder. Anyway,
since we are already in the folder
415.04 -> i'm gonna just copy paste what we
copied from NEXT JS website sorry
422.64 -> with this one. What this does is, it tells
NEXT JS to create a project with typescript
428.72 -> enabled. That's all it does you don't have to do
anything special so we're going to press enter.
445.52 -> It's going to ask you a couple of questions and
452.4 -> just say yes and you know give it a name
and this should be okay. So it's asking you
459.76 -> a project name I'm gonna say
TTS Text to speech tutorial
470.08 -> um okay project cannot have capital
names which is fine tts_tutorial
479.6 -> right here press enter it's gonna
download all the dependencies
485.6 -> and i'm gonna come back once
everything is downloaded and set up.
494.16 -> Alright everything is installed and
everything looks good. We're gonna test
501.52 -> our first NEXTJS project and you can do it the
way you see it on the screen. What you need to
509.12 -> do is just go to this folder, so cd tts and just
use the command that is displayed on your window.
518.8 -> So npm run dev press enter. What this will
do? It will spin up a localhost server for you
528.32 -> and then you can basically go to your browser
and you can see if all the installation was
535.76 -> correct and everything is working the way it
should. So if I go here on my chrome browser
543.52 -> and I click on and I type localhost 3000
you see that. I get this welcome to NEXTJS
551.92 -> and that's what basically you need. If you're
able to see this window you have done great job.
558.16 -> I think from this point onwards not going to
use command window so I'm gonna press ctrl + c
564 -> to terminate this batch job. And
once I terminate this batch job
571.12 -> I'm gonna open this project in visual studio
that we installed earlier. Alright logic lovers,
578.56 -> that's all for this video, in the next one we
will learn how to use vs code for our NEXTJS
584.88 -> app and we will understand the default files
provided to us when we created that NEXTJS app.
592.16 -> See you there and before you click on the next
video do not forget to subscribe and like the
596.4 -> video. It motivates me to create more videos
for you also you can use the comment section
603.6 -> to let me know what are the things you would like
to learn and I will create that tutorial for you.
Source: https://www.youtube.com/watch?v=i0SQ4r6_esY