Add chakra and prettier

.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": ["next", "next/core-web-vitals"]
+  "extends": ["next", "next/core-web-vitals", "prettier"]
 }

.gitignore

@@ -16,6 +16,7 @@
 /build
 
 # misc
+.idea
 .DS_Store
 *.pem
 

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "singleQuote": true
+}

next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

package.json

@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.6.5",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "framer-motion": "^4.1.17",
     "next": "11.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"
@@ -17,6 +21,14 @@
     "@types/react": "17.0.15",
     "eslint": "7.32.0",
     "eslint-config-next": "11.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^7.0.1",
+    "pretty-quick": "^3.1.1",
     "typescript": "4.3.5"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged && npm run lint"
+    }
   }
 }

pages/_app.tsx

@@ -1,7 +1,14 @@
-import '../styles/globals.css'
+import type { AppProps } from 'next/app';
-import type { AppProps } from 'next/app'
+import { ChakraProvider } from '@chakra-ui/react';
+
+import '../styles/globals.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <ChakraProvider>
+      <Component {...pageProps} />
+    </ChakraProvider>
+  );
 }
-export default MyApp
+
+export default MyApp;