feat: migrate to preact (#2)

next.config.js

@@ -1,12 +1,18 @@
+const withPreact = require("next-plugin-preact");
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
 	enabled: process.env.ANALYZE === "true"
 });
 
-module.exports = withBundleAnalyzer({
-	reactStrictMode: true,
-	swcMinify: true,
-	i18n: { locales: ["en-US"], defaultLocale: "en-US" },
-	images: {
-		domains: ["cdn.discordapp.com", "i.scdn.co", "skillicons.dev"]
-	}
-});
+module.exports = withBundleAnalyzer(
+	withPreact({
+		reactStrictMode: true,
+		swcMinify: true,
+		i18n: { locales: ["en-US"], defaultLocale: "en-US" },
+		images: {
+			domains: ["cdn.discordapp.com", "i.scdn.co", "skillicons.dev"]
+		},
+		experimental: {
+			esmExternals: false
+		}
+	})
+);

package.json

@@ -15,9 +15,13 @@
 		"@next/bundle-analyzer": "^12.2.1",
 		"date-fns": "^2.28.0",
 		"date-fns-tz": "^1.3.5",
-		"next": "^12.2.1",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
+		"next": "^12.2.2",
+		"next-plugin-preact": "^3.0.7",
+		"preact": "^10.9.0",
+		"preact-render-to-string": "^5.2.0",
+		"react": "npm:@preact/compat",
+		"react-dom": "npm:@preact/compat",
+		"react-ssr-prepass": "npm:preact-ssr-prepass",
 		"react-use-lanyard": "^0.1.2",
 		"spotify-web-api-node": "^5.0.2",
 		"swr": "^1.3.0"

src/components/ActiveLink.tsx

@@ -1,6 +1,6 @@
 import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
-import React from "react";
+import { cloneElement } from "preact";
 
 export interface ActiveLinkProps extends LinkProps {
 	children: React.ReactElement;
@@ -19,7 +19,7 @@ export default function ActiveLink({
 
 	return (
 		<Link href={href} {...props}>
-			{React.cloneElement(children, {
+			{cloneElement(children, {
 				className:
 					router.pathname === href
 						? children.props.className

src/components/Clock.tsx

@@ -1,5 +1,5 @@
 import formatInTimeZone from "date-fns-tz/formatInTimeZone";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "preact/hooks";
 
 export function Clock() {
 	const [now, setNow] = useState(0);

src/components/Spotify.tsx

@@ -1,6 +1,6 @@
 import { PauseIcon, PlayIcon } from "@heroicons/react/solid";
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "preact/hooks";
 import useSWR from "swr";
 
 import type {

src/pages/music.tsx

@@ -1,5 +1,5 @@
 import { MusicNoteIcon } from "@heroicons/react/solid";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "preact/hooks";
 
 import GenericMeta from "../components/GenericMeta";
 import { TrackList } from "../components/TrackList";