update examples

.vscode/settings.json

@@ -14,6 +14,7 @@
     { "pattern": "./playground/**" },
     { "pattern": "./playground-v6/**" }
   ],
+  "eslint.useFlatConfig": true,
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
   },

docs/package.json

@@ -30,14 +30,13 @@
     "@types/react-highlight-words": "^0.20.0",
     "@uploadthing/react": "workspace:*",
     "acorn": "^8.12.1",
-    "autoprefixer": "^10.4.20",
     "clsx": "^2.1.0",
     "fast-glob": "^3.3.2",
     "flexsearch": "^0.7.43",
     "framer-motion": "^11.5.4",
     "mdast-util-to-string": "^4.0.0",
     "mdx-annotations": "^0.1.4",
-    "next": "14.2.11",
+    "next": "15.1.3",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
     "next-view-transitions": "^0.3.0",

docs/postcss.config.cjs → docs/postcss.config.js

@@ -1,6 +1,5 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
   },
 };

examples/minimal-appdir/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@uploadthing/react": "7.1.5",
-    "next": "14.2.11",
+    "next": "15.1.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "uploadthing": "7.4.4"

examples/minimal-pagedir/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@uploadthing/react": "7.1.5",
-    "next": "14.2.11",
+    "next": "15.1.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "uploadthing": "7.4.4"

examples/profile-picture/eslint.config.js

@@ -22,6 +22,7 @@ export default tseslint.config(
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-unsafe-assignment": "off",
       "@typescript-eslint/no-unsafe-argument": "off",
+      "@typescript-eslint/only-throw-error": "off",
 
       "@typescript-eslint/no-unused-vars": [
         "error",
@@ -31,10 +32,6 @@ export default tseslint.config(
         "warn",
         { prefer: "type-imports", fixStyle: "separate-type-imports" },
       ],
-      "@typescript-eslint/no-misused-promises": [
-        2,
-        { checksVoidReturn: { attributes: false } },
-      ],
       "@typescript-eslint/require-await": "off",
     },
   },

examples/profile-picture/package.json

@@ -22,9 +22,8 @@
     "class-variance-authority": "^0.7.0",
     "client-only": "^0.0.1",
     "drizzle-orm": "^0.30.10",
-    "geist": "^1.3.0",
     "lucide-react": "^0.368.0",
-    "next": "14.2.11",
+    "next": "15.1.3",
     "next-auth": "5.0.0-beta.19",
     "react": "18.3.1",
     "react-dom": "18.3.1",

examples/profile-picture/src/app/_actions.ts

@@ -1,7 +1,7 @@
 "use server";
 
 import { revalidatePath } from "next/cache";
-import { isRedirectError } from "next/dist/client/components/redirect";
+import { unstable_rethrow } from "next/navigation";
 import {
   signOut as $signOut,
   currentUser,
@@ -20,7 +20,7 @@ export async function signInWithCredentials(
   try {
     await signIn("credentials", formData);
   } catch (error) {
-    if (isRedirectError(error)) throw error;
+    unstable_rethrow(error);
 
     if (error instanceof AuthError) {
       switch (error.type) {

examples/profile-picture/src/app/_components/profile-pic-uploader.tsx

@@ -71,9 +71,11 @@ export function ProfilePictureCard(props: { user: User }) {
     }
   }, [file, croppedArea]);
 
-  const uploadCroppedImage = async () => {
+  const uploadCroppedImage = () => {
     if (!croppedArea || !output) return;
-    await startUpload([output]);
+    React.startTransition(async () => {
+      await startUpload([output]);
+    });
   };
 
   return (

examples/profile-picture/src/app/_components/update-name.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useActionState } from "react";
 import { Button } from "@/ui/button";
 import { CardContent, CardFooter } from "@/ui/card";
 import { Input } from "@/ui/input";
@@ -9,16 +10,19 @@ import { toast } from "sonner";
 import { updateDisplayName } from "../_actions";
 
 export function UpdateNameForm(props: { user: User }) {
+  const [_, dispatch, isPending] = useActionState(
+    async (_: void, fd: FormData) => {
+      const name = fd.get("name");
+      if (typeof name === "string") {
+        await updateDisplayName(name);
+        toast.success("Name updated");
+      }
+    },
+    undefined,
+  );
+
   return (
-    <form
-      action={async (fd) => {
-        const name = fd.get("name");
-        if (typeof name === "string") {
-          await updateDisplayName(name);
-          toast.success("Name updated");
-        }
-      }}
-    >
+    <form action={dispatch}>
       <CardContent>
         <Input
           name="name"
@@ -29,7 +33,9 @@ export function UpdateNameForm(props: { user: User }) {
       <CardFooter className="justify-between border-t px-6 py-4">
         Please use 32 characters at maximum.
         <p className="text-muted-foreground text-sm"></p>
-        <Button size="sm">Save</Button>
+        <Button size="sm" disabled={isPending}>
+          Save
+        </Button>
       </CardFooter>
     </form>
   );

examples/profile-picture/src/app/_components/user-menu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { use } from "react";
+import { use, useActionState } from "react";
 import { signOut } from "@/app/_actions";
 import { Button } from "@/ui/button";
 import {
@@ -16,6 +16,7 @@ import type { User } from "next-auth";
 
 export function UserMenu(props: { user: Promise<User | null> }) {
   const user = use(props.user);
+  const [_, dispatch, isPending] = useActionState(signOut, undefined);
 
   return (
     <DropdownMenu>
@@ -39,7 +40,9 @@ export function UserMenu(props: { user: Promise<User | null> }) {
         <DropdownMenuItem>Settings</DropdownMenuItem>
         <DropdownMenuItem>Support</DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={() => signOut()}>Logout</DropdownMenuItem>
+        <DropdownMenuItem onClick={dispatch} disabled={isPending}>
+          Logout
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

examples/profile-picture/src/app/layout.tsx

@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
+import { Geist } from "next/font/google";
 import Link from "next/link";
 import { UserMenu } from "@/app/_components/user-menu";
 import { Button } from "@/ui/button";
 import { Input } from "@/ui/input";
 import { Sheet, SheetContent, SheetTrigger } from "@/ui/sheet";
-import { GeistSans } from "geist/font/sans";
 import { Menu, Package2, Search } from "lucide-react";
 import { Toaster } from "sonner";
 
@@ -22,14 +22,19 @@ export const metadata: Metadata = {
   description: "A User Profile Settings example",
 };
 
+const geist = Geist({
+  subsets: ["latin"],
+  variable: "--font-geist",
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en">
-      <body className={GeistSans.variable}>
+      <body className={geist.variable}>
         <NextSSRPlugin
           /**
            * The `extractRouterConfig` will extract **only** the route configs

examples/with-clerk-appdir/eslint.config.js

@@ -0,0 +1,17 @@
+import { FlatCompat } from "@eslint/eslintrc";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+    },
+  },
+];
+
+export default eslintConfig;

examples/with-clerk-appdir/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/with-clerk-appdir/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@example/with-clerk-appdir",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "next build",
     "clean": "git clean -xdf .next node_modules",
@@ -13,29 +14,22 @@
     "@clerk/nextjs": "^4.29.8",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@uploadthing/react": "7.1.5",
-    "next": "14.2.11",
+    "next": "15.1.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "uploadthing": "7.4.4",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/eslint": "9.6.1",
+    "@eslint/eslintrc": "3.2.0",
     "@types/node": "^20.14.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.19.0",
-    "@typescript-eslint/parser": "8.19.0",
     "eslint": "9.17.0",
-    "eslint-config-next": "^14.2.1",
+    "eslint-config-next": "15.1.3",
     "typescript": "5.7.2"
   },
   "ct3aMetadata": {
     "initVersion": "7.20.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "next/core-web-vitals"
-    ]
   }
 }

examples/with-clerk-appdir/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -12,11 +16,25 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
-      "~/*": ["./src/*"]
-    }
+      "~/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": [".next/types/**/*.ts", "next-env.d.ts", "src", "*.mjs"],
-  "exclude": ["node_modules"]
+  "include": [
+    ".next/types/**/*.ts",
+    "next-env.d.ts",
+    "src",
+    "*.mjs"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

examples/with-clerk-pagesdir/eslint.config.js

@@ -0,0 +1,17 @@
+import { FlatCompat } from "@eslint/eslintrc";
+
+const compat = new FlatCompat({
+  baseDirectory: import.meta.dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+    },
+  },
+];
+
+export default eslintConfig;

examples/with-clerk-pagesdir/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

examples/with-clerk-pagesdir/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@example/with-clerk-pagesdir",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "next build",
     "clean": "git clean -xdf .next node_modules",
@@ -13,29 +14,22 @@
     "@clerk/nextjs": "^4.29.8",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@uploadthing/react": "7.1.5",
-    "next": "14.2.11",
+    "next": "15.1.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "uploadthing": "7.4.4",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/eslint": "9.6.1",
+    "@eslint/eslintrc": "3.2.0",
     "@types/node": "^20.14.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "8.19.0",
-    "@typescript-eslint/parser": "8.19.0",
     "eslint": "9.17.0",
-    "eslint-config-next": "^14.2.1",
+    "eslint-config-next": "15.1.3",
     "typescript": "5.7.2"
   },
   "ct3aMetadata": {
     "initVersion": "7.20.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "next/core-web-vitals"
-    ]
   }
 }