Next.js 16 - #41
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThe pull request modernizes the project by upgrading Next.js, React, and related dependencies to use Bun as the package manager and build tool. It updates styling across About page components (changing text color tokens from text-sky-400 to text-sky-500), removes the legacyBehavior prop from NavBar links, adjusts Particles component visuals, consolidates StarboyLogo CSS from a dedicated file into globals.css, and reformats configuration files. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/NavBar.tsx (1)
23-60: Refactor Link composition to use the asChild pattern.The current pattern wraps
NavigationMenuLinkinLinkwithpassHref, butpassHrefonly works withlegacyBehaviorwhich is removed here. In Next.js 16+, this creates an invalid semantic structure. Follow theListItemcomponent pattern (line 76) by nestingLinkinsideNavigationMenuLink asChildinstead.Apply this refactoring to all four navigation items:
<NavigationMenuItem> - <Link href="/" passHref>- <NavigationMenuLink className={navigationMenuTriggerStyle()}>+ <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>+ <Link href="/"> Home - </NavigationMenuLink>- </Link>+ </Link>+ </NavigationMenuLink> </NavigationMenuItem> <NavigationMenuItem> - <Link- href="https://projects.skywalkerSam.dev"-- passHref- >- <NavigationMenuLink className={navigationMenuTriggerStyle()}>+ <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>+ <Link href="https://projects.skywalkerSam.dev"> Projects - </NavigationMenuLink>- </Link>+ </Link>+ </NavigationMenuLink> </NavigationMenuItem> <NavigationMenuItem> - <Link- href="https://blog.skywalkerSam.dev"-- passHref- >- <NavigationMenuLink className={navigationMenuTriggerStyle()}>+ <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>+ <Link href="https://blog.skywalkerSam.dev"> Blog - </NavigationMenuLink>- </Link>+ </Link>+ </NavigationMenuLink> </NavigationMenuItem> <NavigationMenuItem> - <Link href="/about" passHref>- <NavigationMenuLink className={navigationMenuTriggerStyle()}>+ <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>+ <Link href="/about"> About - </NavigationMenuLink>- </Link>+ </Link>+ </NavigationMenuLink> </NavigationMenuItem>package.json (1)
36-55: Review Next.js 16 breaking changes and plan migration.Next.js 16.1.1 and React 19.2.3 are valid, stable releases. However, Next.js 16 introduces several breaking changes that require code adjustments:
- Async-only Dynamic Request APIs:
cookies(),headers(),draftMode(),params, andsearchParamsmust now be awaited in server components and route handlers.- middleware.ts → proxy.ts convention and related proxy/middleware changes
- Minimum Node.js and TypeScript version bumps
- Image defaults and routing/caching model changes
Review the Next.js v16 upgrade guide and run migration codemods to ensure all breaking changes are addressed before deployment.
🧹 Nitpick comments (1)
src/components/Particles.tsx (1)
56-58: Consider removing the commented-outtransparentprop.The particle visual adjustments look good (smaller size, full opacity). However, the commented-out
transparentprop adds clutter. If it's no longer needed, remove it entirely. If you're keeping it for reference, document why in the TODO comment.🔎 Suggested cleanup
<pointsMaterial color="#ffffff" size={0.021} - // transparent opacity={1} depthWrite={false} />
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
bun.lockis excluded by!**/*.lockpnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/starboy.svgis excluded by!**/*.svg
📒 Files selected for processing (13)
README.mdpackage.jsonsrc/app/about/_components/AboutMe.tsxsrc/app/about/_components/Bio.tsxsrc/app/about/_components/animated-intro.csssrc/app/about/_components/animated-intro.tsxsrc/app/about/_components/intro.tsxsrc/components/NavBar.tsxsrc/components/Particles.tsxsrc/components/StarboyLogo.tsxsrc/styles/globals.csssrc/styles/starboy-logo.csstsconfig.json
💤 Files with no reviewable changes (2)
- src/styles/starboy-logo.css
- src/components/StarboyLogo.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
src/app/about/_components/animated-intro.tsx (1)
src/lib/constants.ts (1)
nameList(3-6)
🔇 Additional comments (11)
src/app/about/_components/intro.tsx (1)
25-25: LGTM! Consistent color token update.The hover color update from
text-sky-400totext-sky-500aligns with the broader design refresh across the About section components.src/app/about/_components/animated-intro.css (1)
7-7: LGTM! Animation refinement as intended.The slide dimension and padding adjustments are consistent with the PR objective to tweak animations on the About page. The responsive breakpoint adjustments maintain visual consistency across screen sizes.
src/app/about/_components/AboutMe.tsx (1)
5-26: LGTM! Systematic color token migration.All text color utilities have been consistently updated from
text-sky-400totext-sky-500, maintaining uniform emphasis styling across the AboutMe component.src/styles/globals.css (2)
5-84: LGTM! Formatting improvements.The re-indentation and reorganization of theme variables and base layer styles improve readability while preserving all functional values. No behavioral changes.
86-99: LGTM! Good consolidation of logo styles.The new
@layer componentsblock consolidates starboy-logo styles into the main stylesheet, reducing file fragmentation. The transition and hover/focus effects are properly scoped and straightforward.src/app/about/_components/animated-intro.tsx (1)
40-40: LGTM! Consistent color token updates.The color utility updates from
text-sky-400totext-sky-500are consistently applied across all emphasized text elements (apostrophe, nameList items, doList items, and punctuation), maintaining visual coherence with the broader About section refresh.Also applies to: 45-45, 57-57, 64-64
src/app/about/_components/Bio.tsx (1)
8-8: LGTM! Final color token update.The ellipsis color update completes the consistent
text-sky-400totext-sky-500migration across all About section components.README.md (1)
5-5: LGTM! Clean branding update.The heading change aligns with the broader branding updates across the PR.
src/components/Particles.tsx (1)
5-5: LGTM! Particle count increase aligns with PR objectives.The 20% increase in particle count (300→360) will enhance visual density. Ensure this performs well across target devices.
tsconfig.json (1)
46-47: LGTM! Dev types inclusion for Next.js 16.Adding
.next/dev/types/**/*.tsto the includes is appropriate for Next.js 16's development mode type generation.package.json (1)
7-13: Test Next.js 16 + Bun before production deployment.The
bun --buncommand syntax is correct, but Next.js 16 support on Bun is currently at platform/runtime beta level (Vercel added Oct 28, 2025). Before using in production, verify compatibility with your app's specific features: middleware behavior, ISR, native modules, and edge-case Node.js APIs. Some features (automatic source maps, bytecode caching, certain node:http/https metrics) have known limitations on Bun. Test thoroughly in a staging environment.
| "moduleResolution": "Bundler", | ||
| "jsx": "preserve", | ||
| "plugins": [{ "name": "next" }], | ||
| "jsx": "react-jsx", |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Next.js 16 tsconfig.json jsx compiler option recommended setting
💡 Result:
Short answer: keep Next.js's default "jsx": "preserve" in tsconfig.json. This lets Next's SWC/Bundler handle the JSX transform. If you explicitly want TypeScript to emit the automatic React runtime you can use "react-jsx" (or "react-jsxdev" for dev), but the recommended default for Next apps is "preserve". [1][2][3]
Example (in tsconfig.json):
{
"compilerOptions": {
"jsx": "preserve",
...
}
}
Sources: Next.js TypeScript docs (tsconfig generation/defaults). [1] TypeScript jsx option (explanation of preserve / react-jsx / react-jsxdev). [2] React + TypeScript guidance recommending "preserve" for most apps. [3]
Revert jsx option to "preserve" for Next.js 16 compatibility.
Next.js's recommended default is "jsx": "preserve", which allows Next.js's SWC compiler to handle JSX transformation. Changing to "react-jsx" means TypeScript will emit the automatic React runtime instead, which is non-standard for Next.js applications and unnecessary when Next.js already handles JSX.
If this change is intentional, document the reason. Otherwise, revert to "preserve" to align with Next.js best practices.
🤖 Prompt for AI Agents
In tsconfig.json around line 24, the "jsx" compiler option is set to "react-jsx"
which causes TypeScript to emit the automatic React runtime instead of letting
Next.js's SWC handle JSX; change the value back to "preserve" (or document a
deliberate reason for keeping "react-jsx") so Next.js retains control of JSX
transformation and aligns with Next.js recommendations.
Uh oh!
There was an error while loading. Please reload this page.
bun/aboutSummary by CodeRabbit
Chores
Style
✏️ Tip: You can customize this high-level summary in your review settings.