admin管理员组

文章数量:1365889

I am using Next JS 15.2.3, and I am trying to include a CSS file from the public folder into a layout.tsx file.

According to this similar question, I tried to include the CSS file like this in the layout.tsx file, but it didn't work.

import React from 'react';
import Head from 'next/head'
...
<Head>
    <link rel="stylesheet" href="/assets/css/styles.css" />
</Head>
...

I found from the documentation (link here) that the Head element is not valid anymore because of the introduction of the app router, since when the metadata included in the head can be provided in the following format and there is no way to provide a link tag in the head of the document:

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: "My Page Title",
}
 
export default function Page() {
  return "..."
}

I also tried to include the path directly to the file directly in the layout.tsx file, like so

import "/assets/css/styles.css";

But it shows this error:

Module not found: Can't resolve "/assets/css/styles.css"

Is there a way to include CSS from a public folder without moving it to the app directory?

I am using Next JS 15.2.3, and I am trying to include a CSS file from the public folder into a layout.tsx file.

According to this similar question, I tried to include the CSS file like this in the layout.tsx file, but it didn't work.

import React from 'react';
import Head from 'next/head'
...
<Head>
    <link rel="stylesheet" href="/assets/css/styles.css" />
</Head>
...

I found from the documentation (link here) that the Head element is not valid anymore because of the introduction of the app router, since when the metadata included in the head can be provided in the following format and there is no way to provide a link tag in the head of the document:

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: "My Page Title",
}
 
export default function Page() {
  return "..."
}

I also tried to include the path directly to the file directly in the layout.tsx file, like so

import "/assets/css/styles.css";

But it shows this error:

Module not found: Can't resolve "/assets/css/styles.css"

Is there a way to include CSS from a public folder without moving it to the app directory?

  • css
  • next.js
Share Improve this question edited yesterday Harish asked yesterday HarishHarish 5282 gold badges11 silver badges20 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

Just import the CSS with the following path in layout.tsx:

import "public/assets/css/styles.css";

I had missed the public keyword.

本文标签： nextjsHow do I include CSS file from public folder in Next JS 15 projectStack Overflow

版权声明：本文标题：next.js - How do I include CSS file from public folder in Next JS 15 project? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743798647a2540901.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。