update deps

Author: evgenyantipin

.gitignore

@@ -4,4 +4,26 @@
 .vercel
 package-lock.json
 yarn.lock
-yarn-error.log
+yarn-error.log
+
+# misc
+dump.rdb
+.DS_Store
+*.pem
+.vscode
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

next.config.js

@@ -1,17 +1,5 @@
-module.exports = {
+module.exports = require('next-plugin-preact')({
   experimental: {
-    legacyBrowsers: false,
-    browsersListForSwc: true
-  },
-  webpack: (config, { dev, isServer }) => {
-    if (!dev && !isServer) {
-      Object.assign(config.resolve.alias, {
-        react: 'preact/compat',
-        'react-dom/test-utils': 'preact/test-utils',
-        'react-dom': 'preact/compat'
-      });
-    }
-
-    return config;
+    esmExternals: false
   }
-};
+});

package.json

@@ -6,7 +6,8 @@
     "dev": "next",
     "build": "next build",
     "start": "node server.js",
-    "pretty": "prettier --write --tab-width 2 \"**/*.js\""
+    "pretty": "prettier --write --tab-width 2 \"**/*.js\"",
+    "postinstall": "patch-package"
   },
   "lint-staged": {
     "*.js": [
@@ -19,20 +20,24 @@
     }
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.6",
+    "@reduxjs/toolkit": "^2.3.0",
     "@sentry/browser": "5.22.3",
     "@sentry/node": "^5.22.3",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.5",
     "dotenv": "^8.2.0",
     "express": "^4.18.2",
     "isomorphic-unfetch": "^3.0.0",
-    "next": "12.1.5",
+    "next": "14.2.13",
+    "next-plugin-preact": "^3.0.7",
     "next-runtime-dotenv": "^1.3.0",
-    "preact": "^10.11.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "patch-package": "^8.0.0",
+    "preact": "10.24.1",
+    "preact-render-to-string": "^6.5.11",
+    "react": "npm:@preact/compat@^18.3.1",
+    "react-dom": "npm:@preact/compat@^18.3.1",
     "react-redux": "7.2.4",
+    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.2.2",
     "redux": "4.0.5",
     "redux-thunk": "^2.3.0",
     "sass": "^1.26.10"
@@ -53,7 +58,7 @@
     "prettier": "^2.7.1",
     "redux-logger": "^3.0.6",
     "tailwindcss": "^3.1.8",
-    "typescript": "^4.8.4"
+    "typescript": "^5.4.5"
   },
   "engines": {
     "node": ">=16"

pages/index.tsx

@@ -5,27 +5,32 @@ import { getPosts } from 'api/posts';
 import Post from 'components/Post';
 import type { IPost } from 'types/IPost';
 
-interface PageProps {
+type PageProps = {
   posts: IPost[];
-}
+};
 
 export const getServerSideProps: GetServerSideProps = async () => {
   const posts = await getPosts();
+
   return {
     props: {
       posts
     }
   };
 };
 
-const IndexPage: NextPage<PageProps> = ({ posts }) => (
-  <Layout>
-    <ul>
-      {posts.map((p) => (
-        <Post key={p.title} post={p} />
-      ))}
-    </ul>
-  </Layout>
-);
+const IndexPage = (props: PageProps) => {
+  const { posts } = props;
+
+  return (
+    <Layout>
+      <ul>
+        {posts.map((p) => (
+          <Post key={p.title} post={p} />
+        ))}
+      </ul>
+    </Layout>
+  );
+};
 
 export default IndexPage;

patches/preact+10.24.1.patch

@@ -0,0 +1,41 @@
+diff --git a/node_modules/preact/compat/server.js b/node_modules/preact/compat/server.js
+index 3eaf720..3231a4e 100644
+--- a/node_modules/preact/compat/server.js
++++ b/node_modules/preact/compat/server.js
+@@ -19,8 +19,19 @@ try {
+ 	);
+ }
+ 
++var renderToReadableStream;
++try {
++	const mod = require('preact-render-to-string/stream');
++	renderToReadableStream = mod.default || mod.renderToReadableStream || mod;
++} catch (e) {
++	throw Error(
++		'renderToReadableStream() error: update "preact-render-to-string" dependency to at least 6.5.0.'
++	);
++}
++
+ module.exports = {
+ 	renderToString: renderToString,
+ 	renderToStaticMarkup: renderToString,
+-	renderToPipeableStream: renderToPipeableStream
++	renderToPipeableStream: renderToPipeableStream,
++	renderToReadableStream
+ };
+diff --git a/node_modules/preact/package.json b/node_modules/preact/package.json
+index d20d488..98ce468 100644
+--- a/node_modules/preact/package.json
++++ b/node_modules/preact/package.json
+@@ -76,6 +76,11 @@
+       "import": "./compat/server.mjs",
+       "require": "./compat/server.js"
+     },
++    "./compat/server.browser": {
++      "browser": "./compat/server.browser.js",
++      "import": "./compat/server.mjs",
++      "require": "./compat/server.js"
++    },
+     "./compat/jsx-runtime": {
+       "types": "./jsx-runtime/src/index.d.ts",
+       "import": "./compat/jsx-runtime.mjs",

src/components/Nav/index.tsx

@@ -1,32 +1,32 @@
-import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import nextLogo from 'assets/nextjs.svg';
-import s from './styles.module.scss';
+import styles from './styles.module.scss';
 
-const Nav: React.FC = () => (
-  <div className={s.nav}>
+const Nav = () => (
+  <div className={styles.nav}>
     <Link href="/">
-      <a>
-        <Image src={nextLogo} alt="nextjs" width="100" height="40" />
-      </a>
+      <Image src={nextLogo} alt="nextjs" width="100" height="40" />
     </Link>
-    <Link href="/counter">
-      <a className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all">
-        Counter
-      </a>
+    <Link
+      href="/counter"
+      className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all"
+    >
+      Counter
     </Link>
     |
-    <Link href="/about">
-      <a className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all">
-        About
-      </a>
+    <Link
+      href="/about"
+      className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all"
+    >
+      About
     </Link>
     |
-    <Link href="/contact">
-      <a className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all">
-        Contact
-      </a>
+    <Link
+      href="/contact"
+      className="font-normal text-gray-600 dark:text-gray-400 hidden md:inline-block p-1 sm:px-3 sm:py-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-all"
+    >
+      Contact
     </Link>
   </div>
 );

src/components/Post/index.tsx

@@ -3,19 +3,21 @@ import Link from 'next/link';
 import styles from './Post.module.scss';
 import type { IPost } from 'types/IPost';
 
-interface PageProps {
+type PageProps = {
   post: IPost;
-}
+};
 
-const Post: React.FC<PageProps> = ({ post }) => (
-  <div className={styles.post}>
-    <Link href={`/post/[id]?id=${post.title}`} as={`/post/${post.title}`}>
-      <a>
+const Post = (props: PageProps) => {
+  const { post } = props;
+
+  return (
+    <div className={styles.post}>
+      <Link href={`/post/[id]?id=${post.title}`} as={`/post/${post.title}`}>
         <h3>{post.title}</h3>
         <p>{post.body}</p>
-      </a>
-    </Link>
-  </div>
-);
+      </Link>
+    </div>
+  );
+};
 
 export default Post;

src/layouts/Main.tsx

@@ -1,18 +1,15 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import Head from 'next/head';
 import Nav from 'components/Nav';
-import s from './styles.module.scss';
+import styles from './styles.module.scss';
 
-interface IProps {
-  children: React.ReactNode;
+type MainLayoutProps = {
+  children: ReactNode;
   title?: string;
-}
+};
 
-const MainLayout: React.FC<IProps> = ({
-  children,
-  title = 'default title'
-}) => (
-  <div className={s.layout}>
+const MainLayout = ({ children, title = 'default title' }: MainLayoutProps) => (
+  <div className={styles.layout}>
     <Head>
       <title>{title}</title>
     </Head>