在Nextjs 13中使用外部css链接

arknldoa 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(95)

Nextjs 13提供了一个名为Metadata（https://nextjs.org/docs/app/api-reference/functions/generate-metadata）的新功能。Head.js似乎已经被删除了这个功能。通过使用标签，我有一个css文件，我需要导入。我以前可以这样导入它：

import Head from 'next/head';

export default function Page() { 

return ( 
<> 
 <Head> 
{/* Example Url */}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap-grid.min.css" />
 </Head> 
</> 

)
}

但现在已经不管用了。我是否可以使用新的要素元数据来完成此操作？不然怎么办？

next.js

来源：https://stackoverflow.com/questions/77254886/using-external-css-links-in-nextjs-13-metadata

1条答案

按热度按时间

jtw3ybtb1#

我认为你可以直接在layout.ts上把这个标签放在一个head标签中，而不使用元数据生成，就像这样：

export default function layout({
    children,
    }: {
      children: React.ReactNode
    }) {
    return (
        <>
          <html lang="en">
          <head>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap-grid.min.css" />
          </head>
            <body>
              {children}
            </body>
          </html>
        </>
      )

编辑：Nextjs不建议在头部链接上加载样式表，新的元数据也不启用此选项，但一些用户正在使用这种方法：通过huozhi
如果你的页面需要的话，你可以使用ReactDOM.preload来预加载外部的修改
从'react-dom'导入React
导出默认函数page（）{ ReactDOM.preload（'/https：//cdn.com/bootstrap.min.css'，{ as：'stylish' }，）}
你可以在这里看到：https://github.com/vercel/next.js/issues/46785新的元数据之前的错误说明了更多关于这个问题的信息：no-stylesheets-in-head-component

赞(0）回复(0）举报 2023-10-18

我来回答

在Nextjs 13中使用外部css链接

1条答案

相关问题

热门标签

最新问答