refactor(root): change folder structure

.eslintrc.js

@@ -25,15 +25,17 @@ module.exports = {
   extends: ['plugin:react/recommended', 'next', 'airbnb', 'prettier'],
   plugins: ['react', 'prettier'],
   rules: {
-    'react/react-in-jsx-scope': 'off',
-    'react/prop-types': 'off',
-    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'no-plusplus': 'off',
     'react/function-component-definition': [
       2,
       { namedComponents: 'arrow-function' },
     ],
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
     'react/jsx-props-no-spreading': 'off',
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
     '@next/next/no-page-custom-font': 'off',
-    'no-plusplus': 'off',
   },
 };

jsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["src/components/*"],
+      "@/styles/*": ["src/styles/*"]
+    }
   }
 }

pages/_app.js → src/pages/_app.js

@@ -6,12 +6,12 @@ import { Box, ChakraProvider } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import SEO from 'next-seo.config';
-import theme from 'styles/theme';
-import GlobalStyle from 'styles/styles';
-import 'styles/css/nprogress.css';
+import theme from '@/styles/theme';
+import GlobalStyle from '@/styles/styles';
+import '@/styles/css/nprogress.css';
 
-import Star from 'components/Star';
-import Footer from 'components/Footer';
+import Star from '@/components/Star';
+import Footer from '@/components/Footer';
 
 Router.events.on('routeChangeStart', () => NProgress.start());
 Router.events.on('routeChangeComplete', () => NProgress.done());

pages/index.js → src/pages/index.js

@@ -1,5 +1,5 @@
-import PageContainer from 'components/PageContainer';
-import Actions from 'components/Actions';
+import PageContainer from '@/components/PageContainer';
+import Actions from '@/components/Actions';
 
 const Home = () => (
   <PageContainer title="Next.js Chakra Starter">

pages/second.js → src/pages/second.js

@@ -1,5 +1,5 @@
-import PageContainer from 'components/PageContainer';
-import Actions from 'components/Actions';
+import PageContainer from '@/components/PageContainer';
+import Actions from '@/components/Actions';
 
 const Second = () => (
   <PageContainer title="You Are In Second Page">