feat(next-connect): modernize for Next.js 16 and React 19#34
Open
riceharvest wants to merge 69 commits intomainfrom
Open
feat(next-connect): modernize for Next.js 16 and React 19#34riceharvest wants to merge 69 commits intomainfrom
riceharvest wants to merge 69 commits intomainfrom
Conversation
- Upgraded multiple packages to modern standards (Next.js, Next-auth, PWA, SEO). - Added new utility packages: critters, next-circuit-breaker, next-csrf, next-images, next-json-ld. - Integrated Changesets for versioning. - Updated CI/CD workflows and linting configurations. - Fixed numerous linting and type-checking issues across the monorepo.
- Remove legacy NextAuth adapters and resolve workspace version conflicts - Clean up test warning noise and fix tsconfig/jest setups for next-auth - Update Workbox/Terser dependencies in next-pwa to align with workspace - Synchronize root lockfile to reflect nested package resolutions
Fixes `JWT_AUTO_GENERATED_SIGNING_KEY` and `JWT_AUTO_GENERATED_ENCRYPTION_KEY` warnings properly by supplying JWKs directly in the test suite rather than mocking the logger.
Review Summary by QodoModernize monorepo for Next.js 16 and React 19 with enhanced Web API support, native OAuth, and comprehensive MDX system
WalkthroughsDescription• **Modernized Next.js 16 and React 19 compatibility** across multiple packages with updated dependencies and APIs • **Migrated test suites** from Jest/Vitest to Node.js native node:test module in several packages (next-iron-session, next-csrf, next-cookies) • **Enhanced session management** with Web API (Request/Response) support alongside Node.js APIs, including new getWebSession() function and refactored callback-based decoration • **Improved CSRF protection** with new App Router support, enhanced token extraction/validation, and updated cookie defaults (httpOnly: false for tokens) • **Added MDX content system** with new modules for node retrieval, configuration loading, file discovery, path generation, and client-side hydration • **Removed external dependencies** - implemented native OAuth client in next-auth replacing the oauth package with async/await patterns • **Enhanced router middleware execution** in next-connect with improved error handling for multiple next() calls and missing middleware • **Added comprehensive test coverage** for new features including App Router CSRF, Web API sessions, MDX functionality, and plugin composition • **Simplified test suites** in several packages by removing extensive coverage and focusing on core functionality • **Updated build configurations** with modernized tsup and vitest settings across multiple packages • **Added type definitions** for PWA plugin, react-virtualized components, and MDX client exports • **Improved robustness** in CSS inlining (critters) with better safety checks and fallback logic • **Created example implementations** for react-query-auth with Mock Service Worker integration and mock database Diagramflowchart LR
A["Next.js 16<br/>React 19"] -->|"Upgrade"| B["Core Packages"]
B -->|"Add Web API"| C["Session Management"]
B -->|"Enhance"| D["CSRF Protection"]
B -->|"Implement"| E["MDX System"]
F["Test Migration"] -->|"Jest/Vitest to"| G["node:test"]
H["Dependencies"] -->|"Remove oauth<br/>package"| I["Native OAuth<br/>Implementation"]
J["Router"] -->|"Improve"| K["Error Handling"]
L["Build Config"] -->|"Modernize"| M["tsup/vitest"]
File Changes1. packages/next-images/test/index.test.ts
|
Code Review by Qodo
1. vitest.config.js not Prettier
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
Comment on lines
+1
to
+10
| import { defineConfig } from "vitest/config" | ||
|
|
||
| export default defineConfig({ | ||
| test: { | ||
| globals: true, | ||
| env: { | ||
| NEXTAUTH_URL: "http://localhost:3000/api/auth", | ||
| }, | ||
| }, | ||
| }) |
There was a problem hiding this comment.
1. vitest.config.js not prettier 📘 Rule violation ✓ Correctness
The new root vitest.config.js uses double quotes and omits semicolons, conflicting with the documented Prettier defaults. This can cause formatting drift and inconsistent CI lint/format output.
Agent Prompt
## Issue description
The newly added `vitest.config.js` does not match the documented Prettier defaults (notably: single quotes + semicolons).
## Issue Context
This is a root config file that will be frequently touched; inconsistent formatting can create ongoing churn.
## Fix Focus Areas
- vitest.config.js[1-10]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
1
to
+3
| // tests/e2e/jsonLdScript.e2e.spec.ts | ||
| import { test, expect } from "@playwright/test"; | ||
| import Ajv from "ajv"; |
There was a problem hiding this comment.
2. jsonldscript test mislocated 📘 Rule violation ✓ Correctness
The updated Next SEO E2E test lives under packages/next-seo/tests/ and uses a nonstandard filename (*.e2e.spec.ts). This breaks the documented test placement and naming conventions, reducing discoverability by tooling and contributors.
Agent Prompt
## Issue description
A modified test is located under `packages/next-seo/tests/` and uses `*.e2e.spec.ts`, which does not match the repo’s required test placement and naming conventions.
## Issue Context
Tooling and contributors rely on consistent locations and naming to discover and run tests.
## Fix Focus Areas
- packages/next-seo/tests/e2e/jsonLdScript.e2e.spec.ts[1-86]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+1
to
+6
| const { | ||
| getImgLoaderOptions, | ||
| getHandledFilesRegex, | ||
| applyImgLoader, | ||
| requireImageminPlugin, | ||
| } = require('../../lib/loaders/img-loader'); |
There was a problem hiding this comment.
3. next-optimized-images tests in tests 📘 Rule violation ✓ Correctness
New tests are added under packages/next-optimized-images/__tests__/ and are written as *.test.js. This violates the documented allowed test locations and the required *.test.ts(x) naming convention.
Agent Prompt
## Issue description
`next-optimized-images` tests were added under `packages/next-optimized-images/__tests__/` and use `.test.js`, which violates the repo’s documented test placement and naming rules.
## Issue Context
Consistent test locations and TS test naming improve discoverability and standardize tooling across the monorepo.
## Fix Focus Areas
- packages/next-optimized-images/__tests__/loaders/img-loader.test.js[1-89]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
11
to
+20
| export default function oAuthClient(provider) { | ||
| if (provider.version?.startsWith("2.")) { | ||
| // Handle OAuth v2.x | ||
| const authorizationUrl = new URL(provider.authorizationUrl) | ||
| const basePath = authorizationUrl.origin | ||
| const authorizePath = authorizationUrl.pathname | ||
| const accessTokenPath = new URL(provider.accessTokenUrl).pathname | ||
| const oauth2Client = new OAuth2( | ||
| provider.clientId, | ||
| provider.clientSecret, | ||
| basePath, | ||
| authorizePath, | ||
| accessTokenPath, | ||
| provider.headers | ||
| ) | ||
| oauth2Client.getOAuthAccessToken = getOAuth2AccessToken | ||
| oauth2Client.get = getOAuth2 | ||
| return oauth2Client | ||
| } | ||
| // Handle OAuth v1.x | ||
| const oauth1Client = new OAuth( | ||
| provider.requestTokenUrl, | ||
| provider.accessTokenUrl, | ||
| provider.clientId, | ||
| provider.clientSecret, | ||
| provider.version || "1.0", | ||
| provider.callbackUrl, | ||
| provider.encoding || "HMAC-SHA1" | ||
| ) | ||
|
|
||
| // Promisify get() and getOAuth2AccessToken() for OAuth1 | ||
| const originalGet = oauth1Client.get.bind(oauth1Client) | ||
| oauth1Client.get = (...args) => { | ||
| return new Promise((resolve, reject) => { | ||
| originalGet(...args, (error, result) => { | ||
| if (error) { | ||
| return reject(error) | ||
| } | ||
| resolve(result) | ||
| }) | ||
| }) | ||
| } | ||
| const originalGetOAuth1AccessToken = | ||
| oauth1Client.getOAuthAccessToken.bind(oauth1Client) | ||
| oauth1Client.getOAuthAccessToken = (...args) => { | ||
| return new Promise((resolve, reject) => { | ||
| // eslint-disable-next-line camelcase | ||
| originalGetOAuth1AccessToken( | ||
| ...args, | ||
| (error, oauth_token, oauth_token_secret, params) => { | ||
| if (error) { | ||
| return reject(error) | ||
| } | ||
|
|
||
| resolve({ | ||
| // TODO: Remove, this is only kept for backward compativility | ||
| // These are not in the OAuth 1.x spec | ||
| accessToken: oauth_token, | ||
| refreshToken: oauth_token_secret, | ||
| results: params, | ||
|
|
||
| oauth_token, | ||
| oauth_token_secret, | ||
| params, | ||
| }) | ||
| } | ||
| ) | ||
| }) | ||
| return { | ||
| getOAuthAccessToken: (code, codeVerifier) => getOAuth2AccessToken(code, provider, codeVerifier), | ||
| get: (accessToken, results) => getOAuth2(provider, accessToken, results) | ||
| } | ||
| } | ||
|
|
||
| const originalGetOAuthRequestToken = | ||
| oauth1Client.getOAuthRequestToken.bind(oauth1Client) | ||
| oauth1Client.getOAuthRequestToken = (params = {}) => { | ||
| return new Promise((resolve, reject) => { | ||
| // eslint-disable-next-line camelcase | ||
| originalGetOAuthRequestToken( | ||
| params, | ||
| (error, oauth_token, oauth_token_secret, params) => { | ||
| if (error) { | ||
| return reject(error) | ||
| } | ||
| resolve({ oauth_token, oauth_token_secret, params }) | ||
| } | ||
| ) | ||
| }) | ||
| } | ||
| return oauth1Client | ||
| // Handle OAuth v1.x (Simplified native implementation) | ||
| return new OAuth1Client(provider) |
There was a problem hiding this comment.
4. Oauth2 client api mismatch 🐞 Bug ✓ Correctness
oAuthClient() now returns an OAuth2 client with only getOAuthAccessToken(code, codeVerifier) and get(accessToken, results), but existing OAuth2 flows still call getAuthorizeUrl(), useAuthorizationHeaderforGET(), and pass the old argument order. This will throw at runtime during OAuth2 sign-in/callback and can also send the wrong PKCE verifier and Authorization header when it doesn’t crash first.
Agent Prompt
## Issue description
The OAuth client refactor changed the OAuth2 client surface area (removed `getAuthorizeUrl()`/`useAuthorizationHeaderforGET()` and changed method signatures), but the OAuth2 sign-in and callback flows still use the old API. This causes runtime failures and/or incorrect token/profile request construction.
## Issue Context
- `oAuthClient()` now captures `provider` and returns an object with only `getOAuthAccessToken(code, codeVerifier)` and `get(accessToken, results)`.
- Existing flows call `client.getAuthorizeUrl(...)`, `client.useAuthorizationHeaderforGET(...)`, and pass `(code, provider, codeVerifier)` / `(provider, accessToken, tokens)`.
## Fix Focus Areas
- packages/next-auth/src/server/lib/oauth/client.js[11-193]
- packages/next-auth/src/server/lib/signin/oauth.js[14-38]
- packages/next-auth/src/server/lib/oauth/callback.js[38-63]
## What to change
- Choose one:
1) **Compatibility mode:** Make the new OAuth2 client implement the legacy interface expected by callers:
- add `getAuthorizeUrl(params)`
- add `useAuthorizationHeaderforGET(boolean)` and honor it in `getOAuth2()` (header vs `access_token` query param)
- accept legacy arg orders for `getOAuthAccessToken(code, provider, codeVerifier)` and `get(provider, accessToken, tokens)` (even if `provider` is ignored)
2) **Full migration:** Update `signin/oauth.js` and `oauth/callback.js` to the new interface and implement a native authorization URL builder.
- Add/adjust unit tests for OAuth2 authorization URL generation and callback PKCE path to prevent regressions.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Comment on lines
+215
to
+238
| class OAuth1Client { | ||
| constructor(provider) { | ||
| this.provider = provider | ||
| // Note: This is a placeholder for actual OAuth1 signature logic if needed. | ||
| // For now, we will use a small internal helper or inline the logic. | ||
| // Given the complexity of OAuth1 signatures, for the scope of this refactor | ||
| // and to maintain stability, we'll implement the basics or use a lightweight helper. | ||
| // In many cases, OAuth1 is being deprecated, but for this fork we want to keep it. | ||
| } | ||
|
|
||
| async getOAuthRequestToken(params = {}) { | ||
| // Implement OAuth 1.0a request token logic | ||
| throw new Error("OAuth 1.0a is not yet fully implemented in the native client. Please use OAuth 2.0 or contact maintainers.") | ||
| } | ||
|
|
||
| async getOAuthAccessToken(oauth_token, oauth_token_secret, oauth_verifier) { | ||
| // Implement OAuth 1.0a access token logic | ||
| throw new Error("OAuth 1.0a is not yet fully implemented in the native client.") | ||
| } | ||
|
|
||
| async get(url, oauth_token, oauth_token_secret) { | ||
| // Implement OAuth 1.0a authenticated request | ||
| throw new Error("OAuth 1.0a is not yet fully implemented in the native client.") | ||
| } |
There was a problem hiding this comment.
5. Oauth1 unimplemented client 🐞 Bug ✓ Correctness
oAuthClient() now returns an OAuth1Client whose OAuth 1.0a methods unconditionally throw "not yet fully implemented" errors. OAuth1 providers (e.g., Twitter version: "1.0A") will fail at runtime during sign-in/callback.
Agent Prompt
## Issue description
OAuth 1.0a flows are still present (Twitter provider and OAuth1 callback path), but the refactor replaced the OAuth1 client with a placeholder whose methods always throw. This breaks OAuth1 sign-in/callback at runtime.
## Issue Context
- OAuth1 providers are detected by `!provider.version?.startsWith('2.')`.
- OAuth1 callback path calls `getOAuthRequestToken`, `getOAuthAccessToken`, and `get`.
## Fix Focus Areas
- packages/next-auth/src/server/lib/oauth/client.js[19-238]
- packages/next-auth/src/server/lib/oauth/callback.js[71-87]
## What to change
- Implement one of:
- **Short-term safe fix:** Re-introduce the prior OAuth1 implementation (e.g., via the existing `oauth` library) for v1 providers to preserve functionality.
- **Long-term fix:** Implement OAuth 1.0a signing and HTTP calls in `OAuth1Client` (request token, access token, and signed resource GET).
- Add tests that exercise an OAuth1 provider flow (at least request-token/access-token method behavior) to prevent silent regressions.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0de1f8ff39
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| "name": "@opensourceframework/critters", | ||
| "version": "2.0.1", | ||
| "description": "Inline critical CSS and lazy-load the rest. Forked from GoogleChromeLabs/critters.", | ||
| "version": "0.0.1", |
There was a problem hiding this comment.
This commit resets @opensourceframework/critters to 0.0.1 even though the previous baseline was 2.0.1; combined with the new changeset entry for this package, the next publish will advance from a backtracked semver line (0.0.x) instead of continuing 2.x, which breaks upgrade expectations for existing ^2 consumers and can move release tags backward. Keep the package version monotonic from the prior released baseline before applying patch/minor bumps.
Useful? React with 👍 / 👎.
Owner
Author
|
|
1 similar comment
Owner
Author
|
|
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Closes #22 (roadmap).
nextto ^16.0.0 and updatedpeerDependencies.