How to fix link preload warning in Next.js app? #49607
Replies: 118 comments 211 replies
-
|
Any fix to this ?? I am also getting the same issue |
Beta Was this translation helpful? Give feedback.
-
|
i have the smae issue in "next": "^14.0.1", any one can help |
Beta Was this translation helpful? Give feedback.
-
|
@yasincandev Why didn't you open a issue? |
Beta Was this translation helpful? Give feedback.
-
|
@yasincandev + |
Beta Was this translation helpful? Give feedback.
-
|
preload: false,
|
Beta Was this translation helpful? Give feedback.
-
What's the iprop for? |
Beta Was this translation helpful? Give feedback.
-
|
Still dealing with the issue. |
Beta Was this translation helpful? Give feedback.
-
|
Do you face this issue both locally and when deploying to Vercel? Or only one of those? |
Beta Was this translation helpful? Give feedback.
-
|
In my case, the issue is appearing only locally. I haven't experienced it in the deployed version. |
Beta Was this translation helpful? Give feedback.
-
|
in my case i am only facing it when i build/deploy, not in the dev version |
Beta Was this translation helpful? Give feedback.
-
|
Are you experiencing this issue locally? |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
This warning occured 2 days ago and i went back to old versions of my app with git reset and it was still happening. So the destructing props is not related i think. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue before because vscode autocomplete , try it |
Beta Was this translation helpful? Give feedback.
-
|
same issue here in next.js version 14.2.0 |
Beta Was this translation helpful? Give feedback.
-
|
This error is coming in production or not? |
Beta Was this translation helpful? Give feedback.
-
|
No! I haven't tried it in production yet, but it is coming in development mode. |
Beta Was this translation helpful? Give feedback.
-
|
can you share the repo link? |
Beta Was this translation helpful? Give feedback.
-
|
When i build it still gives warning |
Beta Was this translation helpful? Give feedback.
-
|
for me it is only coming in production. |
Beta Was this translation helpful? Give feedback.
-
|
I'm having the same error and I'm only with Footer component :/ I'm not done with the whole website |
Beta Was this translation helpful? Give feedback.
-
Try to remove tag in layout.tsx/layout.js and remove body tag className and add globals.css inside the app directory not in any styles folder.Use fileName.module.css in Footer.js/Footer.tsx file. try this: import styles from "@styles/Footer.module.css" // create this file and import in footer file.Remove this className : <footer className="w-full"> <div className="home__bgFooter"></div>
use this: ` // your JSX` |
Beta Was this translation helpful? Give feedback.
-
|
What is the point of this changes? |
Beta Was this translation helpful? Give feedback.
-
|
none :/ i'm still having the issue with the preload thing |
Beta Was this translation helpful? Give feedback.
-
|
Maybe the issue occur only in localhost, try to push code on vercel or netlify then check the warning |
Beta Was this translation helpful? Give feedback.
-
|
@Kannu-Mondora What do CSS modules have to do with this issue. |
Beta Was this translation helpful? Give feedback.
-
|
This issue actually coming from the next/font/google component. According to the warning preloaded link must have the appropriate as property whether this is a style or script link. I hope the next.js team will provide the solution soon :) |
Beta Was this translation helpful? Give feedback.
-
|
That is true in my case! |
Beta Was this translation helpful? Give feedback.
-
|
Worked in my side! I removed the default font import in my layout.tsx file, restarted server and cleared the browser cache .The warning is gone now : ) I don't know why did it occured but its really annoying during debugging code |
Beta Was this translation helpful? Give feedback.
-
|
I thought it was a font issue so I removed const inter = Inter({ subsets: ['latin'] }); But still same warning. I also noticed that I loads a bunch of duplicate stylesheets, each warning adds another stylesheet to frame(see image). There is no warning once deployed on Vercel though. |
Beta Was this translation helpful? Give feedback.
-
|
First I thought it was a problem with my project but i created fresh next app with create next app and still gives same warning |
Beta Was this translation helpful? Give feedback.
-
|
The warning is given by the preloading of CSS modules through the Link component. |
Beta Was this translation helpful? Give feedback.
-
|
Do you have any solutions? |
Beta Was this translation helpful? Give feedback.
-
|
same issue here in next.js version 13.4.3 |
Beta Was this translation helpful? Give feedback.
-
|
had the same issue, removed path alias import and the warning went away somehow. // import "@/globals.css"
import "../../globals.css" |
Beta Was this translation helpful? Give feedback.
-
|
I'm already using ./ and ../ but the warning messages exist only on production. |
Beta Was this translation helpful? Give feedback.
-
|
thanks you very much, it works for me too |
Beta Was this translation helpful? Give feedback.
-
|
Doesn't work for me cause I use Next.js 14 and there its by default import "./globals.css" |
Beta Was this translation helpful? Give feedback.
-
|
It pulled out the global style module out of the folder and it didn't solve my issue. |
Beta Was this translation helpful? Give feedback.
-
|
Tried with v15.2.3 and it did not fix.. I've tried every possible method at this point and nothing works. It's mostly benign and just annoying so I give up for now. Weirdly I only get the warnings on the live production version (on vercel). |
Beta Was this translation helpful? Give feedback.
-
|
I have got the same problem with Next v.13.4.1. It's "REALLY ANNOYING" for debugging in DevTool.
The error in the the DevTool said that the link suppose to have "as" property in the CSS styles tag from the tag. But as we can see on my picture Next.js generate link Stylesheet but not include "as" property. There is the error.
I have done as Documentation said to import CSS Module like this image but error still show up:
Are this a bug from App Directory? Because when I use Page Directory before this error is not happened. |
Beta Was this translation helpful? Give feedback.
-
|
do you fix it ? |
Beta Was this translation helpful? Give feedback.
-
|
From what I just tested, it may be related to tailwind. When creating a new project with npx create-next-app using the tailwind option, I get this warning : But with the tailwind option at no, the project is normal. |
Beta Was this translation helpful? Give feedback.
-
|
In my project I'm not using tailwind and I still have this same warning. |
Beta Was this translation helpful? Give feedback.
-
|
Currently using Chakra UI, and yes, same warning. |
Beta Was this translation helpful? Give feedback.
-
|
If the preload warnings related to the next/font/google component are ruining your day, you can try the CSS variable approach to font handling as described in the section regarding Using Multiple Fonts in the NextJS Font Optimization docs. Worked for me. See the code examples under the paragraph that begins with Alternatively, you can create a CSS variable... |
Beta Was this translation helpful? Give feedback.
-
|
This actually works for me. |
Beta Was this translation helpful? Give feedback.
-
|
Works like a charm, no way I would have solved it myself lol |
Beta Was this translation helpful? Give feedback.
-
|
This worked for me, thank you. |
Beta Was this translation helpful? Give feedback.
-
|
This did not work for me. It does not address/discuss the actual error relating to the as value in the preload. Could you please shed more light on your answer, why you did what you did? I followed the tailwind approach: export default function RootLayout({ children }) { ` THE ERROR IS QUITE CLEAR And it refers to layout.css and page.css This would seem like a task for next.js team. ALSO - it occurs after a "Fast Refresh" but maybe us developers should have more control over what ends up in the HTML ??? |
Beta Was this translation helpful? Give feedback.
-
Works! |
Beta Was this translation helpful? Give feedback.
-
|
Still testing but it seems to have worked for me. 1- In the import { Inter } from "next/font/google";
export const inter = Inter({
subsets: ["latin"],
display: "swap",
});In the "use client";
import "./global.css";
import AuthContext from "./lib/authContext";
// aqui eu importei a font que quero usar, inclusive com esse método posso usar utras fontes em outras partes da mesma forma
// here I imported the font I want to use, even with this method I can use other fonts in other parts in the same way
import { inter } from "@/app/styles/fonts";
export interface RootLayoutProps {
children: React.ReactNode;
}
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html>
<body className={inter.className}> //normal use in className - uso normal no className
<AuthContext>{children}</AuthContext>
</body>
</html>
);
}Espero que ajude, pra mim está funcionando / I hope this helps, it's working for me |
Beta Was this translation helpful? Give feedback.
-
|
i have the problen whit layout.css, idk if this will work in my case |
Beta Was this translation helpful? Give feedback.
-
|
Did not work for me |
Beta Was this translation helpful? Give feedback.
-
|
It worked for me, thanks for posting! |
Beta Was this translation helpful? Give feedback.
-
|
I was missing thanks |
Beta Was this translation helpful? Give feedback.
-
|
this work perfectly .. thanks for this issue it was still happening .. for me even 2025 ! .. so even old post can help a lot :) |
Beta Was this translation helpful? Give feedback.
-
|
Still the same in 2025 |
Beta Was this translation helpful? Give feedback.
-
|
Found a solution, maybe like this: before after |
Beta Was this translation helpful? Give feedback.
-
I get this warning after saving a file (Ctrl + S) while editing css files because of how Hot Module Replacement (HMR) works in Next.js. When you save changes to a CSS file, HMR updates the styles without reloading the entire page. However, this may cause a momentary loss of synchronization between the browser and the applied styles, causing the browser to generate a warning. |
Beta Was this translation helpful? Give feedback.
-
|
It is like an HTTP response for the page add a Link header to preload the first two pictures in nextjs 15. console warring source code: HTTP response header HTML result |
Beta Was this translation helpful? Give feedback.
-
|
There is no Link header after |
Beta Was this translation helpful? Give feedback.
-
|
I still get link headers with force-static when the route is nested in dynamic routes. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem here, but with a different file.
|
Beta Was this translation helpful? Give feedback.
-
|
I think I found the reason. Next JS prefetch all the Link tag href linked page css unless you prefetch={false}. I have found this through Chrome dev mode screen size change. If screen height = 0 there is no prefetch issue, but when you increase the screen size and on screen catches the Link tag it prefetch. Hope this helps |
Beta Was this translation helpful? Give feedback.
-
|
https://nextjs.org/docs/messages/prefetch-true-deprecated
In Nextjs 9, the behavior of the attribute was changed from opt in to opt out. This means that the is no longer required. will automatically prefetch pages in the background as they appear in the view. If certain pages are rarely visited you can manually set prefetch to false, here's how:This feature improves the responsiveness of your application by making navigations to new pages quicker. Next.js uses an Intersection Observer to prefetch the assets necessary in the background. These requests have low-priority and yield to fetch() or XHR requests. Next.js will avoid automatically prefetching if the user has data-saver enabled. is now the default behavior and setting it is no longer required. You can safely remove the prefetch attribute.You can opt out of prefetching using . so next js prefetches all Link page unless you add prefetch={false} |
Beta Was this translation helpful? Give feedback.
-
|
This problem has been occurring in my app ever since I upgraded Next.js from version 14.2.6 to 15.3.2, but only in production. I have tried all the proposed fixes from that thread, and nothing seems to work for me. Here is the warning on chrome : And the same in Firefox : package.json (global)/layout.tsx |
Beta Was this translation helpful? Give feedback.
-
|
. |
Beta Was this translation helpful? Give feedback.
-
|
. |
Beta Was this translation helpful? Give feedback.
-
|
still same issue in 08,2025 |
Beta Was this translation helpful? Give feedback.
-
|
This is tricky. |
Beta Was this translation helpful? Give feedback.
-
|
still dont know the fixes. i already set preload: false to all font on local but the prod still have same warning PROD
Local
|
Beta Was this translation helpful? Give feedback.
-
|
temporary fix: rolling back to nextjs 14.2.4 is the fix for me |
Beta Was this translation helpful? Give feedback.
-
|
. |
Beta Was this translation helpful? Give feedback.
-
|
Context
Cause
Fix (minimum viable)
Notes
If this solves it, please Mark as answer so others can find it. |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
I am developing a Next.js app with version 13.4 and I am getting this warning in the console:
The resource <URL> 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.The number of the error is increasing.
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions