Render Material-UI Components with Next.js
This lesson demonstrates how to add Material-UI components to our project by creating a Header component that we can share throughout our app.
Instructor: [00:01] Inside our root directory, I have this components folder which is just going to hold all our reusable components. In here, I'm going to create this header.js file which as its name suggests, it's going to hold our header component.
[00:17] Inside here, I'm just going to import the app bar component from the Material-UI library. As you could see, I'm just using this header constant and passing in our title prop. Immediately follow this, I'm just returning the app bar component that will import in from Material-UI. I'm giving the app bar's title prop, the value of title, should renders that string that were passing in above.
[00:44] The last thing I'm going to do is set the show menu icon button to false, so it doesn't render the icon button for us. Now that, our header is ready to go. We can export this as the default export and use inside our index.js file. Inside index.js, we firstly import the header that we just created.
[01:08] Once imported, I'm just going to place this ripple our opening div. In order for all this to work, we also need to import our higher order component from the shared MUI folder. Once imported, we then need to pass in our index constant to this with MUI function in order inject Material-UI in your application.
[01:34] If we go back to our page and refresh, we should see everything, and looks like a soon beginning error here. Specifically, we see that the compose component.getInitialProps is not a function. By taking out this error message, we see that it's telling us exactly where this error is happening.
[01:56] Even if I wasn't sure where this is going on, next would really provide us with helpful error messages here. To fix this issue, I'm just going to comment out this sub props, props defined within a higher order component which is the reason for this error. This is happening, because our index constant isn't utilizing next getInitialProps lifecycle hook.
[02:22] Now that, we have our sub props come in to route them, we can return the page and we'll see our app bar being rendered for us. Now, we also know there are app bar has a height of 50 as specify within our getMuiTheme function. Our application is set up to use any in all of the components from Material-UI library.
Running "npm run dev" launches a couple of Warnings regarding undefined environment variables (API_KEY and BLOGGER_URL).
Are this environmental variables needed at all?
This is by using the code directly cloned from the github repo.
Thanks for the course, it's been quite good so far :)