feat: upgrade to NextJS 13.5

[bodom0015]

Problem

We would like to upgrade NextJS from v12 to at least v13.5 (but not to v14 just yet)

Fixes #45

Approach

• feat: upgrade NextJS to 13.5.6
  • Migration notes can be found here

NOTE: We don't appear to use <Image>, <Link>, or <Script> anywhere, so much of the migration notes did not seem to apply to our code 🤷‍♀️

How to Test

1. Checkout and run this branch locally
2. Run yarn install to update your installed dependencies
3. Run yarn build to produce a production build
4. Run yarn start to serve the new build on your dev server
5. Navigate to http://localhost:3000 to view the OEPS app
6. Test out the app to make sure there are no residual problems

[netlify]

✅ Deploy Preview for oeps ready!

Name	Link
🔨 Latest commit	ec9b702
🔍 Latest deploy log	https://app.netlify.com/sites/oeps/deploys/66df24c874a00d0007a6b41b
😎 Deploy Preview	https://deploy-preview-46--oeps.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mradamcox]

This is great, so happy it went smoothly. There are a few small warnings in the Netlify build, could you see about fixing these before the final merge? If one of them becomes a big hassle, just skip it. Not a huge deal:

The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
 Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .
  ⨯ ESLint: Error while loading rule 'react/display-name': `[[GeneratorState]]` is not present on `O` Occurred while linting /opt/build/repo/explorer/pages/_app.js
   Creating an optimized production build ...
  npx browserslist@latest --update-db

[bodom0015]

@mradamcox fixing the ESLint warnings for NextJS/React uncovered a bunch of additional warnings that I will need more time to address.

Not sure if these are priority for this PR, or if they can wait for a future PR, but most of them seem like they would be quick to address:

% yarn build     
yarn run v1.22.19
$ next build

./pages/about.js
43:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
48:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
55:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
82:13  Warning: Do not use an `<a>` element to navigate to `/download/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
83:45  Warning: Do not use an `<a>` element to navigate to `/docs/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
84:107  Warning: Do not use an `<a>` element to navigate to `/methods/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
113:19  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
113:19  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./pages/api/datasets.js
8:1  Warning: Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export

./pages/api/hello.js
3:1  Warning: Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export

./pages/api-docs.js
20:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
25:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
32:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
195:19  Warning: Do not use an `<a>` element to navigate to `/download/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages

./pages/codeResources.js
20:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
25:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
32:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font

./pages/docs/[md].js
41:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
46:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
51:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
63:11  Warning: Do not use an `<a>` element to navigate to `/docs/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages

./pages/docs/index.js
120:5  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
125:5  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
130:7  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font

./pages/download.js
80:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
85:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
90:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
197:13  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
197:13  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./pages/index.js
27:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
32:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
39:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
49:13  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text
49:13  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
66:13  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
99:13  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
105:13  Warning: Do not use an `<a>` element to navigate to `/map/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
110:13  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
122:13  Warning: Do not use an `<a>` element to navigate to `/insights/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
143:109  Warning: Do not use an `<a>` element to navigate to `/about/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
144:19  Warning: Do not use an `<a>` element to navigate to `/methods/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
144:64  Warning: Do not use an `<a>` element to navigate to `/standards/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages

./pages/insights.js
20:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
25:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
32:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font

./pages/map.js
67:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
72:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
83:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font

./pages/methods.js
20:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
25:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
32:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
79:139  Warning: Do not use an `<a>` element to navigate to `/docs/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
123:24  Warning: Do not use an `<a>` element to navigate to `/standards/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages
137:29  Warning: Do not use an `<a>` element to navigate to `/docs/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages

./pages/standards.js
20:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
25:9  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font
32:11  Warning: Custom fonts not added in `pages/_document.js` will only load for a single page. This is discouraged. See: https://nextjs.org/docs/messages/no-page-custom-font  @next/next/no-page-custom-font

./components/layout/Footer.js
12:11  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./components/layout/Loader.js
10:19  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./components/layout/MainNav.js
9:9  Warning: Do not use an `<a>` element to navigate to `/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages

./components/map/MainMap.js
62:6  Warning: React Hook useEffect has a missing dependency: 'setViewport'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
121:6  Warning: React Hook useCallback has a missing dependency: 'mapStyle.underLayerId'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

./components/map/VariablePanel.js
90:15  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./components/markdown/RemoteMarkdownModal.js
20:7  Warning: React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
 ✓ Creating an optimized production build    
 ✓ Compiled successfully
 ✓ Collecting page data    
 ✓ Generating static pages (26/26) 
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (pages)                              Size     First Load JS
┌ ○ /                                      2.59 kB          91 kB
├   └ css/da0ec3d00f2bc834.css             1.06 kB
├   /_app                                  0 B            80.2 kB
├ ○ /404                                   182 B          80.4 kB
├ ○ /about                                 3.49 kB        91.9 kB
├ ○ /api-docs                              3.72 kB        92.1 kB
├ λ /api/data/[...param]                   0 B            80.2 kB
├ λ /api/datasets                          0 B            80.2 kB
├ λ /api/docs/[dataset]                    0 B            80.2 kB
├ λ /api/hello                             0 B            80.2 kB
├ ○ /codeResources                         3.56 kB          92 kB
├ ○ /docs                                  2.95 kB        96.1 kB
├ ○ /docs/[md]                             1.82 kB         134 kB
├   └ css/fd5e32a6ebbd7a87.css             956 B
├ ○ /download                              40.5 kB         129 kB
├ ○ /insights                              4.54 kB          93 kB
├ ○ /map (1879 ms)                         630 kB          766 kB
├   └ css/a4a511ea87a950f2.css             7.19 kB
├ ○ /methods                               3.23 kB        91.7 kB
└ ○ /standards                             3.22 kB        91.7 kB
+ First Load JS shared by all              82.2 kB
  ├ chunks/framework-fae63b21a27d6472.js   45.3 kB
  ├ chunks/main-49b0a41ec78c7394.js        33.5 kB
  ├ chunks/pages/_app-219d82da3d152fba.js  323 B
  ├ chunks/webpack-21c828b96ad33382.js     1.03 kB
  └ css/21a6e3971a898428.css               2.03 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

✨  Done in 38.27s.

[mradamcox]

Ah, ok, yeah that makes sense. I'd say you should actually go for it. Can't hurt to fix these things up, and the SDOH & Place app is also NextJS so it's good to get a familiar with some of these patterns. Thank you!

[bodom0015]

@mradamcox I have updated this PR to fix all of the build warnings above 👍

Summary of changes:

• Added all custom fonts to a new custom page pages/_document.js - these should be automatically mixed in with all existing page headers
• Some <img /> tags missing alt attribute - added empty alt={''} attribute wherever it was missing
• Some missing dependencies when use useEffect / useCallback React hooks - added these to the dependency list
• Arrow functions must be assigned before export - assigned these to a variable before exporting
• Migrate all <img /> tags to instead use <Image /> from NextJS - drop-in replacement, no other change needed
• Migrate relative <a> tags to instead use <Link /> from NextJS - drop-in replacement, but only needed for internal links

Most of these were simple changes, except for the new _document.js page - I tested a bit and it looks like our custom fonts are working as intended. But please let me know if you notice anything strange or missing 🙏

[mradamcox]

@bodom0015, looks like yarn build does complete without error, but, with yarn dev I get this error right away when visiting the home page:

Error: Image with src "images/oeps_diagram_mk2.png" is missing required "width" property.

Are you seeing that too? Seems like the Image component is not exactly a drop-in for img, and requires extra attributes. I'm inclined to just switch these elements back on my end, not a huge deal, but just wondering if you are seeing the same error in your environment.

[mradamcox]

Great, looks good to me, thanks for figuring all of this out. I've made a separate ticket with some pros/cons for updating the <img> tags, so we can address that down the road if we want to.