You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes NextJS warning about synchronous dynamic APIs
Why is this change needed?
NextJS warns about using params without awaiting it first. This PR fixes the warning by properly awaiting the params object before accessing its properties.
The following warning was shown:
Error: Route "/app/projects/[projectId]/ref/[branchOrCommit]/schema-poc" used `params.projectId`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
What would you like reviewers to focus on?
Confirm this is the correct way to handle params in Next.js async layouts and pages
Testing Verification
Verified that the warning no longer appears
Verified that the layout and routing functionality works as expected
fix following warning:
```
Error: Route "/app/projects/[projectId]/ref/[branchOrCommit]/schema-poc" used `params.projectId`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
at Layout (webpack-internal:/(rsc)/app/(app)/app/(with-project-and-branch)/projects/[projectId]/ref/[branchOrCommit]/app/(app)/app/(with-project-and-branch)/projects/[projectId]/ref/[branchOrCommit]/layout.tsx:14:23)
at Object.apply (webpack-internal:/(rsc)/app/(app)/app/(with-project-and-branch)/projects/[projectId]/ref/[branchOrCommit]/sentry-wrapper-module:44:9)
12 |
13 | export default async function Layout({ params, children }: LayoutProps) {
> 14 | const parsedParams = v.safeParse(paramsSchema, params)
| ^
15 | if (!parsedParams.success) {
16 | // TODO: Reconsider the display when parse fails
17 | return children
```
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.
The params object is likely not a Promise and doesn't need to be awaited. Using await on a non-Promise object is unnecessary and could lead to unexpected behavior. Remove the await keyword unless you're certain that params is a Promise.
Why: The suggestion correctly identifies that the params object in Next.js layouts/pages is not a Promise, making the await keyword added in the PR unnecessary and potentially confusing. Removing it reverts to the correct usage.
Medium
Learned best practice
Improve error message specificity
The error message is too generic and doesn't provide information about which parameter failed validation. Include more specific details about the validation failure to aid in debugging and troubleshooting.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
MH4GF
requested review from
hoshinotsuyoshi,
FunamaYukina,
junkisai and
NoritakaIkeda
and removed request for
a team
Issue
Why is this change needed?
NextJS warns about using
paramswithout awaiting it first. This PR fixes the warning by properly awaiting the params object before accessing its properties.The following warning was shown:
What would you like reviewers to focus on?
Testing Verification
What was done
🤖 Generated by PR Agent at f52bbaf
paramsin layout and page componentsDetailed Changes
layout.tsx
Await params before parsing in project layoutfrontend/apps/app/app/(app)/app/(with-project)/projects/[projectId]/layout.tsx
paramsbefore parsing in layout componentlayout.tsx
Await params before parsing in branch layoutfrontend/apps/app/app/(app)/app/(with-project-and-branch)/projects/[projectId]/ref/[branchOrCommit]/layout.tsx
paramsbefore parsing in layout componentpage.tsx
Await params before parsing in branch pagefrontend/apps/app/app/(app)/app/(with-project-and-branch)/projects/[projectId]/ref/[branchOrCommit]/page.tsx
paramsbefore parsing in page componentAdditional Notes
None