.eslintrc.js

@@ -1,17 +1,5 @@
 module.exports = {
   root: true,
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
   env: {
     browser: true,
     amd: true,
@@ -19,10 +7,10 @@ module.exports = {
   },
   extends: [
     'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
     'plugin:jsx-a11y/recommended',
     'plugin:prettier/recommended',
+    'next',
+    'next/core-web-vitals',
   ],
   rules: {
     'prettier/prettier': 'error',

components/Image.js

@@ -0,0 +1,6 @@
+import NextImage from 'next/image'
+
+// eslint-disable-next-line jsx-a11y/alt-text
+const Image = ({ ...rest }) => <NextImage {...rest} />
+
+export default Image

components/MDXComponents.js

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from './Image'
 import CustomLink from './Link'
 
 const MDXComponents = {

lib/mdx.js

@@ -100,7 +100,7 @@ export async function getAllFilesFrontMatter(folder) {
     const fileName = file.slice(prefixPaths.length + 1).replace(/\\/g, '/')
     // Remove Unexpected File
     if (path.extname(fileName) !== '.md' && path.extname(fileName) !== '.mdx') {
-        return
+      return
     }
     const source = fs.readFileSync(file, 'utf8')
     const { data } = matter(source)

next.config.js

@@ -5,8 +5,8 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 module.exports = withBundleAnalyzer({
   reactStrictMode: true,
   pageExtensions: ['js', 'jsx', 'md', 'mdx'],
-  future: {
-    webpack5: true,
+  eslint: {
+    dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
   },
   webpack: (config, { dev, isServer }) => {
     config.module.rules.push({

package.json

@@ -3,11 +3,12 @@
   "version": "0.3.4",
   "private": true,
   "scripts": {
-    "start": "cross-env TAILWIND_MODE=watch next-remote-watch ./data",
-    "dev": "cross-env TAILWIND_MODE=watch next dev",
+    "start": "next-remote-watch ./data",
+    "dev": "next dev",
     "build": "next build && node ./scripts/generate-sitemap",
     "serve": "next start",
     "analyze": "cross-env ANALYZE=true next build",
+    "lint": "next lint --fix",
     "prepare": "husky install"
   },
   "dependencies": {
@@ -17,11 +18,11 @@
     "autoprefixer": "^10.2.5",
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
-    "next": "10.2.3",
+    "next": "11.0.1",
     "next-mdx-remote": "^3.0.1",
     "next-seo": "4.24.0",
     "next-themes": "^0.0.14",
-    "postcss": "^8.2.15",
+    "postcss": "^8.3.5",
     "preact": "^10.5.13",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -32,18 +33,17 @@
     "remark-footnotes": "^3.0.0",
     "remark-math": "^3.0.1",
     "remark-slug": "6.0.0",
-    "tailwindcss": "^2.1.1"
+    "tailwindcss": "^2.2.2"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "10.2.3",
+    "@next/bundle-analyzer": "11.0.1",
     "@svgr/webpack": "^5.5.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.17.0",
+    "eslint": "^7.29.0",
+    "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
     "file-loader": "^6.0.0",
     "globby": "11.0.3",
     "husky": "^6.0.0",

pages/about.js

@@ -1,5 +1,6 @@
 import siteMetadata from '@/data/siteMetadata'
 import SocialIcon from '@/components/social-icons'
+import Image from '@/components/Image'
 import { PageSeo } from '@/components/SEO'
 
 export default function About() {
@@ -18,7 +19,13 @@ export default function About() {
         </div>
         <div className="items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0">
           <div className="flex flex-col items-center pt-8 space-x-2">
-            <img src={siteMetadata.image} alt="avatar" className="w-48 h-48 rounded-full" />
+            <Image
+              src={siteMetadata.image}
+              alt="avatar"
+              width="192px"
+              height="192px"
+              className="w-48 h-48 rounded-full"
+            />
             <h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">
               {siteMetadata.author}
             </h3>

tailwind.config.js

@@ -20,7 +20,7 @@ module.exports = {
         sans: ['Inter', ...defaultTheme.fontFamily.sans],
       },
       colors: {
-        blue: colors.lightBlue,
+        blue: colors.sky,
         code: {
           green: '#b5f4a5',
           yellow: '#ffe484',