meta: upgrade to next.js 16 #8218
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8218 +/- ##
==========================================
- Coverage 76.23% 74.86% -1.38%
==========================================
Files 118 118
Lines 9903 9903
Branches 337 331 -6
==========================================
- Hits 7550 7414 -136
- Misses 2351 2487 +136
Partials 2 2 ☔ View full report in Codecov by Sentry. |
|
cc @styfle any idea what the prod build failing could be? Pretty much using standard error pages 🤔 |
|
Hi, I haven't fully sorted this out, but I managed to get a "bad" passing build. This was my only attempt and the order of steps was a bit chaotic, so not as linearly as presented here. I used the With that flag I started to see: Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error
@node-core/website:build: Error:
@node-core/website:build: at WithNavBar (turbopack:///[project]/apps/site/components/withNavBar.tsx:43:31)
@node-core/website:build: 41 | const { resolvedTheme, setTheme } = useTheme();
@node-core/website:build: 42 | const { replace } = useRouter();
@node-core/website:build: > 43 | const pathname = usePathname();
@node-core/website:build: | ^All of the errors reported, pointed at the group of
After replacing the helpers with their const websitePages = await getMarkdownFiles(
process.cwd(),
`_pages/${defaultLocale.code}`
);With all of that... 
I think the path generation is somehow causing all of these to error. At this point, I do not think that we need to change Also I am not familiar enough with this repo, so maybe I am building with the wrong Note that https://github.com/amannn/next-intl/tree/main/examples/example-app-router w/ next@beta builds without errors too. Hopefully this gives you some insight. Happy to keep on helping! |
Sounds like a bug on Next.js imo
Could be that |
|
Most likely a Next.js thing yeah ~ I'll try to set some time apart later, to try and build by bisecting canaries. |
|
Hey @ovflowd, thanks for pinging me! So yes, as @icyJoseph mentioned, the examples in the The only change I found in Next.js 16 beta that broke something for me was related to parallel routes (see vercel/next.js#84738), but a potential solution was discussed in that thread. I'll make a note to take a closer look at this PR tomorrow, maybe I can spot something! I'll keep you posted. |
|
Hello again! Could someone verify this, I've been doing some canary bisecting and such, and figured out a couple of things. Building with Building with Edit: I am confident I've found the source of the bug, I just don't understand |
|
@amannn sorry for the tag mate, but the mystery is nearly solved. The If we can sort this one out, then |
|
Got the solution :)
Then |
We are always happy to bug test dependencies 😃, betas are important! Thank you! |
Weird thing is Turbopack builds were working with Next.js 15 🤔 |
|
I also found something interesting when creating a Something is clearly bugged/borked on Next.js |
Right, in one of the canaries going up to v16, a Turbopack optimization was introduced, where some Pages Router assets are no longer generated, if there's no Pages Router code. How "no Pages Router code" is calculated has a bad branch. Hopefully a patch will be out soon 🙏 |
|
I was able to make it work with a very interesting work around. Creating a 404.tsx and 500.tsx, which kinda explains what you just said. |
github-actions
bot
removed
the
github_actions:pull-request
There was a problem hiding this comment.
Pull Request Overview
This PR upgrades the Next.js framework from version 15.5.4 to 16.0.0-beta.0, bringing support for React 19 and introducing the React Compiler. The upgrade includes configuration changes to support new features and fixes for build issues.
Key changes:
- Upgraded Next.js to version 16.0.0-beta.0 with React Compiler enabled
- Added placeholder error pages (404.tsx and 500.tsx) and updated error handling components
- Migrated from Turbo to Turbopack for build optimization and updated TypeScript JSX configuration
Reviewed Changes
Copilot reviewed 13 out of 16 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Updated @types/react version for React 19 compatibility |
| package.json | Updated cross-env and globals dependencies |
| apps/site/tsconfig.json | Changed JSX transform and added dev types path |
| apps/site/pages/500.tsx | Added placeholder 500 error page |
| apps/site/pages/404.tsx | Added placeholder 404 error page |
| apps/site/package.json | Upgraded Next.js and related packages, added React Compiler |
| apps/site/next.config.mjs | Enabled React Compiler and Turbopack configurations |
| apps/site/mdx/plugins.mjs | Optimized Shiki plugin as singleton for performance |
| apps/site/eslint.config.js | Updated ESLint Next.js configuration format |
| apps/site/app/global-error.tsx | Removed global error page component |
| apps/site/app/[locale]/not-found.tsx | Converted to server component and simplified UI |
| apps/site/app/[locale]/error.tsx | Simplified error page UI and removed arrow icon |
| .prettierignore | Added next-env.d.ts to ignore list |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (1)
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
Lighthouse Results
|
|
(Although this is just a workaround and it also creates a /500 and /404 route that are empty pages LOL) |
Signed-off-by: Claudio Wunder <[email protected]>
ovflowd
force-pushed
the
meta/next-16
branch
from
4934393 to
c6665a4
Compare
github-actions
bot
removed
the
github_actions:pull-request
Signed-off-by: Claudio Wunder <[email protected]>
github-actions
bot
removed
the
github_actions:pull-request
Checked. Storybook still working nicely :) |
📦 Build Size ComparisonSummary
Changes➕ Added Assets (39)
➖ Removed Assets (26)
|
Interesting that upgrading to Next.js 16 the bundle size increased? I wonder if that's SSR-based bundle size? |
|
wdyt, cc @nodejs/web-infra? |
|
Hmm, the homepage does appear to have gotten bigger. Loading the homepage on this branch loads 6.37 MB vs. 6.11 MB in production (woof, both of these are giant). |
|
Details: |
|
The main difference I see is that this upgrade adds Babel to the bundle (https://github.com/nodejs/nodejs.org/pull/8218/files#diff-33ce070b849ec2220094ce84790e6978b0870aa1168826458888f280eae6489bR92): Before: After: |
Isn't the babel plugin for react compiler? Should it got to the client-side? |
Yes.
The following client-side components are importing it: |
This PR is a draft PR for upgrading to Next.js 16.