Upgrade app-content-pages to NextJS 13 (#5184)

* Upgrade app-content-pages to NextJS 13
Bump the content pages app to NextJS 13.

The project app should continue to build and deploy with NextJS 12/React 17.

* Update peer deps

* Don't hoist Storybook and Next.js
Don't hoist Storybook or Next.js packages, so that each app has its own `node_modules` directory (one for Next.js 12 and one for Next.js 13).

* Add legacyBehavior flag to next/link

package.json

@@ -48,7 +48,16 @@
       ".jsx"
     ]
   },
-  "workspaces": [
-    "packages/**"
-  ]
+  "workspaces": {
+    "packages": [
+      "packages/**"
+    ],
+    "nohoist": [
+      "**/@storybook/*",
+      "**/storybook",
+      "**/storybook-i18n",
+      "**/storybook-react-i18next",
+      "**/next"
+    ]
+  }
 }

packages/app-content-pages/package.json

@@ -35,7 +35,7 @@
     "mobx-state-tree": "~5.1.0",
     "morgan": "^1.10.0",
     "newrelic": "^11.0.0",
-    "next": "~12.3.0",
+    "next": "~13.4.1",
     "next-absolute-url": "~1.2.2",
     "next-i18next": "~14.0.0",
     "panoptes-client": "~5.5.1",
@@ -62,7 +62,7 @@
     "chai-dom": "~1.11.0",
     "dirty-chai": "~2.0.1",
     "enzyme": "~3.11.0",
-    "eslint-config-next": "~12.3.0",
+    "eslint-config-next": "~13.4.1",
     "eslint-plugin-jsx-a11y": "~6.7.0",
     "jsdom": "~22.1.0",
     "mocha": "~10.2.0",

packages/app-content-pages/src/screens/Publications/Publications.js

@@ -59,7 +59,7 @@ function Publications({ className = '', data = [], filters = [] }) {
       <Box as='ul'>
         {filters.map(filter => (
           <StyledLi key={filter.name}>
-            <Link href={filter.slug ? `#${filter.slug}` : ''} passHref>
+            <Link legacyBehavior href={filter.slug ? `#${filter.slug}` : ''} passHref>
               <StyledButton
                 active={filter.active}
                 ariaChecked={filter.active}

packages/app-content-pages/src/screens/Teams/Teams.js

@@ -51,7 +51,7 @@ function TeamComponent ({
       <Box as='ul'>
         {filters.map(filter => (
           <StyledLi key={filter.name}>
-            <Link href={filter.slug ? `#${filter.slug}` : ''} passHref>
+            <Link legacyBehavior href={filter.slug ? `#${filter.slug}` : ''} passHref>
               <StyledButton
                 active={filter.active}
                 label={filter.name}

packages/app-content-pages/src/shared/components/AboutHeader/components/NavLink/NavLink.js

@@ -10,7 +10,7 @@ function NavLink ({
   const { asPath } = useRouter()
   const isActive = asPath === href
   return (
-    <Link href={href} passHref>
+    <Link legacyBehavior href={href} passHref>
       <Anchor
         aria-current={isActive ? 'page' : undefined}
         size='medium'

packages/lib-react-components/package.json

@@ -64,8 +64,8 @@
     "grommet": "2.x.x",
     "grommet-icons": "4.x.x",
     "mobx-state-tree": "~5.x.x",
-    "react": ">= 16.14",
-    "react-dom": ">= 16.14",
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "5.x.x"
   },
   "devDependencies": {