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?
1 Answer
Reset to default 0Just import the CSS with the following path in layout.tsx:
import "public/assets/css/styles.css";
I had missed the public keyword.