Import CSS Files Into Nextjs

Import CSS Files into Nextjs

The way to import css files into Nextjs is very simple:

1. Create a /static folder at the same level of /pages folder.
2. In /static folder put your .css files.
3. In your pages components import Head and add a CSS . 

1
2
3
4
5
6
7
8
9
10
11
12
13

import Head from 'next/head'

export default () => (
  <div>
    <Head>
      <title>My styles pages</title>
      <link href="/statics/styles.css" rel="stylesheet" />
    </Head>
    <p className="some-class-name">
      Welcome to my styles pages!
    </p>
  </div>
)

This way Nextjs render the link tag in the head of the page and the browser will download the CSS and applied it.

So far so good, That’s it!!! See ya!!! :)