In this tutorial, you will learn about two very useful features that ship with NextJS. First, you will learn how to add page meta-data onto your pages using the Head API. After mastering this API, you will learn how to add CSS styling to your NextJs pages and components. The good news is that all of this is super simple to set up, so let us crack on!
The Head API
In order to add page meta-data onto your NextJs powered webpages, you can use the NextJs Head API. Using the Head API is as simple as adding a reference to a NextJs component within your ReactJs component. As shown below:
To start using the Head API, import the Head component. As can be seen on Line1, it is available from next/head. To add meta-data onto a page, simply add the `` component within a page components return() method. Within the head tags, you are free to add anything you want. You can add SEO tags and open-graph tag properties here. Basically, anything you add within these tags will be appended to the head section of the page when it is eventually rendered. One issue with this approach is duplicate tags. Say you set some global metadata from a global layout. On the page level, it would be easy to forget this and add a duplicate tag! To prevent this you can add a key property onto each tag. The key property makes sure that the tag is only rendered once. The head API is very simple, however, it prevents you from having to import a third-party package like react helmet. I recommend you use this whenever you use NextJS. With page meta-data mastered, we can style our pages!
Adding Styling To Your Page
When using NextJS, it is possible to create a global stylesheet and component scoped level stylesheets. The first part of styling that we will matter will be the global stylesheet. Before we can reference a global stylesheet, we will need to create a global layout (if you do not already have one). We do not want to break the rule of DRY. We don't want to manually have to add the reference to the stylesheet from every page. To prevent this we can create a global layout. In your pages folder, you can create a special layout called _app.js. If NextJs sees a file called _app.js it will treat it as a global layout rather than a specific page. Nice! The code within _app.js can look like this:
As you can see on Line1, you can reference a stylesheet as normal. In Line6 we simply render the page that is passed in and pass all its related props into it as well. I won't include a code snippet of the stylesheet, as it's nothing new. It's just a bog-standard CSS file.
Component Level Styling
As well as having this global level stylesheet, it is also possible to create component-based stylesheets as well. As we are using React you are free to style a component however you like. You could you styled-components if you really wanted to. Out-of-the-box NextJs supports CSS modules so it makes sense to use that for stying rather than import anything new. If you are new to CSS modules then they are easy to get started with. To create a style sheet for a NextJs page/component create a stylesheet following this naming convention [component_name].module.css. CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions. You can see how to reference a module from a component in the snippet below:
Notice, on Line1 we import the stylesheet. On Line8 we reference the CSS selector using object notation, e.g. style.title. In this example, the style in the corresponding stylesheet could look like this:
This now gives you the option for global and component level styling! Happy Coding 🤘
