Решил попробывать написать сайт на Type Script Navbar.tsx 'use client' import { Box, Flex, Button, useColorModeValue, Stack, useColorMode, Center, } from '@chakra-ui/react' import { MoonIcon, SunIcon } from '@chakra-ui/icons' export default function Nav() { const { colorMode, toggleColorMode } = useColorMode() return ( <> <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}> <Flex h={16} alignItems={'center'} justifyContent={'space-between'}> <Box>Logo</Box> <Flex alignItems={'center'}> <Stack direction={'row'} spacing={7}> <Button onClick={toggleColorMode}> {colorMode === 'light' ? <MoonIcon /> : <SunIcon />} </Button> </Stack> </Flex> </Flex> </Box> </> ) } JS 'use client' import { Box, Flex, Button, useColorModeValue, Stack, useColorMode, Center, } from '@chakra-ui/react' import { MoonIcon, SunIcon } from '@chakra-ui/icons' export default function Nav() { const { colorMode, toggleColorMode } = useColorMode() return ( <> <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}> <Flex h={16} alignItems={'center'} justifyContent={'space-between'}> <Box>Logo</Box> <Flex alignItems={'center'}> <Stack direction={'row'} spacing={7}> <Button onClick={toggleColorMode}> {colorMode === 'light' ? <MoonIcon /> : <SunIcon />} </Button> </Stack> </Flex> </Flex> </Box> </> ) } page.tsx import Hero from '@/components/Hero'; import NavBar from '@/components/NavBar'; export default function Page() { return ( <> <NavBar /> <Hero/> </> ); } JS import Hero from '@/components/Hero'; import NavBar from '@/components/NavBar'; export default function Page() { return ( <> <NavBar /> <Hero/> </> ); } layot.tsx "use client" import { ColorModeScript } from "@chakra-ui/react" import Provider from "./provider" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="ru" data-theme="dark"> <body> <ColorModeScript type="cookie" nonce="" /> <Provider>{children}</Provider> </body> </html> ) } JS "use client" import { ColorModeScript } from "@chakra-ui/react" import Provider from "./provider" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="ru" data-theme="dark"> <body> <ColorModeScript type="cookie" nonce="" /> <Provider>{children}</Provider> </body> </html> ) }