Using CSS in NextJS applications is actually not as difficult as it may seem in the first place. In this article, we’ll take a look at how to style our application and where to import the stylesheets to be applied throughout our application.

JSX elements

Let’s start by writing out a couple of simple JSX elements that we’re ten going to style later in this application.

export default function Home() {
  return (
    <div>
      <h1>Welcome to Upmostly</h1>
      <h2>The best place to learn about NextJS</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula consequat, malesuada turpis vitae, venenatis urna. Donec nec odio eu ligula volutpat scelerisque sed vitae ligula.</p>
    </div>
  )
}

CSS

Under the styles directory, I have created a new styles.css file with some basic styles that I want to apply to our application.

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: beige;
}

h1 {
  color: purple;
  font-size: 100px;
}

h2 {
  color: brown;
}

p {
  font-size: 20px;
}

Importing

The last piece of the puzzle is to import the CSS file into our _app.js file that’s located under the pages directory. This will apply the stylesheets globally across the whole of the application. Take a look at my _app.js file.

import '../styles/styles.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Now take a look at the final output of the application. I must admit that it looks quite ugly…

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.