I added some themekit CSS to Next.js head, but browser console raise warning, what is wrong?
Expected server HTML to contain a matching <head> in <div>.
const Layout = ({ children, isNavbarTransparent }: Props) => {
return (
<>
<head>
<link rel="stylesheet" href="themekit/css/bootstrap-grid.css" />
<link rel="stylesheet" href="themekit/css/style.css" />
<script src="themekit/scripts/jquery.min.js"></script>
<script src="themekit/scripts/main.js"></script>
</head>
You seem to be using HTML head. Instead use Head component from Next.js, as they suggest in their documentation.
We expose a built-in component for appending elements to the head of the page.
import Head from "next/head";
const Layout = ({ children, isNavbarTransparent }: Props) => {
return (
<>
<Head>
<link rel="stylesheet" href="themekit/css/bootstrap-grid.css" />
<link rel="stylesheet" href="themekit/css/style.css" />
<script src="themekit/scripts/jquery.min.js"></script>
<script src="themekit/scripts/main.js"></script>
</Head>