Displaying Navbar on all pages | NextJs Tutorial for Beginners #14

Displaying Navbar on all pages | NextJs Tutorial for Beginners #14

Displaying Navbar on all pages | NextJs Tutorial for Beginners #14

In this video, we will see how to display the navbar on all pages in Next JS. We will also see how to use a custom component for all the pages of our next.js app
All the source code and other material will be uploaded on https://codewithharry.com as and when available!
►Checkout my English channel here:    / @programmingwithharry  
►Instagram: www.instagram.com/codewithharry
TimeStamps ⌚
00:00 - Introduction
00:51 - Starting server
04:21 - Creating Navbar component
04:57 - Displaying Navbar on all pages
06:18 - Homework 😅
07:18 - Final Note
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist:    • Coding CheatSheets 🧾 by CodeWithHarry  

►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…  

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 -> Till now, our Navbar is only visible on the homepage.
2.928 -> If we go to about page, contact page, or blogpost page,
7.614 -> we don't get to see a Navbar there.
10.184 -> Do we have to copy the Navbar again to all these pages?
14.056 -> It'll be very cumbersome and problematic in that way.
16.788 -> But luckily, in Next.js
18.788 -> you can edit a file called _app.js.
22.058 -> What's this file, its functions, why edit it,
26.418 -> and how can we display Navbar on more pages,
29.802 -> we're going to learn all this today.
31.965 -> Let's go to the computer screen
33.395 -> and see how all this is done Next.js.
36.746 -> [MUSIC]
45.908 -> So if I open my Hunting Coder again,
49.031 -> I'll click and choose open with code.
50.933 -> Here I'll write yarn dev.
54.398 -> My server will start after writing yarn dev.
56.658 -> I know you'll say we've come so far in the course,
59.163 -> why are we doing this again and again?
60.951 -> I just want to explain this thing, that's why I'm doing it.
64.269 -> And in today's video, what we'll do is,
66.774 -> the Navbar which is not on our about page,
70.809 -> how to bring it there.
72.223 -> I'll tell you a very simple thing
74.321 -> which will be very useful for you.
76.207 -> This is one of those simple yet very useful things.
81.804 -> First of all, we'll come to our application.
86.848 -> If you've followed me in this course,
92.608 -> you will have a file named _app.js.
96.692 -> This file will be in your pages directory.
99.994 -> In _app.js file, you'll see this content.
105.347 -> We've also imported global CSS here.
108.47 -> You can see that in line number one.
111.805 -> I'll zoom in and turn on screencast mode
115.726 -> so that you can see the keys I press, you'll have fun.
118.931 -> I'll press control Z and save it as well.
121.826 -> Global CSS has been imported to this page.
125.242 -> We had discussed this well in detail,
128.398 -> what happens once it's imported here.
131.847 -> See this function MyApp and this is exporting it.
136.012 -> We'll not get into the details of how Next.js works
142.081 -> but I want to tell you that _app.js is a file
146.571 -> which gets fired whenever any page is loaded.
149.759 -> Here the return component being displayed
151.759 -> is a component from inside pages.
154.622 -> If I put in console.log here,
159.306 -> I am loading, suppose I write that.
163.259 -> If I show you the console here,
165.764 -> if I reload the page, you can see I am loading.
168.285 -> Will I see I am loading on about page too? Yes.
171.131 -> I'll come back, again I am loading.
172.919 -> I'll go to contacts, again I am loading.
174.479 -> That means whichever page opens,
176.789 -> _app.js file gets executed.
181.1 -> The components and props are executed in this way.
184.809 -> If you try to understand the details of how it works,
189.234 -> then you'll stray away a little.
191.039 -> Our current goal is to learn Next.js
193.039 -> and making useful applications from it.
195 -> Our goal is to make great applications while understanding things.
199.849 -> I won't return just this much.
202.891 -> I'll tell MyApp to not just return the component.
208.993 -> Do one thing MyApp, return this fragment.
213 -> I'll cut this a little.
215.733 -> Why did I make this fragment?
216.87 -> I made it so I could return more things within it.
220.644 -> I'll take it to return so that it gets returned.
223.572 -> Now I can put anything in it.
225.572 -> Suppose I put in div.
229.46 -> Emit isn't working, let's use JavaScript react here.
235.155 -> Suppose I write div and I am a div here.
239.369 -> So, I'll be able to see I am a div on all pages.
241.935 -> I'll show it to you, I am a div.
243.935 -> I'll go to about, I am a div.
245.561 -> This is my about component.
248.31 -> I'll go to blog, I am a div.
250.131 -> I don't want to show I am a div, I want to show Navbar.
253.01 -> I'll come to my index.js
255.01 -> where I have already included Navbar.
257.629 -> After removing the Navbar from here, what I'll do is,
260.899 -> first of all, I'll make a Navbar component
262.639 -> which I haven't made yet but I should have.
265.534 -> A custom Navbar component.
267.99 -> So, Navbar.js, rafce.
271.764 -> And the div Navbar here,
274.187 -> I won't return that Navbar, instead, I'll return this.
277.766 -> I'll cut this code, not copy, cut.
281.605 -> I'll save index.js.
283.996 -> I'll paste it here, like this.
288 -> I'll paste it and save it, you can see now
291.205 -> that there's no Navbar here because I cut it from there.
294.234 -> Now I'll replace I am a div with Navbar
297 -> and you guys see how I do it.
298.805 -> Here, I'll use Navbar like this.
303.393 -> Why did my Navbar not get imported here?
306.598 -> Navbar didn't get automatically imported.
309.949 -> If I get a suggestion to import it, that'd be good.
313.642 -> Otherwise, I'll have to import it manually.
316.554 -> What I'll do is, import Navbar from components Navbar.
321.989 -> If I show you my page now, it says styles is not defined.
325.893 -> Okay, styles is not defined, that's true.
328.821 -> I'll have to import styles again
331.147 -> because I'm using styles in Navbar.
333.44 -> I should have made Navbar.module.css
337.312 -> but that's fine, I'll import these styles here.
340.565 -> Now you can see that it says link is not defined.
342.988 -> So, all the things will have to be imported.
344.809 -> Here onwards, both link and script are not needed.
347.786 -> And as we talked about clean-up,
350.209 -> I'll remove the script as well.
351.786 -> I'm not using any external script here.
356.049 -> If we go to about, we can see the Navbar.
359.612 -> We can see the Navbar in the blog too.
361.417 -> I'll reload to confirm there's no error.
363.84 -> There should be no error in the console
366.263 -> when we're working on our application.
369 -> So see here, we went to blog, contact, about, home,
373.523 -> and our application is working well.
375.995 -> So, I hope you had fun.
378.614 -> The about page, a little bit, not too much,
383.088 -> I want to make it spicy and some about there.
386.667 -> So, I'll give you a task.
388.667 -> Build the about page on your own.
391.399 -> I don't want to teach designing here.
393.399 -> I don't want to waste time in the course.
395.106 -> So, you guys have to do that yourself.
396.846 -> But my homepage is going to stay the same.
399.318 -> And here what I'll do is, link all the blogs.
402.197 -> All our blogs that will be popular blogs or top 3 blogs,
405.922 -> I'll put them here, the latest blogs or popular blogs.
408.931 -> I'll make it latest blogs.
410.687 -> You can do anything, that's a design choice.
414.673 -> I'll make it latest blogs.
416.543 -> So now, the latest blogs can be seen here.
418.869 -> What I'll do is, if I'm bringing data from the database,
421.439 -> I'll fetch it from there.
422.462 -> I'll say that the top 3 blogs be displayed here.
426.79 -> This was our home page, you'll make the about page.
430.548 -> I'll help you make the contact page, so wait for that.
434.436 -> We'll finish blog functionality first
436.322 -> and then we can make the contact page too.
438.696 -> I hope everyone is having fun.
440.582 -> And with that, in the upcoming videos,
443.754 -> do watch how we'll make blog and blogpost.
447.186 -> Access the Next.js playlist, it's very important.
450.179 -> That's all for this video.
451.723 -> Thank you so much guys for watching this video
453.463 -> and I will see you next time.
455.935 -> [MUSIC]

Source: https://www.youtube.com/watch?v=40AkRpYSV04