Error "createContext only works in Client Components"

[Yippiekaiaii]

I am trying to use styled components in my app and i am getting the error below, can anyone help with it:

TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

Its within a Next.js component which at the moment is just a navbar.

Below is my code so far:

import Link from "next/link";
import styled from "styled-components";

const StyledHeader = styled.header`
background-color: #222;
`;

export default function Header() {
    return (
        <StyledHeader>
            <Link href={'/'}>Web Shop</Link>

            <nav>
                <Link href={'/'}>Home</Link>
                <Link href={'/products'}>All Products</Link>
                <Link href={'/categories'}>Categories</Link>
                <Link href={'/account'}>Account</Link>
                <Link href={'/cart'}>Cart(0)</Link>
            </nav>
        </StyledHeader>
    );
}

Below is my package.json so you can see my versions:

{
  "name": "webshop-front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.10",
    "next": "13.4.10",
    "postcss": "8.4.26",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "styled-components": "^6.0.4",
    "tailwindcss": "3.3.3"
  }
}

[horaklukas]

yeah, as the error suggests, add a use client directive to the top of your navbar component. Currently styled-components are not supported in the server components in Next.js and you need tu mark every component using styled-components as a client component.

You can read more about using styled components together with Next.js 13.4+ in their docs