How to import css file from /public folder in new Next.js 13 (using /app instead of /pages)-CodePudding

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 a new version 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 am getting 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 compile 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 public folder.

CodePudding user response：

As stated in the official doc here you need to create the pages/_app.js file if not already present.

Then you can import as such:

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

CodePudding user response：

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'