chore: upgrade to react 19 #38
Conversation
🦋 Changeset detectedLatest commit: 3f50d1a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📦 Next.js Bundle Analysis for blogThis analysis was generated by the Next.js Bundle Analysis action. 🤖 Four Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If Any third party scripts you have added directly to your app using the The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored. |
📦 Next.js Bundle Analysis for blogThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
82.96 KB (🟡 +3.94 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Four Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/learn |
22.9 KB |
105.86 KB | 30.25% (🟢 -0.13%) |
/learn/[id] |
12.22 KB |
95.18 KB | 27.19% (🟢 -0.11%) |
/posts |
11.92 KB |
94.88 KB | 27.11% (🟢 -0.11%) |
/posts/[id] |
12.46 KB |
95.42 KB | 27.26% (🟢 -0.11%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
📦 Next.js Bundle Analysis for blogThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
96.91 KB (🟡 +17.89 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/_error |
190 B |
97.1 KB | 27.74% (+/- <0.01%) |
/learn |
22.13 KB |
119.04 KB | 34.01% (🟢 -0.34%) |
/learn/[id] |
11.88 KB |
108.79 KB | 31.08% (🟢 -0.21%) |
/posts |
11.6 KB |
108.51 KB | 31.00% (🟢 -0.20%) |
/posts/[id] |
12.12 KB |
109.03 KB | 31.15% (🟢 -0.21%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
📝 WalkthroughWalkthroughThis pull request encompasses a comprehensive update to a personal blog project, focusing on modernizing the codebase and improving development tooling. The changes span multiple files and involve several key aspects:
The changes reflect a move towards more modern JavaScript/TypeScript practices, improved type safety, and enhanced development tooling without significantly altering the core functionality of the blog project. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (3)
package.json (1)
Line range hint
1-56: Reconsider the upgrade strategyThe PR's objective to upgrade to React 19 is premature as it hasn't been released yet. Instead, consider:
- First upgrading to the latest stable React 18.2.0
- Ensuring all dependencies are compatible
- Adding a migration plan for React 19 when it's officially released
Would you like help creating a proper upgrade strategy document?
src/PostContent/PostContent.tsx (1)
Line range hint
31-36: Consider extracting conditional rendering logic for better readabilityThe component implementation looks good and appears compatible with React 19, but the conditional rendering of cover image could be simplified.
Consider extracting the cover image rendering into a separate component:
const CoverImage = ({ cover, alt }: { cover?: string; alt: string }) => { if (!cover) return null; return <img src={cover} alt={alt} style={{ marginTop: "1rem" }} />; };Then use it like:
-{frontMatter.cover ? ( - <img src={frontMatter.cover} alt="Cover image" style={{ marginTop: "1rem" }} /> -) : null} +<CoverImage cover={frontMatter.cover} alt="Cover image" />Also applies to: 42-44
🧰 Tools
🪛 Biome (1.9.4)
[error] 6-6: Do not shadow the global "Date" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
src/Home/components/RecentPosts.tsx (1)
16-17: Consider memoizing the sliced array for performanceThe
slice(0, 3)operation creates a new array on every render. Consider memoizing this operation usinguseMemoif the parent component re-renders frequently.+ import { useMemo } from 'react'; export function RecentPosts({ allPostsData }: PostsProps) { + const recentPosts = useMemo(() => allPostsData.slice(0, 3), [allPostsData]); return ( <section style={{ paddingTop: "3rem" }}> <Typography variant="headline" sx={{ textAlign: "center" }}> Recent Posts </Typography> - {allPostsData.slice(0, 3).map(({ id, frontMatter }) => ( + {recentPosts.map(({ id, frontMatter }) => ( <PostListItem key={id} postData={{ id, frontMatter }} /> ))} </section> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (20)
.eslintrc.cjs(1 hunks)README.md(1 hunks)app/page.tsx(1 hunks)docs/posts/vscode-extensions.md(3 hunks)next-env.d.ts(1 hunks)next.config.mjs(0 hunks)package.json(1 hunks)pages/_document.tsx(1 hunks)pages/learn/[id].tsx(1 hunks)pages/learn/index.tsx(1 hunks)pages/posts/[id].tsx(1 hunks)pages/posts/index.tsx(1 hunks)src/Home/Home.tsx(1 hunks)src/Home/components/RecentPosts.tsx(1 hunks)src/Home/meta.ts(1 hunks)src/Learn/Learn.tsx(2 hunks)src/Learn/components/TopicCard.tsx(1 hunks)src/LearnContent/LearnContent.tsx(2 hunks)src/PostContent/PostContent.tsx(1 hunks)src/Posts/Posts.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- next.config.mjs
✅ Files skipped from review due to trivial changes (12)
- next-env.d.ts
- src/Home/meta.ts
- .eslintrc.cjs
- pages/_document.tsx
- src/Home/Home.tsx
- src/Learn/components/TopicCard.tsx
- pages/posts/index.tsx
- app/page.tsx
- README.md
- pages/learn/index.tsx
- pages/learn/[id].tsx
- pages/posts/[id].tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/LearnContent/LearnContent.tsx
[error] 7-7: Do not shadow the global "Date" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
src/PostContent/PostContent.tsx
[error] 6-6: Do not shadow the global "Date" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🔇 Additional comments (8)
src/Posts/Posts.tsx (2)
9-10: LGTM: TypeScript type improvements
The addition of the explicit JSX type import and return type annotation improves type safety and code clarity.
Line range hint 1-50: Critical: React 19 upgrade concerns
The changes in this file appear insufficient for a React 19 upgrade. Some concerns:
- React 19 hasn't been officially released yet
- No visible adaptations for React 19's breaking changes
- No utilization of new React 19 features
- No updates to peer dependencies (e.g., react-dom)
Please verify:
- The correct target React version
- Complete list of breaking changes to handle
- Required peer dependency updates
Let's verify the React setup and dependencies:
docs/posts/vscode-extensions.md (2)
3-3:
Future date detected in blog post
The post date is set to "2024-12-22" which is a future date. This might affect sorting and visibility of the post.
Consider updating to the current date:
-date: "2024-12-22"
+date: "2023-12-22"Likely invalid or redundant comment.
12-13: Content updates look good but consider version compatibility
The new extensions and descriptions are well-documented. However, since this PR is about upgrading to React 19, it would be helpful to:
- Verify that these extensions are compatible with the latest VSCode versions
- Add any React 19-specific extensions that might be beneficial
Let's check if there are any React-specific extensions that should be included:
Also applies to: 19-19, 21-21, 23-23, 26-27
package.json (1)
19-45: Standardize version specifiers and verify compatibility
- Some packages use exact versions while others might not (check removed lines)
- Verify compatibility between TypeScript 5.7.2 and other dependencies
Consider:
- Using exact versions consistently across all dependencies
- Adding an
.npmrcfile withsave-exact=true
✅ Verification successful
All dependencies use exact versions, TypeScript setup looks compatible
- All dependencies in package.json are using exact versions (no ^ or ~ prefixes)
- TypeScript 5.7.2 is compatible with the current setup:
- tsconfig.json uses modern settings (ESNext target, bundler moduleResolution)
- @types/react and @types/react-dom versions match React version 19.x
- next 15.1.2 supports TypeScript 5.x
The suggestion to add .npmrc with save-exact=true is still valid for maintaining this consistency in future dependency additions.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for any remaining caret/tilde version specifiers
rg -l "[\^~]" package.json
# Check if typescript version is specified in tsconfig.json
rg -l "typescript" tsconfig.json
Length of output: 61
Script:
#!/bin/bash
# Let's check the actual content of package.json to verify version specifiers
cat package.json
# Also check if tsconfig.json exists and its content
cat tsconfig.json 2>/dev/null || echo "tsconfig.json not found"
Length of output: 2056
src/PostContent/PostContent.tsx (1)
5-8: Verify module resolution configuration for extension-less imports
The removal of .js extensions aligns with modern JavaScript practices, but we should verify the build configuration supports this change.
✅ Verification successful
Extension-less imports are part of Next.js 14+ migration and properly configured
The removal of .js extensions is part of a larger migration pattern and is correctly supported by the project's configuration:
- TypeScript is configured with
moduleResolution: "bundler"which supports extension-less imports - Next.js config has proper module resolution settings with
transpilePackagesconfigured - The change is consistent across the entire codebase as shown by the git diff
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for module resolution configuration in relevant config files
echo "Checking for module resolution configuration..."
fd -e json -e js -e cjs -e mjs "tsconfig|package|next.config" | xargs cat
Length of output: 66467
Script:
#!/bin/bash
# Check for tsconfig.json and module resolution settings
echo "Checking for TypeScript configuration..."
fd -e json "tsconfig" -x cat {}
# Check for Next.js configuration
echo -e "\nChecking Next.js configuration..."
fd -e js -e mjs "next.config" -x cat {}
# Check for extension-less imports in other files
echo -e "\nChecking for extension-less imports pattern..."
rg "from ['\"].*['\"];" --type ts --type tsx -A 1
Length of output: 1769
Script:
#!/bin/bash
# Check for extension-less imports pattern with correct file type
echo "Checking for extension-less imports pattern..."
rg "from ['\"].*['\"];" -t typescript -A 1
# Check if this is part of a larger migration pattern
echo -e "\nChecking for removed .js extensions in recent changes..."
git diff HEAD~1 HEAD -- '*.ts' '*.tsx' | grep -E "^[-+].*from.*\.js['\"]"
Length of output: 2029
🧰 Tools
🪛 Biome (1.9.4)
[error] 6-6: Do not shadow the global "Date" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
src/Home/components/RecentPosts.tsx (1)
16-17: Verify PostListItem component compatibility
The data structure passed to PostListItem has changed to only include id and frontMatter. Let's verify this change is compatible across all usages.
✅ Verification successful
PostListItem component is compatible with the provided data structure
The verification shows that the change is compatible:
- The
PostListItemcomponent's interface expectspostDataprop of typeOmit<Post, "mdxSource">, which includesidandfrontMatter - Both usages in the codebase (
RecentPosts.tsxandPosts.tsx) provide the required data structure - The component implementation correctly destructures and uses
idandfrontMatterfrom thepostDataprop
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for all PostListItem usages and their prop patterns
ast-grep --pattern 'PostListItem $props'
Length of output: 42
Script:
#!/bin/bash
# Search for PostListItem component usages with surrounding context
rg "PostListItem" -A 3 -B 3
Length of output: 2450
Script:
#!/bin/bash
# Find and examine the PostListItem component definition
fd "PostListItem" --type f --exec cat {}
Length of output: 1225
src/Learn/Learn.tsx (1)
47-50: Verify Next.js Link component compatibility with React 19
Since this is a React 19 upgrade, let's verify the Next.js version is compatible and the Link component usage follows current best practices.
✅ Verification successful
Next.js Link component usage is compatible with React 19
The codebase is using Next.js 15.1.2 with React 19.0.0, which are compatible versions. The Link component usage in Learn.tsx follows the current best practices with proper href prop and child component structure. No compatibility issues or required updates were found.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check package.json for Next.js version
rg '"next":' package.json
# Search for any Link component usage patterns that might need updates
ast-grep --pattern 'import Link from "next/link"'
Length of output: 343
Script:
#!/bin/bash
# Check Link component usage patterns in the codebase
ast-grep --pattern 'Link $$$'
# Check package.json for React version
rg '"react":' package.json
# Check if there are any Next.js specific configuration files
fd -e js -e ts -g 'next.config.*'
Length of output: 119
📦 Next.js Bundle Analysis for blogThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
96.91 KB (🟡 +17.89 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/_error |
190 B |
97.1 KB | 27.74% (+/- <0.01%) |
/learn |
22.13 KB |
119.04 KB | 34.01% (🟢 -0.34%) |
/learn/[id] |
11.88 KB |
108.79 KB | 31.08% (🟢 -0.21%) |
/posts |
11.6 KB |
108.51 KB | 31.00% (🟢 -0.20%) |
/posts/[id] |
12.12 KB |
109.03 KB | 31.15% (🟢 -0.21%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
📦 Next.js Bundle Analysis for blogThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
96.91 KB (🟡 +17.89 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/_error |
190 B |
97.1 KB | 27.74% (+/- <0.01%) |
/learn |
22.13 KB |
119.05 KB | 34.01% (🟢 -0.34%) |
/learn/[id] |
11.88 KB |
108.8 KB | 31.08% (🟢 -0.20%) |
/posts |
11.6 KB |
108.51 KB | 31.00% (🟢 -0.20%) |
/posts/[id] |
12.12 KB |
109.03 KB | 31.15% (🟢 -0.21%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
📦 Next.js Bundle Analysis for blogThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
96.91 KB (🟡 +17.89 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/_error |
190 B |
97.1 KB | 27.74% (+/- <0.01%) |
/learn |
22.13 KB |
119.05 KB | 34.01% (🟢 -0.34%) |
/learn/[id] |
11.88 KB |
108.79 KB | 31.08% (🟢 -0.20%) |
/posts |
11.6 KB |
108.51 KB | 31.00% (🟢 -0.20%) |
/posts/[id] |
12.12 KB |
109.03 KB | 31.15% (🟢 -0.21%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
📦 Next.js Bundle Analysis for blogThis analysis was generated by the Next.js Bundle Analysis action. 🤖
|
| Page | Size (compressed) |
|---|---|
global |
96.91 KB (🟡 +17.89 KB) |
Details
The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
Five Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/_error |
190 B |
97.1 KB | 27.74% (+/- <0.01%) |
/learn |
22.13 KB |
119.05 KB | 34.01% (🟢 -0.34%) |
/learn/[id] |
11.88 KB |
108.79 KB | 31.08% (🟢 -0.20%) |
/posts |
11.6 KB |
108.51 KB | 31.00% (🟢 -0.20%) |
/posts/[id] |
12.12 KB |
109.03 KB | 31.15% (🟢 -0.21%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.
Description
Fixes:
Checklist
AI-PR-Reviewlabel.Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Chores
next,react, andreact-domto their latest versions.