chore: Update examples to Next 16.1 #1253
Conversation
I noticed these examples would fail without this. This could probably be installed as a global package, but adding it here ensures the version is pinned to the project, and removes a setup step. The `drizzle-kit` documentation seems to suggest adding it as a dev dependency.
…to gitignore - When running `next dev` or `next build`, Next 16.1 makes a small change and a bunch of formatting changes to `tsconfig.json`. Commit this. - Because of `isolatedDevBuild` in 16.1 (https://nextjs.org/docs/app/api-reference/config/next-config-js/isolatedDevBuild) combined with `typedRoutes` (https://nextjs.org/docs/app/api-reference/config/next-config-js/typedRoutes), the `next-env.d.ts` is updated to different values depending on if you most recently ran `next dev` or `next build`. We recommend putting this file in your gitignore: https://github.com/vercel/next.js/blob/26cde2120ac741bbd3fed5f9d6ffa9569ceda3fd/packages/create-next-app/templates/app/ts/gitignore#L41
|
|
@bgw is attempting to deploy a commit to the Ping Labs Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe PR updates multiple example projects to support Next.js 16 with Turbopack by: upgrading dependencies (Next.js to 16.1.0, React/React-DOM to 19.2.3), enabling Turbopack in Next.js configuration, changing TypeScript JSX runtime from "preserve" to "react-jsx", updating include paths for generated types, and clearing auto-generated next-env.d.ts files. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
examples/with-clerk-pagesdir/package.json (1)
29-29: Updateeslint-config-nextto match Next.js version.The
eslint-config-nextpackage is at version 15.5.8 whilenexthas been upgraded to 16.1.0. This version mismatch may cause linting rule incompatibilities or missing rules specific to Next.js 16.🔎 Suggested fix
- "eslint-config-next": "15.5.8", + "eslint-config-next": "16.1.0",examples/minimal-appdir/package.json (1)
19-19: Update@next/bundle-analyzerto match Next.js version.The
@next/bundle-analyzerpackage is at version 15.1.3 whilenexthas been upgraded to 16.1.0. This version mismatch may cause compatibility issues with the bundle analysis tooling.🔎 Suggested fix
- "@next/bundle-analyzer": "15.1.3", + "@next/bundle-analyzer": "16.1.0",examples/with-clerk-appdir/package.json (1)
29-29: Upgradeeslint-config-nextand migrate ESLint setup for Next.js 16 compatibility.Upgrading
eslint-config-nextto 16.0.10 (latest stable) is necessary, but this requires additional changes beyond a version bump. Starting with Next.js 16, the next lint command has been removed, and the eslint option in the Next.js config file is also removed. @next/eslint-plugin-next now defaults to ESLint Flat Config format, aligning with ESLint v10 which will drop legacy config support. This requires:
- Creating or updating
eslint.config.mjswith the flat config format- Removing the
eslintoption fromnext.config.js- Adding peer dependency eslint >= 9.0.0
- Updating lint scripts in
package.jsonto call ESLint directly
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (37)
.gitignore(1 hunks)examples/minimal-appdir/next-env.d.ts(0 hunks)examples/minimal-appdir/next.config.js(1 hunks)examples/minimal-appdir/package.json(1 hunks)examples/minimal-appdir/tsconfig.json(1 hunks)examples/minimal-pagedir/next-env.d.ts(0 hunks)examples/minimal-pagedir/package.json(1 hunks)examples/minimal-pagedir/tsconfig.json(1 hunks)examples/profile-picture/next-env.d.ts(0 hunks)examples/profile-picture/package.json(1 hunks)examples/profile-picture/tsconfig.json(1 hunks)examples/with-clerk-appdir/next-env.d.ts(0 hunks)examples/with-clerk-appdir/package.json(1 hunks)examples/with-clerk-appdir/tsconfig.json(1 hunks)examples/with-clerk-pagesdir/next-env.d.ts(0 hunks)examples/with-clerk-pagesdir/package.json(1 hunks)examples/with-clerk-pagesdir/tsconfig.json(1 hunks)examples/with-drizzle-appdir/next-env.d.ts(0 hunks)examples/with-drizzle-appdir/package.json(2 hunks)examples/with-drizzle-appdir/tsconfig.json(1 hunks)examples/with-drizzle-pagesdir/next-env.d.ts(0 hunks)examples/with-drizzle-pagesdir/package.json(2 hunks)examples/with-drizzle-pagesdir/tsconfig.json(1 hunks)examples/with-novel/next-env.d.ts(0 hunks)examples/with-novel/package.json(1 hunks)examples/with-novel/tsconfig.json(1 hunks)examples/with-react-image-crop/next-env.d.ts(0 hunks)examples/with-react-image-crop/package.json(1 hunks)examples/with-react-image-crop/tsconfig.json(1 hunks)examples/with-serveractions/next-env.d.ts(0 hunks)examples/with-serveractions/package.json(1 hunks)examples/with-serveractions/tsconfig.json(1 hunks)examples/with-tailwindcss/next-env.d.ts(0 hunks)examples/with-tailwindcss/package.json(1 hunks)examples/with-tailwindcss/tsconfig.json(1 hunks)playground-v6/next-env.d.ts(0 hunks)playground/next-env.d.ts(0 hunks)
💤 Files with no reviewable changes (13)
- examples/minimal-pagedir/next-env.d.ts
- playground/next-env.d.ts
- examples/with-clerk-pagesdir/next-env.d.ts
- examples/with-serveractions/next-env.d.ts
- examples/minimal-appdir/next-env.d.ts
- examples/profile-picture/next-env.d.ts
- playground-v6/next-env.d.ts
- examples/with-drizzle-pagesdir/next-env.d.ts
- examples/with-react-image-crop/next-env.d.ts
- examples/with-drizzle-appdir/next-env.d.ts
- examples/with-novel/next-env.d.ts
- examples/with-tailwindcss/next-env.d.ts
- examples/with-clerk-appdir/next-env.d.ts
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-07T18:28:14.191Z
Learnt from: juliusmarminge
Repo: pingdotgg/uploadthing PR: 1046
File: playground/package.json:26-26
Timestamp: 2024-11-07T18:28:14.191Z
Learning: In `package.json`, the `typescript-eslint` package is correctly used and should not be replaced with `typescript-eslint/eslint-plugin` and `typescript-eslint/parser` in modern configurations.
Applied to files:
examples/with-serveractions/tsconfig.json
🔇 Additional comments (32)
examples/with-clerk-pagesdir/tsconfig.json (2)
15-15: Correct JSX runtime for React 19 compatibility.Changing
jsxfrom"preserve"to"react-jsx"aligns with React 19's modern JSX Transform requirement. This is necessary for Next.js 16 with React 19.2.3.
28-33: Verify the.next/typesinclude path for Next.js 16.1 type generation.The enriched summary indicates that
.next/dev/types/**/*.tsshould be added to the include paths, but the actual code shows.next/types/**/*.ts. These are different paths with distinct implications for type generation during development vs. build stages.Given the PR note about
isolatedDevBuild/typedRoutesbehavior differences in Next.js 16.1, confirm whether.next/types/**/*.tsadequately covers both dev and build type generation, or if both.next/dev/types/**/*.tsand.next/types/**/*.tsare needed.examples/with-react-image-crop/tsconfig.json (3)
3-7: LGTM: Formatting improvements.The multi-line array and object formatting improves readability with no functional changes to lib, plugins, paths, or exclude configurations.
Also applies to: 17-21, 23-26, 35-37
28-34: Remove.next/dev/typesfrom tsconfig.json include arrayThe standard @tsconfig/next configuration only includes
.next/types/**/*.ts, and Next.js generates a .d.ts file in .next/types for environment variables. The addition of.next/dev/typesappears to stem from a bug reported in Next.js 16 canary where the system incorrectly attempted to add.next/dev/types/**/*.tsmultiple times to tsconfig. This path is not documented in the official Next.js 16 configuration guidance and should be removed.Likely an incorrect or invalid review comment.
15-15: JSX runtime change is correct for React 19.The change from
"preserve"to"react-jsx"aligns with React 19.2.3 and the automatic JSX transform. This change is fully compatible with all of the existing JSX code, and all components in this example use standard JSX patterns without any legacy patterns that would cause issues with the automatic runtime..gitignore (1)
22-22: LGTM! Aligns with Next.js best practices.Adding
next-env.d.tsto.gitignoreis correct, as this file is auto-generated by Next.js and should not be committed to version control.examples/profile-picture/package.json (1)
23-23: Dependency updates look consistent.The Next.js and React version updates align with the PR objectives. Ensure these changes are tested with the Turbopack mode mentioned in the linked issue.
Also applies to: 26-27
examples/with-serveractions/package.json (1)
12-14: Dependency updates look consistent.The version updates align with the PR objectives to support Next.js 16.1 and React 19.2.3.
examples/minimal-appdir/package.json (1)
13-15: Dependency updates look consistent.The Next.js and React version updates align with the PR objectives.
examples/minimal-pagedir/package.json (1)
13-15: Dependency updates look consistent.The version updates align with the PR objectives.
examples/with-drizzle-appdir/package.json (2)
19-21: Dependency updates look consistent.The Next.js and React version updates align with the PR objectives.
30-30: Good addition ofdrizzle-kitto devDependencies.Adding
drizzle-kitensures the example can build without requiring a global installation, improving the developer experience.examples/with-novel/package.json (1)
17-17: Dependency updates look consistent.The Next.js and React version updates align with the PR objectives.
Also applies to: 21-22
examples/with-clerk-pagesdir/package.json (1)
17-19: Address Next.js 16 peer dependency gaps before upgrading.This PR upgrades from Next.js 15.5.8 to 16.1.0, a major version with significant breaking changes. While Next.js 16 uses React 19.2 features, there are two critical considerations:
@clerk/nextjs compatibility: @clerk/nextjs peer dependencies currently do not include Next.js 16 support, which may cause npm warnings during installation despite functional compatibility.
eslint-config-next version mismatch: Update eslint-config-next from 15.5.8 to 16.x to align with Next.js 16. Next.js 16 removes the next lint command, requiring direct ESLint setup.
Breaking changes to address: Synchronous access to request APIs is fully removed; these can only be accessed asynchronously. Verify all components handle async params/searchParams appropriately.
⛔ Skipped due to learnings
Learnt from: markflorkowski Repo: pingdotgg/uploadthing PR: 1138 File: playground/package.json:27-27 Timestamp: 2025-01-24T01:57:53.903Z Learning: When reviewing package versions, verify the latest version from the npm registry instead of making assumptions about version availability. Package versions can change frequently, and cached knowledge about versions can become outdated quickly.examples/with-clerk-appdir/tsconfig.json (2)
15-15: JSX runtime change is correct for Next.js 16.The change from
"preserve"to"react-jsx"aligns with Next.js 16's requirement to use the modern JSX transform introduced in React 17+.
28-34: Include paths correctly support both build and dev mode.The addition of
.next/dev/types/**/*.tsalongside the existing.next/types/**/*.tsensures TypeScript picks up generated types in both development (next dev) and production build (next build) modes, which is necessary for Next.js 16'sisolatedDevBuild/typedRoutesbehavior.examples/with-tailwindcss/package.json (1)
13-15: Dependency upgrades look correct.The version bumps to Next.js 16.1.0 and React 19.2.3 align with the PR objectives and should resolve the Turbopack compilation issues reported in #1242.
examples/minimal-pagedir/tsconfig.json (1)
28-33: Missing.next/dev/types/**/*.tsin include - inconsistent with other examples.Other tsconfig files in this PR (e.g.,
with-clerk-appdir,with-novel,profile-picture) add.next/dev/types/**/*.tsto theincludearray. This file only has.next/types/**/*.ts.If this is intentional because Pages Router examples don't need dev types, the inconsistency is fine. Otherwise, consider adding it for consistency:
"include": [ ".next/types/**/*.ts", "next-env.d.ts", "src", - "*.js" + "*.js", + ".next/dev/types/**/*.ts" ],examples/with-clerk-appdir/package.json (1)
17-19: Core dependency upgrades look correct.The version bumps align with the PR objectives for Next.js 16.1 support.
examples/with-novel/tsconfig.json (1)
3-37: LGTM!The tsconfig changes are consistent with the Next.js 16.1 upgrade requirements:
- JSX runtime correctly set to
"react-jsx"- Both
.next/types/**/*.tsand.next/dev/types/**/*.tsincluded for build and dev mode type supportexamples/profile-picture/tsconfig.json (1)
3-37: LGTM!The tsconfig changes correctly implement the Next.js 16.1 requirements with the JSX runtime update and both dev/build type includes.
examples/with-drizzle-appdir/tsconfig.json (2)
3-26: LGTM! JSX runtime update aligns with React 19.The change from
"preserve"to"react-jsx"correctly enables the automatic JSX runtime required for React 19. The formatting improvements tolib,plugins, andpathsenhance readability.
28-34: Correct addition of Next.js 16 dev types path.Adding
".next/dev/types/**/*.ts"ensures TypeScript recognizes types generated duringnext devin Next.js 16, which is necessary for the new type generation behavior.examples/minimal-appdir/next.config.js (1)
8-8: LGTM! Minimal Turbopack enablement.The empty
turbopack: {}configuration enables Turbopack with default settings, which is appropriate for testing Next.js 16's production-ready Turbopack support.examples/with-drizzle-pagesdir/package.json (2)
19-21: LGTM! Dependency upgrades align with Next.js 16 and React 19.The version bumps to Next.js 16.1.0 and React 19.2.3 are consistent with the PR objectives and address the Turbopack compilation issues mentioned in the linked issue.
31-31: Good addition of drizzle-kit to devDependencies.Adding
drizzle-kitensures the example can build standalone without requiring a global installation, which improves developer experience. drizzle-kit@0.31.0 can be used with drizzle-orm@0.31.0 or higher, so drizzle-kit 0.31.8 is fully compatible with the specified drizzle-orm ^0.38.3.examples/with-serveractions/tsconfig.json (2)
3-26: LGTM! Consistent Next.js 16 TypeScript configuration.The JSX runtime change to
"react-jsx"and formatting improvements are consistent with the other examples and correctly support React 19.
28-34: Correct inclusion of dev types path.Adding
".next/dev/types/**/*.ts"properly supports Next.js 16's development type generation.examples/minimal-appdir/tsconfig.json (1)
15-15: LGTM! TypeScript configuration updated for Next.js 16 and React 19.The JSX runtime change and addition of
".next/dev/types/**/*.ts"are both correct and necessary for Next.js 16 compatibility.Also applies to: 28-34
examples/with-tailwindcss/tsconfig.json (1)
15-15: LGTM! Configuration changes align with Next.js 16 requirements.The JSX runtime update and dev types inclusion are consistent with the other examples and properly configured.
Also applies to: 28-34
examples/with-drizzle-pagesdir/tsconfig.json (2)
15-15: LGTM! JSX runtime correctly updated.The change to
"react-jsx"properly enables React 19's automatic JSX runtime.
28-33: Pages Router examples are missing.next/dev/types/**/*.tsfrom include array.All Pages Router examples (minimal-pagedir, with-clerk-pagesdir, with-drizzle-pagesdir) consistently omit
.next/dev/types/**/*.tsfrom their tsconfig.json include array, while all App Router examples (minimal-appdir, with-clerk-appdir, with-drizzle-appdir, with-serveractions) include it. Verify whether this is intentional—if Pages Router does not require dev types—or if the path should be added to maintain consistency across example configurations.
| "@types/react-dom": "19.2.3", | ||
| "drizzle-kit": "0.31.8", | ||
| "eslint": "9.25.1", | ||
| "eslint-config-next": "15.5.8", |
There was a problem hiding this comment.
Update eslint-config-next to match Next.js version.
The eslint-config-next package is at version 15.5.8 while next has been upgraded to 16.1.0. This version mismatch may cause linting rule incompatibilities.
🔎 Suggested fix
- "eslint-config-next": "15.5.8",
+ "eslint-config-next": "16.1.0",Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In examples/with-drizzle-appdir/package.json around line 32, eslint-config-next
is pinned to 15.5.8 while Next.js is 16.1.0; update the eslint-config-next
dependency to a version compatible with Next.js 16 (e.g., "^16.1.0" or the exact
Next.js minor match) in package.json and run npm/yarn install to update lockfile
so lint rules align with the Next.js version.
| "next": "16.1.0", | ||
| "react": "19.2.3", | ||
| "react-dom": "19.2.3", |
There was a problem hiding this comment.
Next.js 16.1.0 is not available as a stable release on npm—only canary versions exist.
The latest stable Next.js version available is 16.0.10, released 6 days ago. Next.js 16.1.0 only exists as canary builds (e.g., v16.1.0-canary.34 as of December 18). While Next.js 16.1 focuses on faster development workflows and improved stability, the stable release is not yet published to npm.
React 19.2.3 is confirmed available on npm, last published 6 days ago. This version is safe—fixes were backported to versions 19.0.3, 19.1.4, and 19.2.3 for critical React Server Component vulnerabilities.
Update the Next.js version to 16.0.10 or wait for 16.1.0 stable release before merging.
🤖 Prompt for AI Agents
examples/with-react-image-crop/package.json lines 13-15: The package.json pins
"next" to 16.1.0 which is not a stable npm release; change the Next.js
dependency to the latest stable release "16.0.10" (or alternatively revert to a
caret/tilde range that resolves to 16.0.10) and keep "react" and "react-dom" at
19.2.3 as-is, or delay merging until an official 16.1.0 stable is published.
markflorkowski
changed the title
1 participant
Next 16.1 (specifically vercel/next.js#86576) should fix #1242. This updates the examples to use 16.1.
I tested this with
pnpm turbo dev --filter @example/with-tailwindcss, which failed to compile on 16.0, but now compiles with 16.1.Sorry about the breakage, and the delays in fixing it!
Summary by CodeRabbit
Release Notes
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.