Ошибка Nextjs при предварительном рендеринге страницы "/"

Я получаю эту ошибку:

Вы импортируете компонент, которому требуется useState. Он работает только в клиентском компоненте, но ни один из его родителей не помечен как «использовать клиент», поэтому по умолчанию они являются серверными компонентами.

./src/app/page.js
Attempted import error: 'Navbar' is not exported from './components/navbar' (imported as 'Navbar').

Import trace for requested module:
./src/app/page.js

./src/app/page.js
Attempted import error: 'Navbar' is not exported from './components/navbar' (imported as 'Navbar').

Import trace for requested module:
./src/app/page.js

info  - Linting and checking validity of types
info  - Collecting page data
info  - Creating an optimized production build ...SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at U (C:\Users\jasmi\OneDrive\Desktop\BoxingApp\boxingtrainer\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.edge.production.min.js:22:53)
    at c (C:\Users\jasmi\OneDrive\Desktop\BoxingApp\boxingtrainer\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.edge.production.min.js:24:307)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at U (C:\Users\jasmi\OneDrive\Desktop\BoxingApp\boxingtrainer\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.edge.production.min.js:22:53)
    at c (C:\Users\jasmi\OneDrive\Desktop\BoxingApp\boxingtrainer\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.edge.production.min.js:24:307)
info  - Generating static pages (5/5)

> Export encountered errors on following paths:
        /page: /

Это происходит, когда я пытаюсь запустить команду npm run build в приложении nextjs, которое только начал создавать. Это код, который у меня есть в page.js:

import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from './page.module.css'
import { Navbar } from './components/navbar'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <main className = {styles.main}>
      <Navbar/>
    </main>
  )
}

И в навбаре:

"use client";

import React, { useState } from 'react';

export default function Navbar() {
  const [showNav, setShowNav] = useState(false);
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <nav
      className = "fixed top-0 left-0 w-full h-10 bg-gray-100 border-b border-gray-300"
      onMouseEnter = {() => setShowNav(true)}
      onMouseLeave = {() => setShowNav(false)}
    >
      <div className = "flex items-center h-full">
        <div className = "ml-4 font-bold">Boxing Trainer</div>
        {loggedIn && (
          <div className = "flex items-center justify-center flex-1">
            <div className = "w-6 h-6 mr-2 bg-gray-300 rounded-full"></div>
          </div>
        )}
        <div className = "flex items-center justify-end flex-1">
          {!loggedIn && (
            <>
              <button className = "px-4 py-2 mr-4 text-sm font-medium text-gray-500 border border-blue-500 rounded-lg hover:bg-blue-500 hover:text-white focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                Login
              </button>
              <button className = "px-4 py-2 mr-4 text-sm font-medium text-gray-500 border border-blue-500 rounded-lg hover:bg-blue-500 hover:text-white focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                Signup
              </button>
            </>
          )}
          {loggedIn && (
            <button className = "px-4 py-2 mr-4 text-sm font-medium text-gray-500 border border-blue-500 rounded-lg hover:bg-blue-500 hover:text-white focus:outline-none focus:ring focus:ring-blue-500 focus:ring-opacity-50">
              Logout
            </button>
          )}
        </div>
      </div>
    </nav>
  );
};