diff --git a/.eslintrc.js b/.eslintrc.js
index 4a7f597a..4cc4ba65 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,5 +4,6 @@ module.exports = {
   extends: ['eslint-config-yceffort/typescript'],
   rules: {
     '@typescript-eslint/naming-convention': extendedRules,
+    'react/react-in-jsx-scope': 'off',
   },
 }
diff --git a/pages/404.tsx b/pages/404.tsx
index 1bbdfa68..18fce96c 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import CustomLink from '#components/Link'
 
 export default function FourZeroFour() {
diff --git a/pages/[year]/[...slugs].tsx b/pages/[year]/[...slugs].tsx
index b549a7f0..2fc86b92 100644
--- a/pages/[year]/[...slugs].tsx
+++ b/pages/[year]/[...slugs].tsx
@@ -1,5 +1,4 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
-import React from 'react'
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
 
 import { Post } from '#commons/types'
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3849b288..e4192fe4 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,5 @@
 import 'src/tailwind.css'
 
-import React from 'react'
 import App from 'next/app'
 import Head from 'next/head'
 import Router from 'next/router'
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 7598cab8..ce1e8343 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default class MyDocument extends Document {
diff --git a/pages/_offline.tsx b/pages/_offline.tsx
index 6a2525cf..f4dfee78 100644
--- a/pages/_offline.tsx
+++ b/pages/_offline.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import CustomLink from '#components/Link'
 
 export default function Offline() {
diff --git a/pages/about.tsx b/pages/about.tsx
index 5db2e87e..4c3f0e02 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import Image from 'next/image'
 
 import SiteConfig from '#src/config'
 import { PageSeo } from '#components/SEO'
diff --git a/pages/generate-screenshot.tsx b/pages/generate-screenshot.tsx
index 47b5f5ec..098154f5 100644
--- a/pages/generate-screenshot.tsx
+++ b/pages/generate-screenshot.tsx
@@ -1,5 +1,4 @@
 import { GetServerSideProps } from 'next'
-import React from 'react'
 
 import Screenshot from '#components/screenshot'
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 291cbef4..95d69144 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { GetStaticProps } from 'next'
 import { format } from 'date-fns'
 
diff --git a/pages/pages/[id].tsx b/pages/pages/[id].tsx
index 562ee61f..ea7c5e44 100644
--- a/pages/pages/[id].tsx
+++ b/pages/pages/[id].tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { GetStaticPaths, GetStaticProps } from 'next'
 
 import { Post } from '#commons/types'
diff --git a/pages/tags.tsx b/pages/tags.tsx
index 937c1782..e34d2594 100644
--- a/pages/tags.tsx
+++ b/pages/tags.tsx
@@ -1,5 +1,4 @@
 import { GetStaticProps } from 'next'
-import React from 'react'
 
 import { getAllTagsFromPosts } from '#utils/Post'
 import { PageSeo } from '#components/SEO'
diff --git a/pages/tags/[tag]/pages/[id].tsx b/pages/tags/[tag]/pages/[id].tsx
index caf7768b..8e7b4d0c 100644
--- a/pages/tags/[tag]/pages/[id].tsx
+++ b/pages/tags/[tag]/pages/[id].tsx
@@ -1,5 +1,4 @@
 import { GetStaticPaths, GetStaticProps } from 'next'
-import React from 'react'
 
 import { SiteConfig } from '#src/config'
 import { DEFAULT_NUMBER_OF_POSTS } from '#commons/const'
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c6ac91df..6ecc03e4 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Link from './Link'
 
 import SocialIcon from '#components/icons'
diff --git a/src/components/LayoutWrapper.tsx b/src/components/LayoutWrapper.tsx
index 9d2b71da..270d8f56 100644
--- a/src/components/LayoutWrapper.tsx
+++ b/src/components/LayoutWrapper.tsx
@@ -1,5 +1,5 @@
-import React from 'react'
 import Image from 'next/image'
+import { ReactNode } from 'react'
 
 import Link from './Link'
 import SectionContainer from './SectionContainer'
@@ -9,7 +9,7 @@ import ThemeSwitch from './ThemeSwitch'
 
 import SiteConfig from '#src/config'
 
-const LayoutWrapper = ({ children }: { children: React.ReactNode }) => {
+const LayoutWrapper = ({ children }: { children: ReactNode }) => {
   return (
     <SectionContainer>
       <div className="flex flex-col justify-between h-screen">
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index d8aabfaf..c81f6fb1 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
 import Link from 'next/link'
+import { HTMLProps } from 'react'
 
 const CustomLink = ({
   href,
   ...rest
-}: { href: string } & React.HTMLProps<HTMLAnchorElement>) => {
+}: { href: string } & HTMLProps<HTMLAnchorElement>) => {
   const isInternalLink = href && href.startsWith('/')
   const isAnchorLink = href && href.startsWith('#')
 
diff --git a/src/components/PageTitle.tsx b/src/components/PageTitle.tsx
index df514db0..bd8a60d8 100644
--- a/src/components/PageTitle.tsx
+++ b/src/components/PageTitle.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
-export default function PageTitle({ children }: { children: React.ReactNode }) {
+export default function PageTitle({ children }: { children: ReactNode }) {
   return (
     <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
       {children}
diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
index 654ab592..241ea90f 100644
--- a/src/components/SEO.tsx
+++ b/src/components/SEO.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { NextSeo, ArticleJsonLd } from 'next-seo'
 
 import SiteConfig from '#src/config'
diff --git a/src/components/SectionContainer.tsx b/src/components/SectionContainer.tsx
index f808c107..dedf71d2 100644
--- a/src/components/SectionContainer.tsx
+++ b/src/components/SectionContainer.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
 export default function SectionContainer({
   children,
 }: {
-  children: React.ReactNode
+  children: ReactNode
 }) {
   return (
     <div className="max-w-3xl px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0">
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 4aa520df..68f49f62 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import Link from 'next/link'
 
 const Tag = ({ text }: { text: string }) => {
diff --git a/src/components/icons/facebook.tsx b/src/components/icons/facebook.tsx
index f44d0601..72c65477 100644
--- a/src/components/icons/facebook.tsx
+++ b/src/components/icons/facebook.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function FacebookIcon({ className }: { className: string }) {
   return (
     <svg
diff --git a/src/components/icons/github.tsx b/src/components/icons/github.tsx
index 0df8215b..0d882760 100644
--- a/src/components/icons/github.tsx
+++ b/src/components/icons/github.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function GithubIcon({ className }: { className: string }) {
   return (
     <svg
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
index 38898dc3..2073afd7 100644
--- a/src/components/icons/index.tsx
+++ b/src/components/icons/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { FC } from 'react'
 
 import MailIcon from '#components/icons/mail'
 import GithubIcon from '#components/icons/github'
@@ -15,7 +15,7 @@ type IconType =
   | 'linkedin'
   | 'twitter'
 
-const Components: Record<IconType, React.FC<{ className: string }>> = {
+const Components: Record<IconType, FC<{ className: string }>> = {
   mail: MailIcon,
   github: GithubIcon,
   facebook: FacebookIcon,
diff --git a/src/components/icons/linkedin.tsx b/src/components/icons/linkedin.tsx
index e895c016..506581b7 100644
--- a/src/components/icons/linkedin.tsx
+++ b/src/components/icons/linkedin.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function LinkedinIcon({ className }: { className: string }) {
   return (
     <svg
diff --git a/src/components/icons/mail.tsx b/src/components/icons/mail.tsx
index d49ce428..a380ede0 100644
--- a/src/components/icons/mail.tsx
+++ b/src/components/icons/mail.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function MailIcon({ className }: { className: string }) {
   return (
     <svg
diff --git a/src/components/icons/profile.tsx b/src/components/icons/profile.tsx
index 57d210ba..5e2a51c1 100644
--- a/src/components/icons/profile.tsx
+++ b/src/components/icons/profile.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function ProfileIcon({ className }: { className: string }) {
   return (
     <svg
diff --git a/src/components/icons/twitter.tsx b/src/components/icons/twitter.tsx
index 9b247bc1..f7a0e77f 100644
--- a/src/components/icons/twitter.tsx
+++ b/src/components/icons/twitter.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function TwitterIcon({ className }: { className: string }) {
   return (
     <svg
diff --git a/src/components/icons/youtube.tsx b/src/components/icons/youtube.tsx
index a22d23e5..a88d0238 100644
--- a/src/components/icons/youtube.tsx
+++ b/src/components/icons/youtube.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function YoutubeIcon({ className }: { className: string }) {
   return (
     <svg
diff --git a/src/components/layouts/List.tsx b/src/components/layouts/List.tsx
index 589025ae..c8ecfc71 100644
--- a/src/components/layouts/List.tsx
+++ b/src/components/layouts/List.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { format } from 'date-fns'
 
 import { Post } from '#commons/types'
diff --git a/src/components/layouts/Post.tsx b/src/components/layouts/Post.tsx
index 6b437cbe..eb8be024 100644
--- a/src/components/layouts/Post.tsx
+++ b/src/components/layouts/Post.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
 import { format } from 'date-fns'
+import Image from 'next/image'
+import { PropsWithChildren } from 'react'
 
 import { FrontMatter } from '#commons/types'
 import SectionContainer from '#components/SectionContainer'
@@ -15,11 +16,10 @@ export default function PostLayout({
   children,
   frontMatter,
   slug,
-}: {
+}: PropsWithChildren<{
   slug: string
-  children: React.ReactNode
   frontMatter: FrontMatter
-}) {
+}>) {
   const { date, title, tags, description } = frontMatter
   const updatedAt = format(new Date(date), 'yyyy-MM-dd')
 
diff --git a/src/components/layouts/Post/math.tsx b/src/components/layouts/Post/math.tsx
index bfeb04fd..2e75408b 100644
--- a/src/components/layouts/Post/math.tsx
+++ b/src/components/layouts/Post/math.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 export default function MathLoader() {
   return (
     <>
diff --git a/src/components/screenshot/index.tsx b/src/components/screenshot/index.tsx
index 0584b3a0..f4e39892 100644
--- a/src/components/screenshot/index.tsx
+++ b/src/components/screenshot/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styles from './index.module.css'
 
 import SiteConfig from '#src/config'