skip to Main Content

I want to link to just a plain css file in my Next 13 app, but adding it to a Head component does nothing. I also tried creating a custom _document both in app and pages, and that also did nothing. What’s the recommended way to do this in Next 13? Thanks!

2

Answers


  1. First You can do like this:

    1. Create your Head Component styles sheet with extension Head.module.css.
    2. And import it in the Head.js component by using import styles from "./Head.module.css in components folder.
    3. Make sure both files should be inside of components folder.

    And that’s all.

    You can also refer this CSS Modules docs

    I hope this helps!

    Login or Signup to reply.
  2. Please see the following doc for importing global stylesheets – https://nextjs.org/docs/app/building-your-application/styling/css-modules#external-stylesheets

    Note: External stylesheets must be directly imported from an npm package or downloaded and colocated with your codebase. You cannot use <link rel="stylesheet" />.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search