feat: using dynamic import

pages/_app.tsx

@@ -1,10 +1,12 @@
 import Head from 'next/head'
 import type { AppProps } from 'next/app'
 import { ThemeProvider } from 'next-themes'
+import dynamic from 'next/dynamic'
 import { useEffect, useState } from 'react'
 
-import Footer from '@components/Footer'
+const Footer = dynamic(()=> import('@components/Footer'))
-import Navbar from '@components/Navbar'
+const Navbar = dynamic(()=> import('@components/Navbar'))
+
 import Crypto from 'crypto'
 
 import secret from '../secret.json'

pages/bots/[id].tsx

@@ -1,4 +1,5 @@
 import { NextPage, NextPageContext } from 'next'
+import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { SnowflakeUtil } from 'discord.js'
 import { ParsedUrlQuery } from 'querystring'
@@ -9,18 +10,21 @@ import * as Query from '@utils/Query'
 import Day from '@utils/Day'
 import { formatNumber } from '@utils/Tools'
 
-import Container from '@components/Container'
-import DiscordAvatar from '@components/DiscordAvatar'
-import Divider from '@components/Divider'
-import Tag from '@components/Tag'
-import Owner from '@components/Owner'
-import Segment from '@components/Segment'
-import SEO from '@components/SEO'
-import LongButton from '@components/LongButton'
-import Advertisement from '@components/Advertisement'
-import Tooltip from '@components/Tooltip'
 import NotFound from '../404'
 
+const Container = dynamic(()=> import('@components/Container'))
+const DiscordAvatar = dynamic(()=> import('@components/DiscordAvatar'))
+const Divider = dynamic(()=> import('@components/Divider'))
+const Tag = dynamic(()=> import('@components/Tag'))
+const Owner = dynamic(()=> import('@components/Owner'))
+const Segment = dynamic(()=> import('@components/Segment'))
+const SEO = dynamic(()=> import('@components/SEO'))
+const LongButton = dynamic(()=> import('@components/LongButton'))
+const Advertisement = dynamic(()=> import('@components/Advertisement'))
+const Tooltip = dynamic(()=> import('@components/Tooltip'))
+
+
+
 const Bots: NextPage<BotsProps> = ({ data, date }) => {
 	if (!data || !data.id) return <NotFound />
 	return <Container paddingTop className='py-10'>

pages/debug.tsx

@@ -1,17 +1,19 @@
 import { useTheme } from 'next-themes'
+import dynamic from 'next/dynamic'
 import { useFormik } from 'formik'
 import MarkdownView from 'react-showdown'
 import sanitizeHtml from 'sanitize-html'
 
 import { anchorHeader, checkBrowser } from '@utils/Tools'
 
-import Container from '@components/Container'
+const Container = dynamic(()=> import('@components/Container'))
-import Divider from '@components/Divider'
+const Divider = dynamic(()=> import('@components/Divider'))
-import Segment from '@components/Segment'
+const Segment = dynamic(()=> import('@components/Segment'))
 
 import Package from '../package.json'
 
 
+
 const ClientInfo = ( ):JSX.Element => {
 	const formik = useFormik({
 		initialValues: {

pages/guidelines.tsx

@@ -1,5 +1,7 @@
 import { NextPage } from 'next'
-import Docs from '@components/Docs'
+import dynamic from 'next/dynamic'
+
+const Docs = dynamic(()=> import('@components/Docs'))
 
 const Privacy: NextPage = () => {
 	return (

pages/index.tsx

@@ -1,8 +1,5 @@
 import { NextPage } from 'next'
 import dynamic from 'next/dynamic'
-import Paginator from '@components/Paginator'
-import Search from '@components/Search'
-import Tag from '@components/Tag'
 
 import { BotList } from '@types'
 import * as Query from '@utils/Query'
@@ -12,6 +9,9 @@ const Advertisement = dynamic(()=> import('@components/Advertisement'))
 const Container = dynamic(()=> import('@components/Container'))
 const BotCard = dynamic(()=> import('@components/BotCard'))
 const Wave  = dynamic(()=> import('@components/Wave'))
+const Tag = dynamic(()=> import('@components/Tag'))
+const Search = dynamic(()=> import('@components/Search'))
+const Paginator = dynamic(()=> import('@components/Paginator'))
 
 const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 	return (

pages/list/votes.tsx

@@ -1,15 +1,17 @@
 import { NextPage, NextPageContext } from 'next'
+import dynamic from 'next/dynamic'
 import { ParsedUrlQuery } from 'querystring'
 
 import { BotList } from '@types'
 import * as Query from '@utils/Query'
 
-import Advertisement from '@components/Advertisement'
-import BotCard from '@components/BotCard'
-import Container from '@components/Container'
-import Paginator from '@components/Paginator'
 import NotFound from '../404'
 
+const Advertisement = dynamic(()=> import('@components/Advertisement'))
+const BotCard = dynamic(()=> import('@components/BotCard'))
+const Container = dynamic(()=> import('@components/Container'))
+const Paginator = dynamic(()=> import('@components/Paginator'))
+
 const Votes:NextPage<VotesProps> = ({ data }:VotesProps) => {
 	if(!data) return <NotFound />
 	return <Container paddingTop>

pages/privacy.tsx

@@ -1,5 +1,7 @@
 import { NextPage } from 'next'
-import Docs from '@components/Docs'
+import dynamic from 'next/dynamic'
+
+const Docs = dynamic(()=> import('@components/Docs'))
 
 const Privacy: NextPage = () => {
 	return (

pages/users/[id].tsx

@@ -1,20 +1,24 @@
 import { NextPage, NextPageContext } from 'next'
+import dynamic from 'next/dynamic'
 import { SnowflakeUtil } from 'discord.js'
-import * as Query from '@utils/Query'
 import { ParsedUrlQuery } from 'querystring'
 import { josa } from 'josa'
+
 import { Bot, User } from '@types'
+import * as Query from '@utils/Query'
+import { checkPerm } from '@utils/Tools'
 
 import NotFound from '../404'
-import Container from '@components/Container'
+
-import SEO from '@components/SEO'
+const Container = dynamic(()=> import('@components/Container'))
-import DiscordAvatar from '@components/DiscordAvatar'
+const SEO = dynamic(()=> import('@components/SEO'))
-import Divider from '@components/Divider'
+const DiscordAvatar = dynamic(()=> import('@components/DiscordAvatar'))
-import BotCard from '@components/BotCard'
+const Divider = dynamic(()=> import('@components/Divider'))
-import Tag from '@components/Tag'
+const BotCard = dynamic(()=> import('@components/BotCard'))
-import { checkPerm } from '@utils/Tools'
+const Tag = dynamic(()=> import('@components/Tag'))
-import Advertisement from '@components/Advertisement'
+const Advertisement = dynamic(()=> import('@components/Advertisement'))
-import Tooltip from '@components/Tooltip'
+const Tooltip = dynamic(()=> import('@components/Tooltip'))
+
 const Users: NextPage<UserProps> = ({ data }) => {
 	if (!data.id) return <NotFound />
 	return (