Next 14 Compatibility

.changeset/modern-cups-cheat.md

@@ -0,0 +1,9 @@
+---
+"@blitzjs/auth": patch
+"@blitzjs/next": patch
+"@blitzjs/rpc": patch
+"blitz": patch
+---
+
+Next 14 Compatibility
+

apps/next13/next.config.js

@@ -1,11 +1,6 @@
 const {withBlitz} = require("@blitzjs/next")
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    appDir: true,
-    serverComponentsExternalPackages: ["@prisma/client", "prisma"],
-  },
-}
+const nextConfig = {}
 
 module.exports = withBlitz(nextConfig)

apps/next13/package.json

@@ -8,6 +8,9 @@
     "blitz:start": "next start",
     "lint": "next lint"
   },
+  "prisma": {
+    "schema": "prisma/schema.prisma"
+  },
   "dependencies": {
     "@blitzjs/auth": "2.0.0-beta.36",
     "@blitzjs/config": "2.0.0-beta.36",
@@ -19,7 +22,7 @@
     "@tanstack/react-query": "4.0.10",
     "blitz": "2.0.0-beta.36",
     "flatted": "3.2.7",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "^4.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

apps/next13/tsconfig.json

@@ -14,6 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": ".",
     "plugins": [
       {
         "name": "next"

apps/toolkit-app-passportjs/package.json

@@ -31,7 +31,7 @@
     "@hookform/resolvers": "2.9.10",
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "openid-client": "5.2.1",
     "prisma": "4.6.1",
     "react": "18.2.0",

apps/toolkit-app/package.json

@@ -32,7 +32,7 @@
     "@hookform/resolvers": "2.9.10",
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "next-auth": "4.18.7",
     "prisma": "4.6.1",
     "react": "18.2.0",

apps/web/package.json

@@ -26,7 +26,7 @@
     "blitz": "2.0.0-beta.36",
     "jest": "29.3.0",
     "jest-environment-jsdom": "29.3.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "passport-mock-strategy": "2.0.0",
     "passport-twitter": "1.0.4",
     "prisma": "4.6.1",

integration-tests/auth-with-rpc/package.json

@@ -26,7 +26,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "delay": "5.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

integration-tests/auth/package.json

@@ -23,7 +23,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

integration-tests/get-initial-props/package.json

@@ -22,7 +22,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

integration-tests/middleware/package.json

@@ -15,7 +15,7 @@
     "@blitzjs/next": "2.0.0-beta.36",
     "@blitzjs/rpc": "2.0.0-beta.36",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

integration-tests/next-13-app-dir/next.config.js

@@ -1,6 +1,2 @@
 const {withBlitz} = require("@blitzjs/next")
-module.exports = withBlitz({
-  experimental: {
-    appDir: true,
-  },
-})
+module.exports = withBlitz({})

integration-tests/next-13-app-dir/package.json

@@ -24,7 +24,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

integration-tests/next-13-app-dir/src/blitz-client.ts

@@ -6,7 +6,7 @@ import {BlitzRpcPlugin} from "@blitzjs/rpc"
 export const {withBlitz, useSession, queryClient, BlitzProvider} = setupBlitzClient({
   plugins: [
     AuthClientPlugin({
-      cookiePrefix: "web-cookie-prefix",
+      cookiePrefix: "auth-tests-cookie-prefix",
     }),
     BlitzRpcPlugin({}),
   ],

integration-tests/no-suspense/package.json

@@ -22,7 +22,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

integration-tests/qm/package.json

@@ -15,7 +15,7 @@
     "@prisma/client": "4.6.1",
     "@tanstack/react-query": "4.0.10",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

integration-tests/qm/test/use-query.test.tsx

@@ -1,6 +1,6 @@
 import {describe, it, expect, beforeAll, vi} from "vitest"
-import {act, screen, waitForElementToBeRemoved, waitFor} from "@testing-library/react"
-import {useQuery, useInfiniteQuery, BlitzRpcPlugin, QueryClientProvider} from "@blitzjs/rpc"
+import {act, screen, waitForElementToBeRemoved} from "@testing-library/react"
+import {useQuery, useInfiniteQuery, BlitzRpcPlugin, BlitzProvider} from "@blitzjs/rpc"
 import React from "react"
 import delay from "delay"
 import {buildMutationRpc, buildQueryRpc, mockRouter, render} from "../../utils/blitz-test-utils"
@@ -44,9 +44,9 @@ describe("useQuery", () => {
 
     const {rerender} = render(ui(), {
       wrapper: ({children}) => (
-        <QueryClientProvider client={globalThis.queryClient}>
+        <BlitzProvider>
           <RouterContext.Provider value={mockRouter}>{children}</RouterContext.Provider>
-        </QueryClientProvider>
+        </BlitzProvider>
       ),
     })
     return [res, () => rerender(ui())]
@@ -117,9 +117,9 @@ describe("useQuery", () => {
 
       const {rerender} = render(ui(), {
         wrapper: ({children}) => (
-          <QueryClientProvider client={globalThis.queryClient}>
+          <BlitzProvider>
             <RouterContext.Provider value={mockRouter}>{children}</RouterContext.Provider>
-          </QueryClientProvider>
+          </BlitzProvider>
         ),
       })
     })
@@ -163,9 +163,9 @@ describe("useInfiniteQuery", () => {
 
     const {rerender} = render(ui(), {
       wrapper: ({children}) => (
-        <QueryClientProvider client={globalThis.queryClient}>
+        <BlitzProvider>
           <RouterContext.Provider value={mockRouter}>{children}</RouterContext.Provider>
-        </QueryClientProvider>
+        </BlitzProvider>
       ),
     })
     return [res, () => rerender(ui())]

integration-tests/react-query-utils/package.json

@@ -21,7 +21,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

integration-tests/rpc-path-root/package.json

@@ -11,7 +11,7 @@
     "@blitzjs/next": "2.0.0-beta.36",
     "@blitzjs/rpc": "2.0.0-beta.36",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

integration-tests/rpc/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

integration-tests/rpc/package.json

@@ -11,7 +11,7 @@
     "@blitzjs/next": "2.0.0-beta.36",
     "@blitzjs/rpc": "2.0.0-beta.36",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

integration-tests/rpc/test/index.test.js

@@ -162,13 +162,6 @@ function runTests(dev = false) {
       5000 * 60 * 2,
     )
   })
-
-  if (!dev) {
-    it("should show warning with next export", async () => {
-      const {stderr} = await nextExport(appDir, {outdir: join(appDir, "out")}, {stderr: true})
-      expect(stderr).toContain("https://nextjs.org/docs/messages/api-routes-static-export")
-    })
-  }
 }
 
 describe("RPC", () => {

integration-tests/rpc/tsconfig.json

@@ -13,8 +13,14 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }

integration-tests/trailing-slash/package.json

@@ -22,7 +22,7 @@
     "@prisma/client": "4.6.1",
     "blitz": "2.0.0-beta.36",
     "lowdb": "3.0.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "prisma": "4.6.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"

integration-tests/utils/blitz-test-utils.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import {vi} from "vitest"
 import {QueryClient} from "@tanstack/react-query"
-import {BlitzRpcPlugin, QueryClientProvider} from "@blitzjs/rpc"
+import {BlitzRpcPlugin, BlitzProvider} from "@blitzjs/rpc"
 import {NextRouter} from "next/router"
 import {RouterContext} from "@blitzjs/next"
 import {render as defaultRender} from "@testing-library/react"
@@ -40,22 +40,6 @@ export type BlitzProviderProps = {
   contextSharing?: boolean
 }
 
-const BlitzProvider = ({
-  client,
-  contextSharing = false,
-  children,
-}: BlitzProviderProps & {children: JSX.Element}) => {
-  if (globalThis.queryClient) {
-    return (
-      <QueryClientProvider client={globalThis.queryClient} contextSharing={contextSharing}>
-        {children}
-      </QueryClientProvider>
-    )
-  }
-
-  return children
-}
-
 const compose =
   (...rest) =>
   (x: React.ComponentType<any>) =>

package.json

@@ -29,7 +29,7 @@
     "husky": "8.0.2",
     "jsdom": "^19.0.0",
     "lint-staged": "13.0.3",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "only-allow": "1.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-prisma": "4.4.0",

packages/blitz-auth/package.json

@@ -76,7 +76,7 @@
     "@types/react": "18.0.25",
     "@types/react-dom": "17.0.14",
     "blitz": "2.0.0-beta.36",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "next-auth": "4.18.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/blitz-auth/src/client/index.tsx

@@ -1,6 +1,5 @@
 import {fromBase64} from "b64-lite"
 import _BadBehavior from "bad-behavior"
-import {useEffect, useState} from "react"
 import {UrlObject} from "url"
 import React, {ComponentPropsWithoutRef} from "react"
 import {
@@ -171,9 +170,9 @@ export const useSession = (options: UseSessionOptions = {}): ClientSession => {
     initialState = {...emptyPublicData, isLoading: true}
   }
 
-  const [session, setSession] = useState(initialState)
+  const [session, setSession] = React.useState(initialState)
 
-  useEffect(() => {
+  React.useEffect(() => {
     // Initialize on mount
     setSession({...getPublicDataStore().getData(), isLoading: false})
     const subscription = getPublicDataStore().observable.subscribe((data) =>
@@ -186,8 +185,8 @@ export const useSession = (options: UseSessionOptions = {}): ClientSession => {
 }
 
 export const useAuthorizeIf = (condition?: boolean, role?: string | Array<string>) => {
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => {
     setMounted(true)
   }, [])
 
@@ -233,9 +232,9 @@ export const useAuthenticatedSession = (
 }
 
 export const useRedirectAuthenticated = (to: UrlObject | string) => {
-  const [mounted, setMounted] = useState(false)
+  const [mounted, setMounted] = React.useState(false)
 
-  useEffect(() => {
+  React.useEffect(() => {
     setMounted(true)
   }, [])
 
@@ -303,9 +302,9 @@ export function getAuthValues<TProps = any>(
 function withBlitzAuthPlugin<TProps = any>(Page: ComponentType<TProps> | BlitzPage<TProps>) {
   const AuthRoot = (props: ComponentProps<any>) => {
     useSession({suspense: false})
-    const [mounted, setMounted] = useState(false)
+    const [mounted, setMounted] = React.useState(false)
 
-    useEffect(() => {
+    React.useEffect(() => {
       setMounted(true)
     }, [])
 

packages/blitz-next/build.config.ts

@@ -1,7 +1,7 @@
 import {BuildConfig} from "unbuild"
 
 const config: BuildConfig = {
-  entries: ["./src/index-browser", "./src/index-server"],
+  entries: ["./src/index-browser", "./src/index-server", "./src/provider"],
   externals: ["index-browser.cjs", "index-browser.mjs", "blitz", ".blitz"],
   declaration: true,
   rollup: {

packages/blitz-next/package.json

@@ -58,7 +58,7 @@
     "blitz": "2.0.0-beta.36",
     "cross-spawn": "7.0.3",
     "find-up": "4.1.0",
-    "next": "13.5.2",
+    "next": "14.0.4",
     "next-router-mock": "0.9.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",