next@15 WIP

Vizzuality · Nov 29, 2024 · 111c08b · 111c08b
1 parent 81e6cf8
commit 111c08b
Show file tree

Hide file tree

Showing 19 changed files with 1,500 additions and 465 deletions.
diff --git a/client/next-env.d.ts b/client/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.
diff --git a/client/next.config.ts b/client/next.config.ts
@@ -1,22 +1,16 @@
 import { NextConfig } from 'next';
-
-const withPlugins = require('next-compose-plugins');
-const withOptimizedImages = require('next-optimized-images');
+import withPlugins from 'next-compose-plugins';
+import withOptimizedImages from 'next-optimized-images';
 
 const nextConfig: NextConfig = {
-  // ? https://github.com/vercel/next.js/issues/7755#issuecomment-812805708
-  // webpack: (config, { isServer }) => {
-  //   if (!isServer) {
-  //     config.resolve.fallback.fs = false;
-  //   }
-  //   return config;
-  // },
-
-  // ? https://nextjs.org/docs/api-reference/next.config.js/basepath
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
-
   images: {
-    domains: ['staging.fora.dev-vizzuality.com'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'staging.fora.dev-vizzuality.com',
+      },
+    ],
   },
 };
 

diff --git a/client/package.json b/client/package.json
@@ -31,7 +31,6 @@
     "@tanstack/react-query": "4.0.10",
     "@tanstack/react-table": "^8.5.22",
     "@turf/rewind": "6.5.0",
-    "@types/geojson": "^7946.0.10",
     "@visx/group": "^2.10.0",
     "@visx/responsive": "^2.10.0",
     "@visx/shape": "^2.12.2",
@@ -47,7 +46,7 @@
     "jsonwebtoken": "8.5.1",
     "lodash": "4.17.21",
     "next": "15.0.3",
-    "next-auth": "4.3.4",
+    "next-auth": "4.24.10",
     "next-compose-plugins": "2.2.1",
     "next-optimized-images": "2.6.2",
     "next-plausible": "3.10.1",
@@ -66,6 +65,7 @@
     "validate.js": "0.13.1"
   },
   "devDependencies": {
+    "@types/geojson": "7946.0.14",
     "@types/gtag.js": "0.0.5",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
@@ -91,8 +91,5 @@
     "svgo-loader": "2.2.2",
     "typescript": "4.5.2"
   },
-  "resolutions": {
-    "webpack": "^5"
-  },
   "packageManager": "[email protected]+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
 }
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/src/containers/action-map/map/views/regions/component.tsx b/client/src/containers/action-map/map/views/regions/component.tsx
@@ -9,7 +9,7 @@ import { useAppSelector } from 'store/hooks';
 import rewind from '@turf/rewind';
 import CHROMA from 'chroma-js';
 import { geoCentroid } from 'd3-geo';
-import { Feature, MultiPolygon, Polygon } from 'geojson';
+import type { Feature, MultiPolygon, Polygon } from 'geojson';
 import { max, min } from 'lodash';
 
 import { MAP_RAMP } from 'constants/colors';

diff --git a/client/src/containers/cards/card/component.tsx b/client/src/containers/cards/card/component.tsx
@@ -51,7 +51,7 @@ const Cards = ({
   }, [subgeographics]);
 
   return (
-    (<div
+    <div
       className={cx({
         'flex flex-col justify-between p-8': true,
         [THEME[theme]]: true,
@@ -79,7 +79,7 @@ const Cards = ({
           </Link>
         </div>
       </div>
-    </div>)
+    </div>
   );
 };
 

diff --git a/client/src/containers/footer/component.tsx b/client/src/containers/footer/component.tsx
@@ -26,7 +26,6 @@ const Footer = () => {
                 <Image
                   src={`${process.env.NEXT_PUBLIC_BASE_PATH}${LOGO_MONOCHROME_SVG}`}
                   alt="Logo"
-                  layout="fixed"
                   width={122}
                   height={56}
                   priority

diff --git a/client/src/containers/funder/overview/component.tsx b/client/src/containers/funder/overview/component.tsx
@@ -138,8 +138,9 @@ const FunderOverview = () => {
                 <Image
                   src={logo.small || '/images/avatar.jpg'}
                   alt={name}
-                  layout="fill"
                   className="object-contain"
+                  fill
+                  sizes="100vw"
                 />
               </div>
             )}

diff --git a/client/src/containers/header/component.tsx b/client/src/containers/header/component.tsx
@@ -32,7 +32,6 @@ const Header = () => {
             <Image
               src={`${process.env.NEXT_PUBLIC_BASE_PATH}${LOGO_SVG}`}
               alt="Logo"
-              layout="fixed"
               width={pathname === '/' ? 156 : 156 - 156 * 0.2}
               height={pathname === '/' ? 72 : 72 - 72 * 0.2}
               priority

diff --git a/client/src/containers/home/hero/component.tsx b/client/src/containers/home/hero/component.tsx
@@ -30,7 +30,6 @@ const Hero = () => {
               >
                 <Image
                   priority
-                  layout="fixed"
                   src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/hero/hero-2.png`}
                   alt="Hero 2"
                   width={406}
@@ -45,7 +44,6 @@ const Hero = () => {
               >
                 <Image
                   priority
-                  layout="fixed"
                   src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/hero/hero-1.png`}
                   alt="Hero 1"
                   width={389}
@@ -60,7 +58,6 @@ const Hero = () => {
               >
                 <Image
                   priority
-                  layout="fixed"
                   src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/hero/hero-3.png`}
                   alt="Hero 3"
                   width={389}

diff --git a/client/src/containers/home/how/component.tsx b/client/src/containers/home/how/component.tsx
@@ -41,6 +41,10 @@ const How = () => {
                     alt="Dashboard"
                     width={1281}
                     height={1260}
+                    style={{
+                      maxWidth: '100%',
+                      height: 'auto',
+                    }}
                   />
                 </AnimatedScroll>
               </div>
@@ -307,6 +311,10 @@ const How = () => {
                     alt="Dashboard"
                     width={1563}
                     height={1047}
+                    style={{
+                      maxWidth: '100%',
+                      height: 'auto',
+                    }}
                   />
                 </AnimatedScroll>
               </div>

diff --git a/client/src/containers/home/invest/component.tsx b/client/src/containers/home/invest/component.tsx
@@ -116,7 +116,6 @@ const Invest = () => {
             >
               <Image
                 priority
-                layout="fixed"
                 src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/invest/invest-1.jpg`}
                 alt="Invest 1"
                 width={408}

diff --git a/client/src/containers/home/what/component.tsx b/client/src/containers/home/what/component.tsx
@@ -39,7 +39,6 @@ const What = () => {
           </div>
         </div>
       </Wrapper>
-
       <Wrapper>
         <div className="relative z-10 grid grid-cols-3 gap-10">
           {PRINCIPLES.map(({ title, icon, description }, i) => (
@@ -71,7 +70,6 @@ const What = () => {
           ))}
         </div>
       </Wrapper>
-
       <Wrapper>
         <div className="grid grid-cols-12 gap-10">
           <div className="relative col-span-6 col-start-2">
@@ -102,6 +100,10 @@ const What = () => {
                   alt="What 1"
                   width={238}
                   height={356}
+                  style={{
+                    maxWidth: '100%',
+                    height: 'auto',
+                  }}
                 />
               </AnimatedScroll>
               <AnimatedScroll
@@ -115,6 +117,10 @@ const What = () => {
                   alt="What 2"
                   width={238}
                   height={356}
+                  style={{
+                    maxWidth: '100%',
+                    height: 'auto',
+                  }}
                 />
               </AnimatedScroll>
             </div>

diff --git a/client/src/containers/project/overview/component.tsx b/client/src/containers/project/overview/component.tsx
@@ -131,8 +131,9 @@ const ProjectOverview = () => {
                 <Image
                   src={logo.small || '/images/avatar.jpg'}
                   alt={name}
-                  layout="fill"
                   className="object-contain"
+                  fill
+                  sizes="100vw"
                 />
               </div>
             )}

diff --git a/client/src/containers/similars/areas-similars/component.tsx b/client/src/containers/similars/areas-similars/component.tsx
@@ -78,32 +78,33 @@ const AreasSimilars = ({ type }: SimilarsSectionProps) => {
     return shuffled.slice(0, 3);
   }, [id, type, fundersData, projectsData, RANDOM_SORT]);
 
-  return (<>
-    {!!DATA_BY_AREA.length && (
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <div className="font-semibold capitalize text-grey-20">By Area of Focus</div>
-          <div>
-            <Link
-              href={`/${type}?areas[]=${areas.join(',')}`}
-              className="flex items-center space-x-3 font-semibold underline decoration-1">
-
-              <span>{`View all similar ${type}`}</span>
-              <Icon
-                icon={CHEVRON_RIGHT_SVG}
-                className={cx({
-                  'w-2 h-2 text-grey-0': true,
-                })}
-              />
-
-            </Link>
+  return (
+    <>
+      {!!DATA_BY_AREA.length && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="font-semibold capitalize text-grey-20">By Area of Focus</div>
+            <div>
+              <Link
+                href={`/${type}?areas[]=${areas.join(',')}`}
+                className="flex items-center space-x-3 font-semibold underline decoration-1"
+              >
+                <span>{`View all similar ${type}`}</span>
+                <Icon
+                  icon={CHEVRON_RIGHT_SVG}
+                  className={cx({
+                    'w-2 h-2 text-grey-0': true,
+                  })}
+                />
+              </Link>
+            </div>
           </div>
-        </div>
 
-        <Cards pathname={`/${type}`} data={DATA_BY_AREA} />
-      </div>
-    )}
-  </>);
+          <Cards pathname={`/${type}`} data={DATA_BY_AREA} />
+        </div>
+      )}
+    </>
+  );
 };
 
 export default AreasSimilars;
diff --git a/client/src/containers/similars/demographic-similars/component.tsx b/client/src/containers/similars/demographic-similars/component.tsx
@@ -77,32 +77,33 @@ const DemographicSimilars = ({ type }: SimilarsSectionProps) => {
     return shuffled.slice(0, 3);
   }, [id, type, fundersData, projectsData, RANDOM_SORT]);
 
-  return (<>
-    {!!DATA_BY_DEMOGRAPHIC.length && (
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <div className="font-semibold capitalize text-grey-20">By Demographic Scope</div>
-          <div>
-            <Link
-              href={`/${type}?demographics[]=${demographics.join(',')}`}
-              className="flex items-center space-x-3 font-semibold underline decoration-1">
-
-              <span>{`View all similar ${type}`}</span>
-              <Icon
-                icon={CHEVRON_RIGHT_SVG}
-                className={cx({
-                  'w-2 h-2 text-grey-0': true,
-                })}
-              />
-
-            </Link>
+  return (
+    <>
+      {!!DATA_BY_DEMOGRAPHIC.length && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="font-semibold capitalize text-grey-20">By Demographic Scope</div>
+            <div>
+              <Link
+                href={`/${type}?demographics[]=${demographics.join(',')}`}
+                className="flex items-center space-x-3 font-semibold underline decoration-1"
+              >
+                <span>{`View all similar ${type}`}</span>
+                <Icon
+                  icon={CHEVRON_RIGHT_SVG}
+                  className={cx({
+                    'w-2 h-2 text-grey-0': true,
+                  })}
+                />
+              </Link>
+            </div>
           </div>
-        </div>
 
-        <Cards pathname={`/${type}`} data={DATA_BY_DEMOGRAPHIC} />
-      </div>
-    )}
-  </>);
+          <Cards pathname={`/${type}`} data={DATA_BY_DEMOGRAPHIC} />
+        </div>
+      )}
+    </>
+  );
 };
 
 export default DemographicSimilars;