Question 200056 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – next js warning in browser console

I am moving from react js to Nextjs 13. I’m just creating a simple calculator application but it’s showing some warnings.

The resource http://localhost:3000/%20next/static/css/app/page.css?v=1688433441465 was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Im creating individual CSS for every component.

Tags:

2

Answers


  1. 0

    Nextjs docs suggests two approches when working with multiple fonts:

    First approach:

    create a utility function that exports a font, imports it, and applies its className where needed. This ensures the font is preloaded only when it’s rendered:

    app/fonts.ts:

    import { Inter, Roboto_Mono } from 'next/font/google'
 
export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

    app/layout.tsx:

    import { inter } from './fonts'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

    app/page.tsx:

    import { roboto_mono } from './fonts'
 
export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

    In the example above, Inter will be applied globally, and Roboto Mono can be imported and applied as needed.

    Second approach

    you can create a CSS variable and use it with your preferred CSS solution:

    app/layout.tsx:

    import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})
 
const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

    app/global.css:

    html {
  font-family: var(--font-inter);
}
 
h1 {
  font-family: var(--font-roboto-mono);
}

    In the example above, Inter will be applied globally, and any <h1> tags will be styled with Roboto Mono.

    following one of these two approaches the warning should disappear

    Login or Signup to reply.
  2. 0

    Make sure you are using css modules if you are using multiple css file. Your css file should be named your-styles.module.css, .module.css|scss is important.

    Then in your component

    import styles from './your-styles.module.css'

...
<div className={styles.someClass}>
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search