Progress in NextJS 14 migration

StudentiUniMi · Apr 12, 2024 · 57a2315 · 57a2315
1 parent ab88305
commit 57a2315
Show file tree

Hide file tree

Showing 12 changed files with 1,263 additions and 129 deletions.
diff --git a/README.md b/README.md
@@ -18,13 +18,8 @@
    ```sh
    NEXT_PUBLIC_API_URL="http://localhost:8010/proxy"
    ```
-
-2. Install `local-cors-proxy` globally
-   ```sh
-   npm install -g local-cors-proxy
-   ```
 
-3. Run the development server:
+2. Run the development server:
 
    ```sh
    npm run dev

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,8 +11,9 @@
     "@fluentui/react-cards": "^0.205.9",
     "@fluentui/react-hooks": "^8.2.4",
     "bootstrap": "^5.3.2",
+    "local-cors-proxy": "^1.1.0",
     "lottie-react": "^2.4.0",
-    "next": "^14.0.1",
+    "next": "^14.2.0",
     "next-seo": "^5.5.0",
     "react": "^18.2.0",
     "react-accessible-accordion": "^5.0.0",

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -1,9 +1,10 @@
 import { Container } from 'react-bootstrap';
 import { DefaultButton, PrimaryButton, Text, useTheme } from '@fluentui/react';
+import { NextPage } from 'next';
 import LocalizationService from 'services/LocalizationService';
 import Image from 'next/image';
 
-const FourOhFour = () => {
+const FourOhFour: NextPage = () => {
     var theme = useTheme();
     const locale = LocalizationService.strings();
 

diff --git a/pages/500.tsx b/pages/500.tsx
@@ -1,10 +1,11 @@
 import { Container } from 'react-bootstrap';
 import { DefaultButton, PrimaryButton, Text, useTheme } from '@fluentui/react';
 import { NextSeo } from 'next-seo';
+import { NextPage } from 'next';
 import Image from 'next/image';
 import LocalizationService from 'services/LocalizationService';
 
-const FiveHundred = () => {
+const FiveHundred: NextPage = () => {
     var theme = useTheme();
     const locale = LocalizationService.strings();
     var language: string | undefined = LocalizationService.getLanguage();

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -8,23 +8,42 @@ stylesheet.setConfig({
     namespace: 'server'
 });
 
-export default class MyDocument extends Document {
+export default class MyDocument extends Document<{ styleTags: string }> {
     static async getInitialProps(ctx: DocumentContext) {
+        const stylesheet = Stylesheet.getInstance();
+
+        stylesheet.setConfig({
+            injectionMode: InjectionMode.none,
+            namespace: 'server',
+        });
+
         stylesheet.reset();
         resetIds();
 
+        const originalRenderPage = ctx.renderPage;
+
+        ctx.renderPage = () =>
+            originalRenderPage({
+                enhanceApp: (App) => (props) => <App {...props} />,
+            });
+
         const initialProps = await Document.getInitialProps(ctx);
 
         return {
             ...initialProps,
-            styles: [ initialProps.styles, <style key="fluentui-css" dangerouslySetInnerHTML={{ __html: stylesheet.getRules(true) }} /> ]
-        }
-    };
+            styleTags: stylesheet.getRules(true),
+        };
+    }
 
     render() {
         return (
             <Html prefix="og: http://ogp.me/ns#" lang={"it"} translate="no">
-                <Head />
+                <Head>
+                    <style
+                        type="text/css"
+                        dangerouslySetInnerHTML={{ __html: this.props.styleTags }}
+                    />
+                </Head>
                 <body>
                     <Main />
                     <NextScript />

diff --git a/pages/courses/index.tsx b/pages/courses/index.tsx
@@ -9,6 +9,7 @@ import { ISuggestionItem } from '../../components/Courses/Autocomplete_types';
 import { useBoolean } from "@fluentui/react-hooks";
 import { NextSeo } from 'next-seo';
 import { LocalizedField } from "models/Models";
+import { NextPage } from "next";
 import * as Scroll from 'react-scroll';
 import * as animationData from '../../components/Courses/Lottie/128040-searching.json';
 import Lottie from 'lottie-react';
@@ -20,7 +21,7 @@ import DegreesResult from "components/Courses/DegreesResult";
 import GroupTypes from "components/Atoms/GroupTypes";
 import Image from 'next/image';
 
-const Courses = () => {
+const Courses: NextPage = () => {
     var theme = useTheme();
     const locale = LocalizationService.strings();
     var language: string | undefined = LocalizationService.getLanguage();

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -20,33 +20,14 @@ const Homepage = () => {
     const [degrees, setDegrees] = useState<Array<string>>([]);
 
     const getDegrees = useCallback(async () => {
-        setDegrees([
-            'informatica',
-            'fisica',
-            'informatica musicale',
-            'matematica',
-            'informatica per la comunicazione digitale',
-            'bioinformatics',
-            'sicurezza informatica',
-            "infermieristica",
-            "scienze delle professioni sanitarie tecniche diagnostiche",
-            "scienze chimiche",
-            "scienze della produzione e protezione delle piante",
-            "medical biotechnology and molecular medicine",
-            "international politics, law and economics",
-            "finance and economics (mef)",
-            "infermieristica pediatrica",
-            "scienza, tecnica e didattica dello sport",
-            "scienze internazionali e istituzioni europee (sie)",
-            "scienze dei servizi giuridici",
-            "international politics, law and economics"
-        ]);
+        setDegrees(defaultDegrees);
 
         setIsLoadingDegrees(true);
 
         const stringDegreesResult = await getStringDegrees();
 
-        setDegrees(stringDegreesResult.value ?? []);
+        if (stringDegreesResult.value)
+            setDegrees(stringDegreesResult.value);
 
         setIsLoadingDegrees(false);
     }, [setDegrees]);
@@ -108,4 +89,26 @@ const Homepage = () => {
     )
 };
 
-export default Homepage;
+export default Homepage;
+
+const defaultDegrees = [
+    'informatica',
+    'fisica',
+    'informatica musicale',
+    'matematica',
+    'informatica per la comunicazione digitale',
+    'bioinformatics',
+    'sicurezza informatica',
+    "infermieristica",
+    "scienze delle professioni sanitarie tecniche diagnostiche",
+    "scienze chimiche",
+    "scienze della produzione e protezione delle piante",
+    "medical biotechnology and molecular medicine",
+    "international politics, law and economics",
+    "finance and economics (mef)",
+    "infermieristica pediatrica",
+    "scienza, tecnica e didattica dello sport",
+    "scienze internazionali e istituzioni europee (sie)",
+    "scienze dei servizi giuridici",
+    "international politics, law and economics"
+];
diff --git a/pages/rules.tsx b/pages/rules.tsx
@@ -1,13 +1,14 @@
-import React, { CSSProperties, useContext } from "react";
+import { CSSProperties, useContext } from "react";
 import { Text, Link, Icon, useTheme } from '@fluentui/react';
 import { Container } from 'react-bootstrap';
 import { bold, semibold } from '../services/Fonts';
 import { NextSeo } from 'next-seo';
+import { NextPage } from "next";
 import LocalizationService from "../services/LocalizationService";
 import JsxParser from 'react-jsx-parser';
 import GlobalContext from "services/GlobalContext";
 
-const Rules = () => {
+const Rules: NextPage = () => {
     const theme = useTheme();
     const locale = LocalizationService.strings();
     var language: string | undefined = LocalizationService.getLanguage();

diff --git a/pages/services.tsx b/pages/services.tsx
@@ -10,9 +10,10 @@ import { Card, ICardTokens } from '@fluentui/react-cards';
 import { bold, semibold } from '../services/Fonts';
 import { getRedirects, getGuides, getTools } from '../services/Requests';
 import { preventDefault, preventVisibleHref } from 'services/Utils';
+import { NextPage } from 'next';
 import JsxParser from 'react-jsx-parser';
 
-const Services = () => {
+const Services: NextPage = () => {
     var theme = useTheme();
     const locale = LocalizationService.strings();
     var language: string | undefined = LocalizationService.getLanguage();

diff --git a/pages/telegram.tsx b/pages/telegram.tsx
@@ -3,11 +3,12 @@ import { DefaultButton, DirectionalHint, IIconProps, Icon, Separator, Text, Tool
 import { NextSeo } from 'next-seo';
 import { bold, semibold } from 'services/Fonts';
 import { CSSProperties } from 'react';
+import { NextPage } from 'next';
 import LocalizationService from 'services/LocalizationService';
 import router from 'next/router';
 import GroupTypes from 'components/Atoms/GroupTypes';
 
-const Telegram = () => {
+const Telegram: NextPage = () => {
     var theme = useTheme();
     const locale = LocalizationService.strings();
     var language: string | undefined = LocalizationService.getLanguage();

diff --git a/pages/university.tsx b/pages/university.tsx
@@ -8,6 +8,7 @@ import { bold, semibold } from "../services/Fonts";
 import Lottie from 'lottie-react';
 import * as lottieMap from '../components/University/Lottie/47956-area-map.json';
 import * as lottieGraduations from '../components/University/Lottie/45535-girl-meditating.json';
+import { NextPage } from "next";
 import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import LocalizationService from "../services/LocalizationService";
@@ -18,7 +19,7 @@ import ItemsGroup, { Item } from "components/Atoms/ItemsGroup";
 import JsxParser from "react-jsx-parser";
 import UniversityLink from "models/UniversityLink";
 
-const University = () => {
+const University: NextPage = () => {
     var theme = useTheme();
     let didMount = useRef(false);
     const locale = LocalizationService.strings();