nodejs bump + next + antd bump

rostaklein · Dec 27, 2023 · 0d68113 · 0d68113
1 parent b47d5bf
commit 0d68113
Show file tree

Hide file tree

Showing 8 changed files with 2,900 additions and 11,569 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16
+20
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ Modern order management system built with the latest tech stack.
 
 ## Requirements
 
-- installed [Node.js v16](https://nodejs.org/en/download/) (includes NPM)
+- installed [Node.js v20](https://nodejs.org/en/download/) (includes NPM)
 - basic knowledge of [Git](https://git-scm.com/downloads)
 - [MongoDB](https://www.mongodb.com/atlas) url (recommended hosting on MongoDB Atlas - free tier is enough)
 

diff --git a/next.config.js b/next.config.js
@@ -2,4 +2,13 @@ const { i18n } = require("./next-i18next.config");
 
 module.exports = {
   i18n,
+  transpilePackages: [
+    "rc-util",
+    "@ant-design",
+    "antd",
+    "rc-pagination",
+    "rc-picker",
+    "rc-tree",
+    "rc-table",
+  ],
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "mayoor",
   "description": "",
   "engines": {
-    "node": "^16.0.0"
+    "node": "20.x"
   },
   "scripts": {
     "dev": "next dev",
@@ -45,9 +45,11 @@
     "tsconfig-paths": "^4.1.0"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.18.2",
+    "@ant-design/icons": "^5.2.6",
     "@apollo/client": "^3.6.9",
     "@prisma/client": "^3.15.2",
-    "antd": "^4.22.7",
+    "antd": "^5.12.5",
     "apollo-server-micro": "^3.10.1",
     "bcrypt": "^5.0.1",
     "cookies-next": "^2.1.1",
@@ -59,7 +61,7 @@
     "i18next-localstorage-backend": "^3.1.3",
     "jsonwebtoken": "^9.0.2",
     "micro": "^9.4.1",
-    "next": "^12.2.5",
+    "next": "^14.0.4",
     "next-i18next": "^12.0.0",
     "nexus": "^1.3.0",
     "nexus-prisma": "^0.35.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -4,7 +4,7 @@ import { useTranslation, appWithTranslation } from "next-i18next";
 import { Alert, message } from "antd";
 import { AppProps } from "next/app";
 
-import "antd/dist/antd.css";
+import "antd/dist/reset.css";
 import "@client/index.css";
 
 import nextI18nConfig from "../next-i18next.config";

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,25 +1,33 @@
 import Document, { Head, Html, Main, NextScript } from "next/document";
 import { ServerStyleSheet } from "styled-components";
+import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
+    const cache = createCache();
     const sheet = new ServerStyleSheet();
     const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
-            sheet.collectStyles(<App {...props} />),
+            sheet.collectStyles(
+              <StyleProvider cache={cache}>
+                <App {...props} />
+              </StyleProvider>
+            ),
         });
 
       // @ts-ignore
       const initialProps = await Document.getInitialProps(ctx);
+      const style = extractStyle(cache, true);
       return {
         ...initialProps,
         styles: (
           <>
             {initialProps.styles}
+            <style dangerouslySetInnerHTML={{ __html: style }} />
             {sheet.getStyleElement()}
           </>
         ),

diff --git a/src/client/components/MainMenu/LinkItem.tsx b/src/client/components/MainMenu/LinkItem.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 
 import { Colors } from "../../themeVariables";
 
-const MenuLinkItem = styled.a`
+const MenuLinkItem = styled(Link)`
   width: 100%;
   display: flex;
   align-items: center;
@@ -16,6 +16,7 @@ const MenuLinkItem = styled.a`
   border-right: solid transparent 5px;
   transition: all 0.2s;
   color: ${Colors.DARK_GRAY3};
+  font-size: 14px;
   &.active {
     background: ${Colors.LIGHT_GRAY4};
     border-color: ${Colors.BLUE4};
@@ -38,11 +39,9 @@ interface Props {
 
 export const LinkItem: React.FC<Props> = ({ icon, name, to }) => {
   return (
-    <Link href={to} passHref>
-      <MenuLinkItem href={to} data-test-id={`menu-link-item-${to}`}>
-        {icon}
-        {name}
-      </MenuLinkItem>
-    </Link>
+    <MenuLinkItem href={to} data-test-id={`menu-link-item-${to}`}>
+      {icon}
+      {name}
+    </MenuLinkItem>
   );
 };