.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 = {

layouts/ListLayout.js

@@ -86,11 +86,9 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
           })}
         </ul>
       </div>
-      {pagination &&
+      {pagination && pagination.totalPages > 1 && !searchValue && (
-        pagination.totalPages > 1 &&
+        <Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
-        !searchValue && (
+      )}
-          <Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
-        )}
     </>
   )
 }

layouts/PostLayout.js

@@ -2,6 +2,7 @@ import Link from '@/components/Link'
 import PageTitle from '@/components/PageTitle'
 import SectionContainer from '@/components/SectionContainer'
 import { BlogSeo } from '@/components/SEO'
+import Image from '@/components/Image'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 
@@ -47,7 +48,13 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
               <dd>
                 <ul className="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
                   <li className="flex items-center space-x-2">
-                    <img src={siteMetadata.image} alt="avatar" className="w-10 h-10 rounded-full" />
+                    <Image
+                      src={siteMetadata.image}
+                      width="38px"
+                      height="38px"
+                      alt="avatar"
+                      className="w-10 h-10 rounded-full"
+                    />
                     <dl className="text-sm font-medium leading-5 whitespace-nowrap">
                       <dt className="sr-only">Name</dt>
                       <dd className="text-gray-900 dark:text-gray-100">{siteMetadata.author}</dd>

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: {
+  eslint: {
-    webpack5: true,
+    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",
+    "start": "next-remote-watch ./data",
-    "dev": "cross-env TAILWIND_MODE=watch next dev",
+    "dev": "next dev",
     "build": "next build && node ./scripts/generate-sitemap",
     "serve": "next start",
     "analyze": "cross-env ANALYZE=true next build",
+    "lint": "next lint --fix --dir pages --dir components --dir lib --dir layouts --dir scripts",
     "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,23 +33,21 @@
     "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",
     "lint-staged": "^11.0.0",
-    "next-compose-plugins": "^2.2.1",
     "next-remote-watch": "^1.0.0",
     "prettier": "2.2.1",
     "rehype": "11.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',