admin管理员组

文章数量:1415491

In a 'old fashion' way (utilising) /pages I would edit _app.js files under /pages directory adding something like:

import Head from 'next/head'
export default function MyApp({ Component, pageProps }) {
  return <> 
<Head>
<link rel="stylesheet" href="/css/styles.css" />
      </Head>
<Component {...pageProps} />
</>
}

However, in the new version, Next.js 13, there is no /pages/_app.js file. There are layout.js and head.js instead. When I try to add in head.js (next to /favicon.ico) import, I get this error:

react_devtools_backend.js:4012 Warning: Cannot render a outside the main document without knowing its precedence. Consider adding precedence="default" or moving it into the root tag.

And when I try to import in layout.js file as below:

import "/css/styles.css";

I am getting pile error:

Module not found: Can't resolve '/css/styles.css'

I was checking the official docs, but they suggest only how to import from global styles (../../..) and not from the public folder.

In a 'old fashion' way (utilising) /pages I would edit _app.js files under /pages directory adding something like:

import Head from 'next/head'
export default function MyApp({ Component, pageProps }) {
  return <> 
<Head>
<link rel="stylesheet" href="/css/styles.css" />
      </Head>
<Component {...pageProps} />
</>
}

However, in the new version, Next.js 13, there is no /pages/_app.js file. There are layout.js and head.js instead. When I try to add in head.js (next to /favicon.ico) import, I get this error:

react_devtools_backend.js:4012 Warning: Cannot render a outside the main document without knowing its precedence. Consider adding precedence="default" or moving it into the root tag.

And when I try to import in layout.js file as below:

import "/css/styles.css";

I am getting pile error:

Module not found: Can't resolve '/css/styles.css'

I was checking the official docs, but they suggest only how to import from global styles (../../..) and not from the public folder.

  • javascript
  • reactjs
  • next.js
Share Improve this question edited Dec 31, 2022 at 9:18 Youssouf Oumar 46.6k16 gold badges103 silver badges105 bronze badges asked Dec 27, 2022 at 22:16 Dawid AdachDawid Adach 7698 silver badges29 bronze badges 2
  • I am still looking for some docs about the head.js and can not seem to find any... can you share some with me? – Nikola Mitic Commented Jun 24, 2023 at 22:23
  • Ok it seems like it has been depricated ... github./vercel/next.js/discussions/47166 – Nikola Mitic Commented Jun 24, 2023 at 22:24
Add a ment  | 

2 Answers 2

Reset to default 3

If you need a CSS that gets imported from public folder, you can do it in head.js as you said, but you need to add precedence="default" to your link, as they say in the documentation:

If you want to manually place <link rel="stylesheet" />, it needs a precedence field which is a new React-specific attribute <link rel="stylesheet" precedence="default" />.

// in head.js, alongside layout.js and page.js

export default function Head() {
  return (
    <>
      <title>Create Next App</title>
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <meta name="description" content="Generated by create next app" />
      <link rel="icon" href="/favicon.ico" />
      <link rel="stylesheet" href="/css/styles.css" precedence="default" />
    </>
  );
}

You may get an Eslint warning saying "Do not include stylesheets manually" that you can deactivate by adding this ment:

{/* eslint-disable-next-line @next/next/no-css-tags */}
<link rel="stylesheet" href="/css/styles.css" precedence="default" />

Also, as you may already know, including a css file like this doesn't allow to have live reloading when you change its content, for example. So to be used for external CSS that won't often.

You can use ../.. to import from the public folder.

With the directory structure

/[project root]
  /public
    /css
      - styles.css
  /app
    - layout.js

You can import your styles using import '../public/css/styles.css'

本文标签： javascriptHow to add a CSS file to a page39s head in the app folder of NextjsStack Overflow

版权声明：本文标题：javascript - How to add a CSS file to a page&#39;s head in the app folder of Next.js? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745221605a2648420.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。