How to set up head in Next.js?

user_239219 0
Viewed 226

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>
next.js head css javascript
1 Answers

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>
user_152886410
Related