When building a website using the Next.js framework, there are multiple ways to create and apply CSS files to your pages.

One way is to create global stylesheets that apply throughout your entire Next.js website or application.

In short, you can apply global CSS styles by importing it into your /pages/_app.js file.

For example, let's say you have a file named styles.css with the following CSS:

    
      .homepage-wrapper {
        text-align: center;
        font-size: 22px;
        margin: 0;
      }
    
  

This example CSS file contains some basic styling for aligning text, font size, and margin.

If you don't already have a /pages/_app.js file created, create one:

    
      cd pages && touch _app.js
    
  

Then, add this code to the _app.js file using your editor:

    
      import "../styles.css"

      // This default export is required in a new `pages/_app.js` file.
      export default function MyApp({ Component, pageProps }) {
        return <Component {...pageProps} />
      }
    
  

The styles file (styles.css) will apply to all pages and components inside your application. Since these stylesheets are globally applied, you may only import CSS files inside the /pages/_app.js file to avoid conflicts.

In development, these files will be hot-reloaded as you make edits to them. In production, all CSS files imported into this file will be automatically concatenated into a single minified .css file.

Save the changes you made to your files and view your Next.js application in your browser.

You should see that any new CSS styles you've made have taken effect on the page.

If you're looking for additional ways to apply CSS styling to your Next.js application, check out this section of the Next.js documentation.

Thanks for reading and happy coding!