A developer creates a responsive header component for a web application using Next.js and Material UI. The process involves implementing navigation, updating branding, optimizing for mobile viewports, refactoring settings into a separate component, and organizing routing constants for authenticated and unauthenticated users.
Length 10:24
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #react #next.js #typescript #material ui #web development #programming #coding tutorial #header component #responsive design #routing
0:00 So next up, I want to add a header to our application 0:04 so that we can see all the different routes that we can 0:08 navigate to, as well as a logo, and have the 0:11 ability to also log out of our application if we're currently 0:15 authenticated. 0:17 So in our UI, let's create a new directory in our app 0:20 folder. 0:21 I'll call this header, and we'll keep our header component 0:25 in here. So let's create this 0:27 header.tsx. 0:32 And of course, we know that since this isn't a layout or 0:35 page.tsx, 0:37 Next.js will not make this component publicly routable. 0:40 Instead, we're just simply going to utilize this 0:42 header inside of our 0:44 root layout component, where we always want it to appear, 0:48 alongside with any of the other children components that our 0:52 root layout.tsx is rendering. So let's go ahead and 0:56 export default function header 1:00 to create this new server component header. 1:04 Now, to fill out our header, we're gonna utilize the Material UI 1:08 app bar component. So I'll leave a link in the resources 1:12 where you 1:12 can see this app bar component in the Material UI docs. 1:16 Now you wanna scroll down in the docs until you come to this app bar with 1:20 responsive menu example, which is precisely the kind of header we're 1:24 trying to build, where we have our logo, our actual pages we 1:28 can navigate to, as well as a user settings icon that we 1:32 can click and have some different links here, where I want to include 1:36 a logout link. So this example is precisely what we're going to 1:39 utilize. Let's copy this example by clicking the 1:43 Show Code 1:43 button, 1:45 and we'll simply copy this component. 1:48 I'll go ahead and paste in to replace our header, 1:52 and now let's go back to update our function. 1:56 So export default function, and this should be our
The rest of the transcript is for members.
Sign in 