How do I add an external stylesheet from a CDN when using app-router? #49014
-
SummaryI need to add the following to one of my pages, but can't figure out how from the current app-router documentation. <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC"
crossorigin="anonymous"
/>The documentation for "External Stylesheets" just mentions how to import CSS from node modules. Additional informationOperating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 19.8.1
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.3.2
eslint-config-next: 13.3.2
react: 18.2.0
react-dom: 18.2.0ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments 6 replies
-
|
According to the documentation external stylesheets should be downloaded on your server. To fix this, you can run |
Beta Was this translation helpful? Give feedback.
-
|
Not being able to refer to external stylesheets hosted in a CDN seems crazy. While optimization of page load times is nice, it's often just as important (or more important) to optimize hosting costs by having fewer / smaller files on your own server. |
Beta Was this translation helpful? Give feedback.
-
|
Is there a solution to this problem? |
Beta Was this translation helpful? Give feedback.
-
|
This doesn't work in my project: |
Beta Was this translation helpful? Give feedback.
-
|
its not an answer, |
Beta Was this translation helpful? Give feedback.
-
|
Old discussion but this works for me: // layout.tsx
<html lang="en">
<head>
<link rel="stylesheet" href="..." />
</head>
<body>
...All the metadata is still being exported using the Next APIs. Edit: This applies global styles at the root layout |
Beta Was this translation helpful? Give feedback.
-
|
Why is this marked as answered? If you have a working example, can you please share? |
Beta Was this translation helpful? Give feedback.
-
|
That's not a very helpful information either 😔 https://nextjs.org/docs/app/building-your-application/styling/css-modules#external-stylesheets
|
Beta Was this translation helpful? Give feedback.
-
Now we can't find this in the docs: I am using the normal html |
Beta Was this translation helpful? Give feedback.
-
|
its available again: https://nextjs.org/docs/app/getting-started/css#external-stylesheets actually |
Beta Was this translation helpful? Give feedback.
-
It's a benefit of React 19: https://react.dev/reference/react-dom/components/link |
Beta Was this translation helpful? Give feedback.
-
as a workaround preinit will append link with empty css, but reserve precedence |
Beta Was this translation helpful? Give feedback.
According to the documentation external stylesheets should be downloaded on your server.
To fix this, you can run
npm install katexand in thepage.tsxwhere you are trying to display math, you can add a line withimport "katex/dist/katex.min.css";