How to Install Next.js on Windows 10/11 [2023 Update] Create First Next.js Project

How to Install Next.js on Windows 10/11 [2023 Update] Create First Next.js Project

How to Install Next.js on Windows 10/11 [2023 Update] Create First Next.js Project

Hello Everyone! Today in this video I am going to step by step guide you on How to install Next.js on Windows 10/11. And then I will also show you how to create a simple project in Next.js. Windows (64-bit).

Geeky Script (\r@GeekyScript) is Computer Science - Educational Videos Creator 🎉
You can support by buying a coffee ☕️ here —
https://www.buymeacoffee.com/geekyscript

✻ I really hope you find this video useful. ♥

✻ Please click on the CC button to read the subtitles of this video.

What is Next.js?
Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.

Now before installing Next.js you need to first install NodeJS in your system. So for that just go to step 1.

Step 1. How to Download NodeJS?
https://nodejs.org/en/download/
This page will lead to the NodeJS download page.

Find the installation file and click on it to download.
Now after downloading NodeJS save the file to the disk and follow the next step for installation.

Step 2. Install NodeJS
Double-click to run the NodeJS download file. Just follow the prompt as shown in the video and install NodeJS on your OS.

Step 3. Now after installing NodeJS in your system, it’s time to install VS Code. So for that just go to the following link:
https://code.visualstudio.com/
This page will lead to the Visual Studio Code download page.

Here find the exe setup installation file as shown in the video and click on it to download.
Now after downloading Visual Studio Code save the file to the disk and follow the next step for installation.

Step 4. Install Visual Studio Code
Double-click to run the Visual Studio Code installation file and install Visual Studio Code on your OS.

Step 5. Now to install and create a Next.js project just simply type the following command:
npx create-next-app mydemoapp

The instructions in this video tutorial can be applied to laptops, desktops, computers, and tablets that run Windows 10/11 operating systems like Windows 10/11 Home, Windows 10/11 Professional, Windows 10/11 Enterprise, and Windows 10/11 Education. This tutorial will work on all hardware manufacturers, like Dell, HP, Acer, Asus, Toshiba, Lenovo, and Samsung.

#Nextjs #NextjsInstallation #NextjsTutorial #Windows10

Topics addressed in this tutorial:
How To Download And Install Next.js On Windows 10 64-bit OS
Install Next.js on Windows 10
How to Install Next.js and Get Started

---------------------------------------------------------------------------
MY RELATED VIDEOS:
✻ All about Android Studio:    • How to install Android Studio on Wind…  
✻ All about PostgreSQL:    • How to Install PostgreSQL \u0026 pgAdmin 4…  
✻ All about MongoDB:    • How to install MongoDB on Windows 10 …  
✻ All about MySQL:    • How to Install MySQL on Windows 10 [ …  
✻ All about WordPress:    • How to Install WordPress in Xampp (Lo…  
✻ All about Java Spring:    • Spring Framework | Spring setup in Ec…  
✻ All about Maven:    • Maven project in NetBeans [ 2021 Upda…  
✻ All about eBook:    • How to Create an Ebook for FREE  

---------------------------------------------------------------------------
THANK YOU so much for watching!
Please make sure to LIKE and SHARE the video and SUBSCRIBE to the channel for more such videos :)

---------------------------------------------------------------------------
CONNECT WITH ME ON:
✻ Website: https://geekyscript.com/
✻ LinkedIn: https://www.linkedin.com/in/geekyscript/
✻ Twitter: https://twitter.com/GeekyScript
✻ Email: [email protected]
✻ YouTube channel:    / geekyscript  
---------------------------------------------------------------------------


Content

0.12 -> hello everyone I will come here to my Channel  today I am going to show you how to install  
4.38 -> next JS version 13 on Windows operating  system and then I am also going to show  
10.02 -> you how you can easily run a simple hello  world project in next.js on our browser so  
16.44 -> do watch the video till the end and if you face  any difficulty in Middle you can always comment  
20.82 -> in our comment sections I am always there to  help you and please do subscribe our channel  
25.08 -> that will really help me to make more such videos  so without any delay let's start our video now to  
31.02 -> install next JS you need basically two software  one is node.js and another is Visual Studio code  
38.4 -> so let's first go to our browser and just  simply search over here node.js download  
45.66 -> and you need to click on this download node.js and  here you need to download the long term version  
52.98 -> that is LTS okay so if you click on this Windows  installer it is going to start downloading the  
58.74 -> latest version of node.js so once it gets download  just simply click on the installer and it's going  
65.52 -> to show you the node.js installation wizard  generally just simply click on next over here  
71.34 -> and this is our license agreement just simply  accept this license agreement and click on next  
77.04 -> and this is where our node.js is  going to be installed click on next  
81.42 -> all these packages is going to be  installed fine just simply click on next  
87.54 -> and it is asking whether you'd like to  install chocolaty you can skip for now  
92.46 -> just simply click on next and it did it ready to  be installed just simply click on install and it's  
98.94 -> going to ask you for administrative  privileges just simply click on yes  
104.34 -> and it's going to start installing our node.js  so by the time it get installed I'll also  
109.92 -> going to download visual studio code so just  simply type Visual Studio code download in a  
116.34 -> new tab and it's going to show you this  code.visualstudio.com as a First Source  
121.68 -> result so here you can see we have download  Visa Studio code just simply click on that
128.82 -> and it's going to redirect to the official  site of Microsoft Visual Studio code  
133.62 -> so here if you just simply scroll down you can  see that we have its Microsoft Visual Studio code  
139.44 -> available to download for Windows Linux and Mac so  in here you need to click on this Windows version  
145.14 -> and it's going to you know start downloading  our Visual Studio code so let's go back to our  
151.62 -> node.js installation so here you can see that  our node.js has been successfully installed  
156.06 -> so you can just simply click on finish so our  node.js is installed and our Visual Studio code  
161.88 -> is also downloaded so let's click on the visual  studio code the installer and it's going to show  
168.9 -> you these Microsoft Visual Studio code license  agreement let's first minimize our browser and in  
175.56 -> here you need to read this license agreement and  click on I accept the agreement and click on next  
181.5 -> so this is where our Microsoft Visual Studio  code is going to be installed you need to have  
185.82 -> 354.7 MB of free space on our you know C drive  so everything is fine click on next Visual  
194.34 -> Studio code they're going to create this folder  click on next so here you need to check this you  
200.58 -> know create a desktop icon and I am also going  to select these two option this will going to  
206.04 -> help to open any project by just simply directly  right clicking on that project so it's going to  
211.74 -> show you on on Windows Explorer File context  menu and windows 6 product directory context  
217.62 -> menu right and other things are fine basically you  need to check everything click on next and install  
224.58 -> when you start installing our Microsoft Visual  Studio code so let's wait for a couple of minutes
231.06 -> so you can see that our Microsoft Visual Studio  code is also installed and our desktop shortcut  
235.98 -> is created so just simply click on finish  so now that our node.js and visual studio  
242.4 -> code are rightly installed let's open our  command prompt just simply type in PH create  
251.82 -> Dash next Dash app and then let's give you a  project name My Demo app just simply hit enter
265.92 -> and you can see it rightly started  installing our next jigs app  
270.9 -> so you know for react you need to type  create react app and for next you need to  
277.08 -> just type next that's all I and here  you need to give your project name  
281.94 -> and here it is asking whether you like to  create the following package so why hit enter
290.16 -> so it has rightly started fetching all the  files from internet so it's important to  
294.84 -> have a active internet connection right  throughout this you know installation  
298.2 -> and here it is asking whether you like  to use the typescript for this project  
303.12 -> you can use the spacebar to navigate to yes and  no I'll just simply give it yes yes link to also  
310.62 -> yes SRC I'll keep it yes and experimental app  directory also yes and import earlier I'll just  
319.38 -> simply going to hit enter and you can see it  has slightly started creating a new next JS app  
327.3 -> so let's wait for a couple of minutes to create  our first next JS app so welcome back and now  
335.28 -> send clearly see that our next JS app is rightly  installed so you can just simply go inside that  
341.7 -> our project so CD type My Demo app just simply  hit enter and you can see I am currently in my  
352.74 -> demo app directory so I'll just simply open this  in our Visual Studio code so I just simply type  
359.22 -> code Dot and hit enter and it's going to open  our project in our Microsoft Visual Studio code  
367.56 -> so you can see it has rightly opened so you can  just simply click on how it draws the authors and  
372.06 -> all so this is our you know project structure so  if you go to SRC and you can see that we have this  
380.34 -> page dot TSX so if you you know you need to click  on this npm script if you don't get this option  
388.08 -> you can click on this triple addo and you can  enable these npm scripts once you enable that you  
394.26 -> will be able to see all these options so from here  you can click on this div so just simply click on  
400.56 -> that and it's going to start building our project  and going to run our project you know very soon  
406.8 -> here you can just simply click on allow  access and you can see that our project  
411.84 -> has been compiled successfully so if you scroll  up you'll be able to see this link so you need  
416.94 -> to just simply click on control and just simply  click on follow link and it's going to redirect  
422.34 -> to the browser in localhost 3000 port number  and you can see we have this create a next tab  
430.68 -> our project and we have next js13 installed  so if you want to you know modify anything so  
437.16 -> here this is our page dot TSX is our file so here  in main I am going to you know remove all these
447.18 -> and I'm going to just simply keep Just A P tag and  in in that tag I'm going to just print hello world  
457.92 -> and when I you know going to save this  and automatically it's going to again  
464.16 -> build and rerun and here you can see  the output hello world rightly shown  
468.66 -> right so in this way you can easily  install the latest version of next.js  
472.8 -> 13 on a Windows operating system if you face  any difficulty you can always comment in our  
477.66 -> comment sections and if you need more videos on  next days please do comment I am always ready to  
482.94 -> make massage videos thank you very much for  watching this video and God bless you all

Source: https://www.youtube.com/watch?v=NIEV--Rzab0