Upgrade to Next.js 14 and latest i18next

[goplayoutside3]

Package

app-root
app-content-pages
app-project

Describe your changes

• Upgrade Next and the i18next packages in all apps and libs

How to Review

• I tested this by running each package's Storybook where available, and built + ran each app locally to review the checklist below, plus basic functionality of user groups pages.

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out

Maintenance

• If not from dependabot, the PR creator has described the update (major, minor, or patch version, changelog)

[coveralls]

coverage: 78.908% (-0.08%) from 78.985%
when pulling 61867fa on upgrade-nextjs
into 4d17172 on master.

[eatyourgreens]

Upgrading to superagent v9 should fix that build error.
ladjs/superagent#1786

See also zooniverse/Panoptes-Front-End#7143

[goplayoutside3]

Out of curiosity, why is this a build problem from app-root, but not for the other Next.js apps in the monorepo? All use superagent in PJC and the new lib-panoptes-js client. Because app-root is an App Router?

[eatyourgreens]

I’ve been wondering the same thing. The error’s coming from the publications page, when it requests the project avatars in Node, but that works fine with the pages router.

The error itself is caused by the webpack loader in Next.js. It’s trying to use the CJS loader with an ESM module.

[eatyourgreens]

Oh, and the package with the broken export, hexoid, hasn’t been touched in 4 years.
lukeed/hexoid#7

[goplayoutside3]

The error’s coming from the publications page, when it requests the project avatars in Node, but that works fine with the pages router.

If I completely delete the /publications route from the app router, the error becomes TypeError: a is not a function for every route. So it must just encounter data fetching on the publications page first...

But then if I remove @zooniverse/react-components from optimizePackageImports in next.config.mjs, the build errors become complaints about using React hooks in server components.

The errors are super confusing in general 🤷‍♀️

[goplayoutside3]

This punts the issue of upgrading Superagent, but does fix the build errors 🤔

[eatyourgreens]

I'm really curious as to why the pages router doesn't have a problem with this. We run some stuff on 14.2, and the upgrade from 13.5 was straightforward, but we're using the pages router.

[eatyourgreens]

I think there might be a superagent request to get the auth'ed user on every route, but I'm not sure.

I tried forcing superagent to v10, in package.json, but the app router build still errors. 🫤

[goplayoutside3]

placekitten works inconsistently, so I replaced with our simple-avatar image.

[goplayoutside3]

I'm not totally sure why these tests fail, but this app is going to be removed in a few weeks, so okay to delete for now.

[goplayoutside3]

This is specifically used for app-project, not app-root.

[shaunanoordin]

PR Review

packages: app-root, app-project, app-content-pages

This PR is a major bump to our Next.JS dependency. Code changes are very simple, but since this is a major dependency for FEM, my main concern is making sure that Next.JS 14 doesn't break anything fundamental in our apps.

Testing

Tested on localhost with macOS + Chrome. For each package, I ran yarn build ; yarn start instead of yarn dev.

• app-root:
  • I can load the home page, sign in/sign out, and view the signed-in/signed-out pages respectively.
    • Minor quirk: signed-out page seems a bit slow, but that may be my computer having performance issues running videos.
  • I can view my stats page.
• app-project:
  • I can load a test project, and sign in/sign out
  • I can make and submit classifications on a simple workflow.
• app-content-pages:
  • I can view the Team page, and the Publications page

Super Minor Dev Notes

• Thumbs up on replacing the placekitten placeholder images with our own hosted files. Side note, we probably should replace any unnecessary third-party assets/placeholders like this if they appear anywhere else in our codebase, to improve testing reliability. 🐱

Status

As far as I can tell, everything is looking good with this upgrade. I'm not seeing any obvious build issues, or obvious problems with the code changes. And most importantly, a standard manual test of all three packages indicate that each app functions as intended.

LGTM! 👍