Upgrade to Next.js 14

[tihuan]

NOTES:

1. Next 13 by default uses React Server Component, which breaks MUI. So we need to explicitly add string "use client"; until MUI resolves the issue here
2. Next14 has been released late October, so we're 2 major versions behind now
3. We should migrate to use the new app router instead of page router as well (guide)

TASKS:

• Upgrade Nextjs packages and update breaking changes in Link, Image, Script

• Update Google Font usage for Inter

  • https://nextjs.org/docs/app/building-your-application/optimizing/fonts

• Upgrade MUI and SDS - can be done later, since we already have MUI 15.4.0, which unblocks Next14 upgrade

• Update SEO Metadata to use new function generateMetadata(): postponed due to Plans to support Next.js 13 - /app directory emotion-js/emotion#2928 (comment)

  • https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

• Update a few routes to use app router as example, and incrementally migrate more pages as we go: postponed due to Plans to support Next.js 13 - /app directory emotion-js/emotion#2928 (comment)

• Do MUI integration with https://mui.com/material-ui/guides/nextjs/: postponed due to Plans to support Next.js 13 - /app directory emotion-js/emotion#2928 (comment)

RESOURCES:

1. Improve Next.js support mui/material-ui#34905 (comment)

[tihuan]

Set 5 points, since we need to follow the migration guide, migrate existing routes to the new app router, and make sure marking components with "use client" doesn't somehow break MUI or somehow miss marking "use client" at some places causing page specific runtime error

[tihuan]

Reading migration guide now to make sure the upgrade can be done efficiently. E.g., using code mods where possible

[tihuan]

Created a new ticket to capture the need to incrementally migrate all routes:

https://app.zenhub.com/workspaces/single-cell-5e2a191dad828d52cc78b028/issues/gh/chanzuckerberg/single-cell-data-portal/6496

This ticket will start the migration with some examples

[tihuan]

Looks like other people are struggling with the upgrade as well:

emotion-js/emotion#2928 (comment)

I think I'll just keep the routes in pages for now

[tihuan]

Will have a followup PR to tackle Google Font and Metadata using the new Next.js API