chore(deps): bump next from 12.0.4 to 12.1.0 (#914)

* chore(deps): bump next from 12.0.4 to 12.1.0 Bumps [next](https://github.com/vercel/next.js) from 12.0.4 to 12.1.0. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](vercel/next.js@v12.0.4...v12.1.0) --- updated-dependencies: - dependency-name: next dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> * fix: wirings and follow next best practices about scripts and links Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Moshe Feuchtwanger <[email protected]>
Coding-Coach · Apr 8, 2022 · 8a41bba · 8a41bba · vercel · Apr 8, 2022
1 parent 717ecca
commit 8a41bba
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 611 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "inquirer-checkbox-plus-prompt": "^1.0.1",
     "iso-639-1": "^2.1.3",
     "lodash": "^4.17.21",
-    "next": "^12.0.4",
+    "next": "^12.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",
     "react-aria-offcanvas": "^1.3.4",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -22,10 +22,12 @@ import { UserProvider } from '../src/context/userContext/UserContext';
 import { FiltersProvider } from '../src/context/filtersContext/FiltersContext';
 import { ModalHookProvider } from '../src/context/modalContext/ModalContext';
 import { MentorsProvider } from '../src/context/mentorsContext/MentorsContext';
+import Script from 'next/script';
 
 function MyApp({ Component, pageProps }) {
   return (
     <>
+      <Scripts />
       <Head />
       <AuthProvider>
         <ApiProvider>
@@ -44,6 +46,36 @@ function MyApp({ Component, pageProps }) {
   );
 }
 
+const Scripts = () => (
+  <>
+    <Script id="google-analytics">
+      {`
+        (function (i, s, o, g, r, a, m) {
+          i['GoogleAnalyticsObject'] = r;
+          (i[r] =
+            i[r] ||
+            function () {
+              (i[r].q = i[r].q || []).push(arguments);
+            }),
+            (i[r].l = 1 * new Date());
+          (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+          a.async = 1;
+          a.src = g;
+          m.parentNode.insertBefore(a, m);
+        })(
+          window,
+          document,
+          'script',
+          'https://www.google-analytics.com/analytics.js',
+          'ga'
+        );
+        ga('create', 'UA-133820299-2', 'auto');
+        ga('send', 'pageview');
+        `}
+    </Script>
+  </>
+);
+
 // Only uncomment this method if you have blocking data requirements for
 // every single page in your application. This disables the ability to
 // perform automatic static optimization, causing every page in your app to

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,30 +1,40 @@
-import Document from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
+import Document from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
             sheet.collectStyles(<App {...props} />),
-        })
+        });
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps = await Document.getInitialProps(ctx);
       return {
         ...initialProps,
         styles: (
           <>
+            <link
+              href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+              rel="stylesheet"
+              integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+              crossOrigin="anonymous"
+            />
+            <link
+              href="https://fonts.googleapis.com/css2?family=Lato:ital@0;1&display=swap"
+              rel="stylesheet"
+            />
             {initialProps.styles}
             {sheet.getStyleElement()}
           </>
         ),
-      }
+      };
     } finally {
-      sheet.seal()
+      sheet.seal();
     }
   }
-}
+}
diff --git a/pages/head.tsx b/pages/head.tsx
@@ -1,34 +1,6 @@
 import NextHead from 'next/head';
 import { getTitleTags } from '../src/helpers/getTitleTags';
 
-const GoogleAnalyticsPayload = {
-  dangerouslySetInnerHTML: {
-    __html: `
-        (function (i, s, o, g, r, a, m) {
-          i['GoogleAnalyticsObject'] = r;
-          (i[r] =
-            i[r] ||
-            function () {
-              (i[r].q = i[r].q || []).push(arguments);
-            }),
-            (i[r].l = 1 * new Date());
-          (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-          a.async = 1;
-          a.src = g;
-          m.parentNode.insertBefore(a, m);
-        })(
-          window,
-          document,
-          'script',
-          'https://www.google-analytics.com/analytics.js',
-          'ga'
-        );
-        ga('create', 'UA-133820299-2', 'auto');
-        ga('send', 'pageview');
-      `,
-  },
-};
-
 const Head = () => {
   return (
     <NextHead>
@@ -110,21 +82,8 @@ const Head = () => {
       <meta name="theme-color" content="#20293a" />
       <meta name="apple-mobile-web-app-capable" content="yes" />
       <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-
-      <link
-        href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
-        rel="stylesheet"
-        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
-        crossOrigin="anonymous"
-      />
       <link rel="preconnect" href="https://fonts.googleapis.com" />
       <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-      <link
-        href="https://fonts.googleapis.com/css2?family=Lato:ital@0;1&display=swap"
-        rel="stylesheet"
-      />
-
-      <script {...GoogleAnalyticsPayload} />
     </NextHead>
   );
 };

diff --git a/tsconfig.json b/tsconfig.json
@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true
   },
   "include": [