завел странички и сделал подобие лэйаута

components/Nav/Nav.tsx

+import React from 'react';
+import { Flex, Link } from '@chakra-ui/react';
+import NextLink from 'next/link';
+
+const Nav = () => {
+  return (
+    <Flex
+      w="250px"
+      paddingRight="24px"
+      flexDirection="column"
+      color="blue.600"
+    >
+      <NextLink href="/"><Link padding="8px 0px">Home</Link></NextLink>
+      <NextLink href="/watchlist"><Link padding="8px 0px" >Watchlist</Link></NextLink>
+    </Flex>
+  )
+}
+
+export default Nav;

components/Page/Page.tsx

+import React from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+
+import Nav from '../Nav/Nav';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const Page = ({ children }: Props) => {
+  return (
+    <Flex
+      w="100%"
+      minH="100vh"
+      padding="140px 48px 48px 48px"
+      bgColor="gray.200"
+    >
+      <Nav/>
+      <Box borderRadius="10px" w="100%" overflow="hidden">{ children }</Box>
+    </Flex>
+  );
+};
+
+export default Page

pages/index.tsx

 import React from 'react';
 import type { NextPage } from 'next';
 import { Center } from '@chakra-ui/react';
+import Page from '../components/Page/Page';
 
 const Home: NextPage = () => {
   return (
-    <Center w="100%" h="100vh">
+    <Page>
+      <Center h="100%" bgColor="white" color="black">
         Home Page
       </Center>
+    </Page>
   );
 };
 

pages/watchlist.tsx

+import React from 'react';
+import type { NextPage } from 'next';
+import { Center } from '@chakra-ui/react';
+import Page from '../components/Page/Page';
+
+const WatchList: NextPage = () => {
+  return (
+    <Page>
+      <Center h="100%" bgColor="white" color="black">
+      Watch List Page
+      </Center>
+    </Page>
+  );
+};
+
+export default WatchList