Dependencies Upgrades, SEO, DX, Performance Improvements

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

next.config.js

@@ -5,8 +5,6 @@ const nextConfig = {
     mdxRs: true,
   },
   reactStrictMode: true,
-  optimizeFonts: true,
-  swcMinify: true,
   images: {
     remotePatterns: [
       {

package.json

@@ -15,57 +15,57 @@
     "@clerk/nextjs": "^5.2.4",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@neondatabase/serverless": "^0.9.4",
-    "@next/mdx": "^14.2.22",
+    "@neondatabase/serverless": "^0.9.5",
+    "@next/mdx": "^15.1.4",
     "@prisma/client": "^5.17.0",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
     "@types/mdx": "^2.0.13",
-    "@vercel/analytics": "^1.3.1",
-    "@vercel/speed-insights": "^1.0.12",
+    "@vercel/analytics": "^1.4.1",
+    "@vercel/speed-insights": "^1.1.0",
     "algoliasearch": "^4.24.0",
-    "axios": "^1.7.4",
-    "class-variance-authority": "^0.7.0",
+    "axios": "^1.7.9",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.15.0",
+    "framer-motion": "^11.16.0",
     "gray-matter": "^4.0.3",
-    "lucide-react": "^0.416.0",
+    "lucide-react": "^0.469.0",
     "mermaid": "^11.0.2",
-    "next": "^14.2.13",
+    "next": "^15.1.4",
     "next-mdx-remote": "^5.0.0",
-    "next-themes": "^0.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next-themes": "^0.4.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-icons": "^5.4.0",
     "react-instantsearch-dom": "^6.40.4",
     "react-type-animation": "^3.2.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "uuid": "^11.0.3",
+    "uuid": "^11.0.4",
     "vaul": "^0.9.1",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.7",
-    "@tailwindcss/typography": "^0.5.15",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@next/bundle-analyzer": "^15.1.4",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
     "@types/tailwindcss": "^3.1.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
-    "eslint-config-next": "14.2.5",
+    "eslint-config-next": "^15.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-tailwindcss": "^3.17.5",
     "postcss": "^8",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.9",
-    "shiki": "^1.24.4",
+    "shiki": "^1.26.1",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2"
   }

src/app/blog/page.tsx

@@ -7,27 +7,34 @@ export default async function BlogPage() {
   const posts = await getAllPosts()
 
   return (
-    <div className="mx-auto max-w-4xl px-4 py-36">
+    <div className="mx-auto max-w-5xl px-4 py-36">
       <h1 className="mb-8 text-3xl font-bold tracking-tighter text-neutral-200 md:mb-20 md:text-5xl">
         Blog Posts
       </h1>
-      <div className="-mx-3 flex flex-col">
+      <div className="-mx-3 flex flex-col gap-3">
         {posts.map((post) => (
           <>
             <Link
               href={`/blog/${post.slug}`}
               key={post.slug}
-              className="rounded-lg p-4 transition-colors hover:bg-neutral-900 focus:bg-neutral-900"
+              className="flex items-start gap-6 rounded-lg p-4 transition-colors hover:bg-neutral-900 focus:bg-neutral-900"
             >
-              <p className="mb-1 text-xl font-semibold tracking-tight text-neutral-300 md:text-2xl">
-                {post.title}
-              </p>
-              <p className="mb-2.5 text-sm text-neutral-500 md:text-base">
-                {post.summary}
-              </p>
-              <p className="text-xs text-neutral-500 md:text-sm">
-                {formatDate(new Date(post.publishedAt))} • {post.views} views
-              </p>
+              <div className="w-3/12 flex-1">
+                <p className="mb-1 mt-1.5 text-xs text-neutral-500 md:text-sm">
+                  {formatDate(new Date(post.publishedAt))}
+                </p>
+                <p className="text-xs text-neutral-500 md:text-sm">
+                  {post.views} views
+                </p>
+              </div>
+              <div className="w-9/12">
+                <p className="mb-1 text-xl font-semibold tracking-tight text-neutral-300 md:text-2xl">
+                  {post.title}
+                </p>
+                <p className="mb-2.5 text-sm text-neutral-500 md:text-base">
+                  {post.summary}
+                </p>
+              </div>
             </Link>
           </>
         ))}

src/app/contribute/page.tsx

@@ -1,10 +1,7 @@
 import React from "react"
-import dynamic from "next/dynamic"
 import { Metadata } from "next"
 
-const ContributePage = dynamic(() => import("@/components/ContributePage"), {
-  ssr: false,
-})
+import ContributePage from "@/components/ContributePage"
 
 export const metadata: Metadata = {
   title: "Contribute to Dev Tools Academy",

src/app/page.tsx

@@ -1,13 +1,9 @@
 import React from "react"
-import dynamic from "next/dynamic"
-import FeaturedPosts from "@/components/FeaturedPosts"
-import Hero from "@/components/Hero"
 
-const Testimonial = dynamic(
-  () => import("@/components/Testimonial").then((mod) => mod.Testimonial),
-  { ssr: false }
-)
-const Footer = dynamic(() => import("@/components/Footer"), { ssr: true })
+import Hero from "@/components/Hero"
+import FeaturedPosts from "@/components/FeaturedPosts"
+import Testimonial from "@/components/Testimonial"
+import Footer from "@/components/Footer"
 
 const featuredPosts = [
   {

src/components/Hero.tsx

@@ -2,8 +2,13 @@
 
 import React from "react"
 import Link from "next/link"
+
 import { Button } from "@/components/ui/button"
 
+import StreamLogo from "@/assets/stream.png"
+import CodeRabbitLogo from "@/assets/coderabbit.svg"
+import Image from "next/image"
+
 const productHuntBadgeHtml = `<a href="https://www.producthunt.com/posts/dev-tools-academy?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-dev&#0045;tools&#0045;academy" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=493913&theme=light" alt="Dev&#0032;Tools&#0032;Academy - A&#0032;special&#0032;blog&#0032;made&#0032;for&#0032;Developers&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>`
 
 const Hero: React.FC = () => {
@@ -25,12 +30,12 @@ const Hero: React.FC = () => {
         ))}
       </div>
       <div className="relative z-10 mx-auto flex max-w-5xl flex-col items-center justify-center px-4 text-center text-white">
-        <div className="mb-6 flex flex-col items-center justify-center gap-2 md:flex-row">
+        <div className="mb-5 flex items-center justify-center gap-2 md:gap-0">
           <a
             href="https://news.ycombinator.com/item?id=41223327#41246861"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex h-[40px] items-center gap-1.5 rounded-lg bg-[#ff7600] px-3 text-sm font-bold text-white shadow-md transition-colors duration-300 hover:bg-[#ff9933] hover:shadow-lg md:h-12"
+            className="flex h-[40px] items-center gap-1.5 rounded-lg bg-[#ff7600] px-3 text-xs font-bold text-white transition-colors duration-300"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -43,26 +48,45 @@ const Hero: React.FC = () => {
             <span>Featured on Hacker News</span>
           </a>
           <div
-            className="scale-75 md:scale-90"
+            className="sm:scale-75"
             dangerouslySetInnerHTML={{ __html: productHuntBadgeHtml }}
           />
         </div>
-        <h1
-          className="mb-8 bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-5xl font-extrabold leading-tight text-transparent md:text-8xl"
-          style={{ textShadow: "0 0 20px rgba(168, 85, 247, 0.5)" }}
-        >
+        <h1 className="mb-3 bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-5xl font-extrabold tracking-tight text-transparent md:mb-8 md:text-8xl md:leading-[1.1]">
           A special blog made for Developers.
         </h1>
-        <p className="mb-12 max-w-3xl text-xl text-neutral-300 md:text-3xl">
-          Honest reviews to help you choose the right developer tool for your
+        <p className="mb-8 max-w-3xl text-base text-neutral-300 md:mb-12 md:text-xl">
+          Honest reviews to help you choose the right developer tools for your
           SaaS.
         </p>
         <Link href="/blog" passHref>
-          <Button className="rounded-full bg-gradient-to-r from-purple-500 to-pink-500 px-10 py-6 text-xl font-bold text-white transition-all duration-300 hover:scale-105 hover:from-purple-600 hover:to-pink-600 hover:shadow-lg">
+          <Button className="rounded-full bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 text-sm font-bold text-neutral-100 transition-all duration-300 hover:scale-105 hover:from-purple-600 hover:to-pink-600 hover:shadow-lg md:px-10 md:py-6 md:text-xl">
             Start Reading
           </Button>
         </Link>
       </div>
+
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2">
+        <p className="mb-4 text-center text-sm font-medium text-neutral-100 md:mb-6 md:text-base">
+          Current Sponsors:
+        </p>
+        <div className="flex items-center justify-center gap-4">
+          <a href={"https://www.coderabbit.ai?rel=devtoolsacademy.com"}>
+            <Image
+              src={CodeRabbitLogo}
+              alt="CodeRabbit"
+              className="h-5 md:h-7"
+            />
+          </a>
+          <a href={"https://getstream.io?rel=devtoolsacademy.com"}>
+            <Image
+              src={StreamLogo}
+              alt="Stream"
+              className="h-6 w-auto md:h-8"
+            />
+          </a>
+        </div>
+      </div>
     </section>
   )
 }