perf: make use of next/dynamic where possible to minimize buddle size

[davidlhw]

Context

currently, the first load js is a little on the larger end. we can minimize it by making use of lazy loading, leveraging next/dynamic

Route (app)                              Size     First Load JS
┌ ƒ /                                    332 B           356 kB
├ ƒ /_not-found                          331 B           192 kB
├ ƒ /account/auth/confirm-signup         341 B           427 kB
├ ƒ /account/auth/forgot                 342 B           427 kB
├ ƒ /account/auth/login                  342 B           427 kB
├ ƒ /account/auth/reset-password         342 B           427 kB
├ ƒ /account/auth/signup                 342 B           427 kB
├ ƒ /account/auth/verify                 342 B           427 kB
├ ƒ /api/auth/[...nextauth]              0 B                0 B
├ ƒ /api/trpc/[trpc]                     0 B                0 B
├ ƒ /bidding                             346 B           284 kB
├ ƒ /course/[code]                       332 B           356 kB
├ ○ /opengraph-image.png                 0 B                0 B
├ ƒ /professor/[slug]                    332 B           356 kB
├ ƒ /search                              8.48 kB         329 kB
├ ƒ /submit                              29 kB           436 kB
└ ○ /twitter-image.png                   0 B                0 B
+ First Load JS shared by all            191 kB
  ├ chunks/3882-ac2f17dd3645c963.js      98.5 kB
  ├ chunks/52774a7f-18913dddb0d110b1.js  36.4 kB
  ├ chunks/fd9d1056-3e7578807e1e4a5b.js  53.8 kB
  └ other shared chunks (total)          2.63 kB


○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

Implementation

see https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic