Our first Next.js website | NextJs Tutorial for Beginners #2
Our first Next.js website | NextJs Tutorial for Beginners #2
In this video, we will build our first Next.js website. I will be adding all these videos to a nextjs course playlist which can be found in the playlists section of the channel!
All the source code and other material will be uploaded on https://codewithharry.com as and when available!
TimeStamps ⌚
00:00 - Introduction
01:07 - Installing Yarn
01:43 - Creating first Next.js app
04:33 - Glimpse of Next js application components
10:02 - Public folder
12:45 - Pages folder
15:06 - Styles folder
19:20 - Final note
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr] - • Python Programming Course in Hindi (A…
Python[1 Hr] - • Learn Python In Hindi In One Video - …
Python[2 Hr] - • Python Tutorial In Hindi 🔥
Python[15 Min] - • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr] - • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr] - • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min] - • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr] - • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr] - • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr] - • How To Make a WordPress Website | Wor…
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial using Python an…
MongoDB[2 Hr] - • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr] - • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr] - • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr] - • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React - • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java - • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django - • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo - • Data Structures and Algorithms Course…
Python Practice programs - • Python Practice Programs With Logic \u0026…
Basic Python Programs- • [Hindi] Basic Python Programs
General Python Errors- • [Solved] General Python Errors In Hindi
PHP chatroom- • Realtime PHP Chatroom Using PHP \u0026 Jquery
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular) - https://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
Twitter - https://twitter.com/Haris_Is_Here
Comment “#HarryBhai” if you read this 😉😉
Content
0 -> In the last video, we installed and set up Next.js
3.389 -> and we saw why we should use it.
5.817 -> In this video, we'll make our first Next.js application
8.485 -> and we'll see the auto-generated files in its basic application,
13.477 -> what's there and why, which file has what role
17.721 -> and how you can upload public files on a server.
21.912 -> We'll see all these in this video.
24.179 -> Simultaneously, we'll also set up yarn.
27.141 -> You'll visit your first Next.js application before this video ends.
32.267 -> Let's get into the computer screen, it's going to be fun.
35.656 -> Let's set up our Next.js application.
37.736 -> Let's get started with the video.
39.87 -> [MUSIC]
48.95 -> Last time, we talked a lot about this site.
52.473 -> We praised it a lot.
56.049 -> We said its search is amazing, which it is.
59.144 -> That's why we praised it.
60.69 -> Now what we'll do is, we won't waste much time.
63.144 -> We'll directly go to the page I showed, Create Next App.
66.64 -> But before that, you'll have to install yarn.
68.961 -> So, I'll type install yarn here.
70.64 -> You'll ask me, "Why to install yarn when NPM works well too?".
75.419 -> See, yarn is somewhat faster, better, so I'll install it.
80.812 -> So, run this command only and only for me
84.789 -> and you'll have yarn installed, alright?
87.671 -> I have yarn installed and this is the text tutorial I wrote.
91.381 -> Through NPM, you can run this command to install yarn.
94.236 -> After that, copy this command freely.
96.423 -> By the way, you can get this on the site.
99.064 -> So, don't ask for this document, it'll be on the site.
103.816 -> Now I'll copy yarn create next app
106.698 -> and what I'll do is, I'll run it here.
109.045 -> It's running like electricity.
111.499 -> It's asking me what I want to name the project.
115.102 -> I want to name my project as panda.
117.984 -> As I write panda, we have a Next app here by that name.
122.709 -> It'll take some time, we'll give it some time.
125.43 -> It's making it well, it takes time to make good food, right?
127.67 -> In the same way, it takes time to make good applications.
130.338 -> As it's getting done, I'll quickly close this to show you.
135.517 -> Simultaneously, what we'll do is,
138.719 -> come to this document and glance at
141.648 -> generated code that is yet to be generated
144.166 -> but it'd be done by now, yes it's done.
146.166 -> See, I'd like to tell you one thing that
148.38 -> the panda folder in the Next.js course,
151.208 -> that's our Next.js app.
152.54 -> So, we'll enter the folder named panda.
155.689 -> I made this panda folder in this Next.js course on the top.
161.109 -> So, I'll enter this panda folder and I'll show you how.
165.14 -> So, I'll come here and open panda,
168.69 -> then right-click and open with code, simple.
171.278 -> By the way, I'll also tell you but this may waste time for some.
176.324 -> But I'll have to do this as a lot of people ask this.
180.996 -> If you don't have this option in VS Code,
184.278 -> if you can't see open with code after right-clicking,
187.614 -> or if you shift, right-click then open terminal
191.511 -> and then write code. and it still doesn't open as mine did.
196.076 -> If it isn't opening, run the setup to enable these two options.
200.347 -> Even if you have VS Code installed, still run your setup.
203.816 -> After running the setup, see I'm downloading it only for you guys.
207.633 -> After running it, you get 2 options, I'll show you now.
211.316 -> You've to tick those two options.
212.515 -> I know that around 60% of people won't know this, maybe more.
218.363 -> So if this isn't troubling you now, I hope it stays that way.
222.553 -> So, listen to this now.
223.965 -> It's asking me to close all instances, it's right.
226.179 -> Don't run VS Code setup with VS Code open.
228.82 -> Okay to continue, accept, I already have VS Code but still.
233.465 -> Can you see these options? Copy it as it is.
236.988 -> Tick whatever I've ticked.
239.389 -> Next, install, nothing will be deleted, we're reinstalling VS Code.
244.408 -> We're not reinstalling folders so the code in them won't get deleted.
248.385 -> The settings might change but usually, they don't.
252.7 -> See, my code is intact.
256.356 -> All this data has been generated in the panda folder.
260.947 -> I'll talk about the code as it's important to understand.
264.603 -> Did I make any file or folder of code? No, I didn't.
269.542 -> I used the Create Next App application.
273.065 -> In VS Code's sidebar, we can see node modules,
277.55 -> pages, public, and yarn.lock near the bottom.
283.264 -> We'll talk a little about all these files.
286.199 -> Let's talk about yarn.lock.
287.825 -> In yarn.lock, with all the versions of packages,
291.268 -> there's information about all that's installed.
294.55 -> Suppose a Next application uses a helper plugin,
299.222 -> and this helper plugin uses helper validator.
303.6 -> If we see package.json, we'll see dependency versions
309.234 -> but not versions of their version of their versions.
311.074 -> Yarn.lock preserves everything,
313.785 -> all node module information which makes the file big.
318.307 -> So, this is related to node.js project, not Next.js.
323.433 -> The yarn.lock file has all node module packages.
327.651 -> So, we'll close it, we saw it.
329.33 -> Readme.md, when you'll put the application on Github,
334.322 -> so your Github's readme file or home page,
339.982 -> you'll get to see this there.
342 -> It's like this by default, you can change it too.
344.2 -> A good site for this is create a readme or make a readme, I don't know.
349.486 -> I'll write create a readme online, I know the spelling is wrong.
355.28 -> The easiest way to create a readme, these kind of websites, get started.
358.667 -> There's a sample readme here.
361.949 -> I can write using markdown.
364.857 -> I can add all these things, I made a video on this too.
371.853 -> I want to add this, so my readme looks like this.
375.162 -> You can make good readmes in this way from here.
377.883 -> Let's talk about the next file, we're done with readme.
381.887 -> Gitignore, these are the files or folders
385.944 -> that you don't want to push on git.
388.425 -> Suppose, I downloaded a 3GB machine learning model.
391.654 -> So, it'll be here but I don't want to push it on Github.
398.223 -> Because if I push it, even if Github allows it,
403.055 -> people cloning my repository will have to download 3GB.
407.62 -> But how many MBs is my code? It could be in KBs too.
412.746 -> It's 118MBs, it's not in KBs.
415.627 -> There are so many lock files alone so it can't be in KBs.
420.139 -> So, it's 118MBs.
423.689 -> It's not even 118 because we'll exclude node modules.
428.601 -> We'll exclude node modules too. Control, not shift.
433.246 -> Right-click properties, it's in KBs now.
436.021 -> My calculations are wrong, I said the lock files were big.
439.918 -> It's alright, we're not here to count MBs and KBs.
444 -> It's 232KBs, it's taking such a small space on the disk.
449.687 -> In fact, it'll be 118 KBs if you put it on Github.
452.622 -> File size is small. The smaller the file, the more work it is.
458.229 -> A source code file, a .js file takes so much effort,
462.687 -> you'll put in 10 days and the file size will be 3KB.
465.542 -> If you make a video, maybe nature or roof, it'll be 8GBs.
471.042 -> 8GBs versus 2-4KBs.
474.111 -> It'll take more effort to make the 2-4KB file.
478.729 -> Let's move on, I didn't open the gitignore file.
484.256 -> I'll open to show it, it has node modules, .pnp, .pnp.js etc.
490.29 -> All the files that Next.js people think you can stall.
495.843 -> Like .ds storage file is present in MacBooks.
500.782 -> Then, .pem file is a key file, then there's debug files.
505.45 -> You don't want to push such files, like local environment.
510.229 -> I'll explain what it is, later in this course.
512.229 -> This means Nextt.js has served these on a plate.
519.839 -> Look atn how convenient and awesome this is.
525.286 -> I know some find it boring that I am explaining folders
528.755 -> but it's important to understand because we'll use it later.
530.755 -> Later, I may say add it to the public folder
533.717 -> and that'll make it accessible to all.
537.267 -> So, it's important for you to understand.
540 -> Before I go to public folders, I'll write NPM or yarn.
547.531 -> We aren't using NPM, we're using yarn.
550.172 -> We'll start our server here from yarn run dev.
557.084 -> The dev script is pre-made by the name next dev.
561.934 -> If I control click it, we see our Next.js application.
565.35 -> Comment congratulations, it's our first Next.js app.
568.793 -> I know it's generated by Create Next App.
571.879 -> I didn't have to work hard, you didn't have to work hard.
575.437 -> I mean, I did a little bit, you might have too.
578.906 -> But we deserve congratulations as we're at an early part.
582.723 -> Maybe I make a 100 videos in the future, maybe 50.
586.406 -> Do comment if I make 50, I'm at the first for now.
590.57 -> We're going to make many good apps in the future.
593.372 -> This is the 1st, congratulations are deserved. Do comment below.
596.708 -> Where did this come from? I never made this.
600.498 -> I'll tell you that too but first I'll tell you about a folder.
603.994 -> If I type /harry.txt, error 404 comes up which it should.
610.803 -> Did you see how Next.js displayed error 404 not found.
617.692 -> I didn't have to configure or externally work on this page.
625.597 -> If I create harry.txt in a public folder, it'll be displayed.
630.322 -> I'll prove this to you now by showing you.
633.872 -> I'll write harry.txt, Mai ek Harry hoon.
639.158 -> I'll reload it now.
642 -> Mai ek Harry hoon, can you see it?
644.214 -> Txt file got served.
646.314 -> Suppose I put a video here and try to download it,
651.516 -> it'll get downloaded if I go to this url.
656.295 -> If I put /movie.mp4 here
659.337 -> and if I write localhost.3000/movie.mp4
662.7 -> then it'll get downloaded, try it yourself.
666 -> Now tell me, what is a public folder?
668.214 -> It has all the files we put in the public folder
672.405 -> and we want our user to see them when they visit the url.
677.397 -> Be careful with public files, not your Aadhaar, PAN card.
682.63 -> And not things like your Facebook username, password.
687.676 -> Or I'll read all your chats and the video will be delayed.
693.337 -> Overall, don't add anything personal to the public folder
696 -> because we need to be careful.
699.176 -> Suppose, I created a website, www.pandakafun.com.
703.901 -> So, if I add aadhar.jpg to public,
707.584 -> then pandakafun.com/aadhar.jpg
710.145 -> can be downloaded by anyone with a Jio sim or internet.
717.328 -> So, be mindful of this.
719.248 -> It doesn't apply to pages, node module or the .next folder.
726.298 -> All these are not directly accessible including yarn.lock.
730.596 -> Public file is accessible so add only what you want to.
735.294 -> If I put in favicon.ico, I'll show you.
738.454 -> Favicon.ico, enter, see it's visible.
744.141 -> Vercel.svg will also be the same way.
749.347 -> So, whatever I add here will be publicly accessible.
752.336 -> It's convenient in Next.js, add it here and make it public.
758.13 -> Very simple logic of Next.js.
761.119 -> Let's move on and talk about the next file.
764.562 -> Public folder done, pages folder is the most important.
770.516 -> Pages folder has file-based routing.
772.592 -> That means the code in index.js is rendered here.
777.432 -> Where is it getting rendered? Here.
780.955 -> I'll reset it. If I want to change this page, I surely will.
786.802 -> I will change it as I won't show welcome to Next.js.
790.672 -> Where will I write my home page content? Here.
799.645 -> I'm exporting a react component and it's shown here.
804 -> If I want to add a /about page here,
809.626 -> I'll simply make an about.js file.
812.481 -> It's called file-based routing,
814.22 -> we'll explore it in future videos and also make pages.
817.657 -> See, they wrote /vercel.svg and the vercel logo was here.
822 -> Did it? It'll be here, yeah here it is.
829.424 -> So, they added the vercel logo to the public folder.
834.443 -> Then they simply used next image here. What's that?
839.703 -> Next provides you an image component
843.88 -> which can be imported from Next Image.
846.806 -> We'll look at that too, it provides some optimizations.
850.222 -> Your site will be faster and SEO-friendly,
854.092 -> and you'll earn a lot if you're a blogger and maintain the site well.
859.245 -> It'll happen if you maintain it well, not with Next.js alone.
862.207 -> Next.js makes it SEO-friendly and makes life easier.
868.829 -> To optimize image, take it to an external tool.
873.367 -> Make your image lighter, let's say if it's 102MBs.
878.222 -> You'd want it in webp format or any good format.
882.279 -> Any format which will enable smooth transportation.
884.68 -> You don't want 102MBs downloaded just to view your website.
889.806 -> You don't want that so you'll fix it.
892.287 -> Ideally, you'll fix it through external tools.
896.798 -> But we can use the image component in Next.js easily.
903.126 -> I find it very convenient, we'll learn about it.
906.141 -> We'll come to the files folder now.
908.515 -> You can move the VS Code sidebar to the right.
915.484 -> See, it'll move here, to this side.
920.129 -> So, it's not there, it's here.
922.129 -> I can move it back too, some might feel it's weird.
925.037 -> Personally, when I edit my codes.
929.575 -> Where is it? Okay, sidebar left.
932.136 -> You can keep experimenting with VS Code.
934.804 -> I've made a lot of videos while doing this, do watch them.
938.968 -> I've made shorts too but we'll focus on Next.js now.
941.663 -> So, we'll change all this in our application.
946.228 -> It'll be a serious application. We'll change everything.
949.617 -> This is a react component. If you've worked with it before, we're simply writing react.
954 -> On top of it, we'll use components like image, next head.
959.66 -> There are many others, I was talking about styles before.
964.171 -> Lets' come to styles quickly, globals.css and home.module.css.
968.282 -> In globals.css. we add the styles we want in all files.
973.542 -> But it doesn't work magically.
975.756 -> If y6ou go to _app.js, every Next.js page is rendered here.
983.34 -> We'll import global styles here and after that,
988.332 -> we'll import the component in pages.
991.695 -> Suppose you want Harry bhai on top of every page,
996 -> you'll have to put it under return.
1001.153 -> Make a react component and write Harry bhai here.
1006.813 -> Control X, control V, then save it.
1010.234 -> Now, Harry bhai will be displayed on top of every page.
1014.532 -> There are 10 ways to do things in Next.js, this is one way.
1017.895 -> As every page goes through here, I typed it here.
1021.471 -> But I'll press control Z to bring it back to default.
1026.33 -> We'll import globals.css here, so it'll apply to all pages.
1034.903 -> Where will we import homes.modules.css? Here.
1038.96 -> See how styles are being imported here.
1041.414 -> You can learn to use external styles by seeing the code.
1046.246 -> See the styles in home.module.css, there are classes
1050.464 -> like main, footer, footer with a.
1053.72 -> So, we import the styles in this way.
1057.296 -> Now we'll write classname=styles.container, classname=styles,main.
1062 -> In this way, we can set styles.
1065.068 -> Can you see how these have been imported?
1067.843 -> We can use classes in this way.
1070.992 -> So if I turn footer's a red in color here, it's red now.
1080.578 -> We can do stuff like this, control Z again.
1084.876 -> So, the classes in our file are being used here.
1089.468 -> You can easily make your files, classes\
1094.06 -> and use them in individual components.
1097.156 -> In this case, our individual component is index.js.
1104 -> So I'll import in this way, import styles from,
1106.802 -> styles, one step behind directory,
1109.336 -> grab this style from the styles folder
1112.565 -> and start using its classes.
1114.565 -> If there's another css defined, that'll apply, like .footer a.
1118.382 -> The display flex, justify-content center, etc. will apply.
1121.611 -> Nothing to worry about, you might be having fun.
1125.561 -> If you want to use tailwind,
1126.745 -> many of you may be directly from my tailwind course.
1129.378 -> If you watched my tailwind course,
1132.099 -> if you're done with all the Facebook projects etc.
1135.622 -> and you want to add Next.js to tailwind,
1139.786 -> then search tailwind css next.js.
1143.897 -> Here are the instructions
1146.805 -> on how to use tailwind on your Create Next App.
1149.82 -> I won't use tailwind now as a lot of people won't want to.
1154.198 -> So, we'll start with simple css and look at tailwind later.
1158.87 -> We'll go with the flow, I hope you had fun in this video.
1162.42 -> In later videos, we'll learn about file-based routing,
1165.702 -> how the Next.js application works.
1168.264 -> We explored a lot today.
1171.039 -> We peeked at generated code,
1173.68 -> we also started our server.
1176.508 -> I'd like to add that wherever I've written localhost3000,
1181.073 -> it means it's a default url.
1183.661 -> If I ask you to open a url, you might have it as 3001.
1186.997 -> Sometimes, if your 3000 port is occupied for any reason,
1192.07 -> that means you're running something else on 3000 port,
1194.444 -> then your 3000 port will not work.
1197.539 -> You'll have to go to 3001, how will you know it's 3001?
1200.982 -> Here, my terminal says 3000, your terminal will be 3001.
1206 -> Simply control-click and go there, no worries.
1210.405 -> I'll conclude this video here.
1212.271 -> Next.js playlist, which I haven't made yet,
1217.237 -> I'll create it.
1219.089 -> It might have many videos when you're watching this.
1221.772 -> Do comment how many videos are there now.
1224.44 -> I haven't made it yet.
1227.322 -> I just recently recorded the 1st video and this is the 2nd.
1230.257 -> There'll be many videos in the future and this playlist will be a banger.
1234.608 -> I've planned many amazing things that I'm sure you'll like.
1239.494 -> That's all for this video.
1241.494 -> Thank you so much guys for watching this video
1243.718 -> and I will see you next time.
1245.818 -> [MUSIC]
Source: https://www.youtube.com/watch?v=ne_h515wcv4