He leído las soluciones existentes y todavía parece que no puedo hacer que funcione.

componentes/NavBar.tsx

 import { Box, Link } from "@chakra-ui/react"; import { FunctionComponent } from "react"; import NextLink from "next/link"; interface NavBarProps {} const NavBar: FunctionComponent<any> = (props) => { return ( <Box {...props} bg="tomato" w="100%" p={4} ml={"auto"} color="white"> <NextLink href="/login"> <Link mr={4}>Login</Link> </NextLink> <NextLink href="/register"> <Link>Register</Link> </NextLink> </Box> ); }; export default NavBar;

índice.tsx

 import NavBar from "../components/navbar"; const Index = () => ( <> <NavBar></NavBar> <div>hello world</div> </> ); export default Index;

Mensaje de error de captura de pantalla de error