Add global styles to a Next.js app
Before we're going to start building our site, it's important to set up the way we're going to style it (to avoid significant CSS refactors later, which are never fun).
In this lesson we're going to learn how to create an _app.tsx file in order to add a global.css file to a Next.js app.
Tomasz Łakomy: [0:00] Before we start building our site, we're going to clean up all of this content because we don't need that, and we're also going to add some styles. Let me start with a cleanup. I'm going to basically delete all of that. I'm going to also delete the footer. There you go. Much better.
[0:13] When it comes to styles themselves, there are basically two types of styles. There are a pair component size, which is in this example, this container, this class only applies for this container. There are also global styles on the bottom of this page, which apply to HTML, body, and to every single element.
[0:33] For now, I've closed the app on the right-hand-side because we are not going to need that for a second. In order to handle the global size, we're going to hop over here. In the pages directory, create a new file, which is called _app.tsx.
[0:46] This filename is not an accident because Next.js uses the app component to initialize pages. We can override this mechanism and control how the page is initialized, which allows us to do things like adding global CSS. This is exactly what we want.
[1:02] As you can see here in the documentation, this Custom 'App' also has some other functionalities that you might be interested in. For now, we are going to grab this. Copy. Paste it over here. I'm also going to export it as a default, and we can see that TypeScript is going to complain because we don't have the types for the props passed in to this MyApp Component.
[1:22] Let's fix that. We're going to import { AppProps } from "next/app" and use it over here. Right now, this _app.tsx file is basically going to render whatever Next.js was rendering before. We are not making any changes to the component, but in order to avoid CSS conflicts, this is the only file in which we can import global styles.
[1:45] Let's create a new file. I'm going to call it global.css. I'm going to import it over here. Import './gobal.css'. Next up, go back to the index file. I'm going to copy all of that. Remove this part and paste it inside of global.css. Right now, we do have global styles. In order to test that, let me change this font family to something a bit more professional, for instance, "Comic Sans."
[2:11] One important thing to highlight. After we modify this _app.tsx file, it is necessary to go back to the terminal and restart the Next.js server. I'm going to run npm run dev once more. After we do that, we can see the results of our global styles over here. This text is written in Comic Sans. Also, if I change the background to red, this change is also going to be applied immediately.