feat: upgrade nextjs to v15#923
Conversation
nikomakela
force-pushed
the
LIIKUNTA-768-upgrade-nextjs
branch
3 times, most recently
from
873af0b to
a93b43a
Compare
| /** | ||
| * Determine if Turbopack is active (i.e., next dev --turbo) | ||
| */ | ||
| const isTurbopack = process.env.NEXT_RUNTIME === 'edge' && isDevelopment; |
There was a problem hiding this comment.
If you want to detect Turbopack, it looks like process.env.TURBOPACK works for that. I tried adding debug console logs after this:
console.log('DEBUG:', {
NEXT_RUNTIME: process.env.NEXT_RUNTIME,
TURBOPACK: process.env.TURBOPACK,
isDevelopment,
isTurbopack,
});And the output in apps/sports-helsinki/ were with the above:
With --turbo:
$ yarn next dev --turbo
notice- Sourcemaps generation have been disabled through NEXT_DISABLE_SOURCEMAPS
DEBUG: {
NEXT_RUNTIME: 'nodejs',
TURBOPACK: '1',
isDevelopment: true,
isTurbopack: false
}And without --turbo:
$ yarn next dev
notice- Sourcemaps generation have been disabled through NEXT_DISABLE_SOURCEMAPS
DEBUG: {
NEXT_RUNTIME: 'nodejs',
TURBOPACK: undefined,
isDevelopment: true,
isTurbopack: false
}So --turbo → process.env.TURBOPACK = '1', no --turbo → process.env.TURBOPACK === undefined
karisal-anders
left a comment
karisal-anders
left a comment
There was a problem hiding this comment.
Turbopack detection doesn't seem to work, otherwise ok. Didn't test except "yarn g:lint-fix && yarn g:typecheck && yarn g:teset --silent" in root and they worked.
nikomakela
force-pushed
the
LIIKUNTA-768-upgrade-nextjs
branch
from
a93b43a to
3dc928c
Compare
nikomakela
force-pushed
the
HCRC-178-hds-v4
branch
from
02d56e4 to
fa268fd
Compare
nikomakela
force-pushed
the
LIIKUNTA-768-upgrade-nextjs
branch
from
3dc928c to
29a6ae0
Compare
LIIKUNTA-768. Upgrade using NextJS v15 with React 18 (by using codemod tools). It should be noted that this is not a well supported or adviced combination by NextJS. There is no clear statement for supporting it -- only opposite. See more: 1. A blog post that suggests that there should be no issues: https://nextjs.org/blog/next-15#pages-router-on-react-18. 2. An official documentation and migration guide, that clearly states that React v19 should be used: https://nextjs.org/docs/15/app/guides/upgrading/version-15#react-19. 3. 3rd party blog that says it's okay to use React v18 with Pages router: https://www.wisp.blog/blog/can-nextjs-15-app-router-be-used-with-react-18. 4. Yet another page in docs that states that it's okay to use React v18, even with NextJS v16: https://nextjs.org/docs/messages/react-version. NOTE: The codemod fails when it was ran. No matter what is chosen for React v18, it is still upgraded. Similar experiments here: https://www.reddit.com/r/nextjs/comments/1gpb104/comment/lxw60lj/. ---- Step 1: Upgrade the NextJS framework by using a codemod tool `npx @next/codemod@canary upgrade 15.5.5`. Requested codemod wizard to use Turbopack configuration and to keep React v18. Also requested the suggested ESLint upgrade. Ran all the suggested codemods. Ran the same codemod tool in project root, in app roots and in the packages/components. NOTE: There seems to be a bug in the codemod wizard, since when it asks about upgrading the React, it updates the package version anyway, no matter what is chosen. So, those changes needed to be manually reverted. ---- Step 2: Remove changes added by codemod since they are not working Start supporting Turbopack in configuration level. There seems to be still some issues e.g. in stylesheet imports that makes the turbopack not usable. Also, we should separate the server side functiosn from clietn side functiosn much more stricter, which would be a huge job at this point. However, since it's preferred, the configuration is now added for future testing, but it's just not set as default.
nikomakela
force-pushed
the
LIIKUNTA-768-upgrade-nextjs
branch
from
29a6ae0 to
09d1b39
Compare
|
|
|
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-hobbies-pr923.dev.hel.ninja 🚀🚀🚀 |
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-sports-pr923.dev.hel.ninja 🚀🚀🚀 |
|
FEDERATION-ROUTER branch is deployed to platta: https://events-graphql-federation-events-pr923.dev.hel.ninja 🚀🚀🚀 |
|
|
TAPAHTUMAT-UI branch is deployed to platta: https://tapahtumat-pr923.dev.hel.ninja 🚀🚀🚀 |
|
EVENTS-GRAPHQL-PROXY branch is deployed to platta: https://events-graphql-proxy-pr923.dev.hel.ninja 🚀🚀🚀 |
|
HARRASTUKSET-UI branch is deployed to platta: https://harrastukset-pr923.dev.hel.ninja 🚀🚀🚀 |
|
LIIKUNTA-UI branch is deployed to platta: https://liikunta-pr923.dev.hel.ninja 🚀🚀🚀 |
TestCafe result is failed for https://tapahtumat-pr923.dev.hel.ninja 😿💢💥💥 |
TestCafe result is failed for https://harrastukset-pr923.dev.hel.ninja 😿💢💥💥 |
TestCafe result is failed for https://liikunta-pr923.dev.hel.ninja 😿💢💥💥 |
3 participants
LIIKUNTA-768.
Upgrade using NextJS v15 with React 18 (by using codemod tools).
It should be noted that this is not a well supported or adviced combination by NextJS. There is no clear statement for supporting it -- only opposite.
See more:
https://nextjs.org/docs/15/app/guides/upgrading/version-15#react-19.
https://www.wisp.blog/blog/can-nextjs-15-app-router-be-used-with-react-18.
NOTE: The codemod fails when it was ran. No matter what is chosen for React v18, it is still upgraded. Similar experiments here: https://www.reddit.com/r/nextjs/comments/1gpb104/comment/lxw60lj/.
Step 1:
Upgrade the NextJS framework by using a codemod tool
npx @next/codemod@canary upgrade 15.5.5.Requested codemod wizard to use Turbopack configuration and to keep React v18. Also requested the suggested ESLint upgrade. Ran all the suggested codemods.
Ran the same codemod tool in project root, in app roots and in the packages/components.
NOTE: There seems to be a bug in the codemod wizard, since when it asks about upgrading the React, it updates the package version anyway, no matter what is chosen. So, those changes needed to be manually reverted.
Step 2:
Remove changes added by codemod since they are not working
Start supporting Turbopack in configuration level. There seems to be still some issues e.g. in stylesheet imports that makes the turbopack not usable. Also, we should separate the server side functiosn from clietn side functiosn much more stricter, which would be a huge job at this point. However, since it's preferred, the configuration is now added for future testing, but it's just not set as default.