Feature/next 15 support (#484)

* Start support next 15

* Migrate example

* Upgrade and support next 15

* Prerelease Next 15 support

* Exit prerelease

.changeset/neat-beers-do.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+Support Next 15

.changeset/pre.json

@@ -0,0 +1,15 @@
+{
+  "mode": "exit",
+  "tag": "beta",
+  "initialVersions": {
+    "docs": "0.0.0",
+    "example": "0.0.0",
+    "@premieroctet/next-admin-cli": "0.0.4",
+    "eslint-config-custom": "0.0.0",
+    "@premieroctet/next-admin": "6.1.7",
+    "tsconfig": "0.0.0"
+  },
+  "changesets": [
+    "neat-beers-do"
+  ]
+}

apps/docs/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
-    "@premieroctet/next-admin": "6.1.7",
+    "@premieroctet/next-admin": "6.1.8-beta.0",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.8",
     "mini-svg-data-uri": "^1.4.4",

apps/example/app/[locale]/admin/[[...nextadmin]]/page.tsx

@@ -2,7 +2,7 @@ import Dashboard from "@/components/Dashboard";
 import { options } from "@/options";
 import { prisma } from "@/prisma";
 import schema from "@/prisma/json-schema/json-schema.json";
-import { NextAdmin, PageProps } from "@premieroctet/next-admin";
+import { NextAdmin, PromisePageProps } from "@premieroctet/next-admin";
 import { getNextAdminProps } from "@premieroctet/next-admin/appRouter";
 import { Metadata, Viewport } from "next";
 import { getMessages } from "next-intl/server";
@@ -16,11 +16,11 @@ export const metadata: Metadata = {
   icons: "/assets/logo.svg",
 };
 
-export default async function AdminPage({
-  params,
-  searchParams,
-}: Readonly<PageProps>) {
-  const props = await getNextAdminProps({
+export default async function AdminPage(props: PromisePageProps) {
+  const params = await props.params;
+  const searchParams = await props.searchParams;
+
+  const nextAdminProps = await getNextAdminProps({
     params: params.nextadmin,
     searchParams,
     basePath: "/admin",
@@ -44,7 +44,7 @@ export default async function AdminPage({
 
   return (
     <NextAdmin
-      {...props}
+      {...nextAdminProps}
       dashboard={<Dashboard />}
       user={{
         data: {

apps/example/app/[locale]/layout.tsx

@@ -1,19 +1,17 @@
 import { notFound } from "next/navigation";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, use } from "react";
 import "../../styles.css";
 
-type Props = {
-  params: {
-    locale: "en" | "fr";
-  };
-};
-
+type ParamsProps = Promise<{
+  locale: "en" | "fr";
+}>;
 const locales = ["en", "fr"];
 
 export default function Layout({
   children,
-  params: { locale },
-}: PropsWithChildren<Props>) {
+  params,
+}: PropsWithChildren<{ params: ParamsProps }>) {
+  const locale = use(params)?.locale;
   if (!locales.includes(locale)) {
     notFound();
   }

apps/example/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <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.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/example/next.config.js

@@ -1,16 +1,19 @@
 const withNextIntl = require("next-intl/plugin")("./i18n.ts");
+const { withSuperjson } = require("next-superjson");
 
 /** @type {import('next').NextConfig} */
-module.exports = withNextIntl({
-  reactStrictMode: true,
-  experimental: {
-    swcPlugins: [
-      [
-        "next-superjson-plugin",
-        {
-          excluded: [],
-        },
+module.exports = withNextIntl(
+  withSuperjson({
+    reactStrictMode: true,
+    experimental: {
+      swcPlugins: [
+        [
+          "next-superjson-plugin",
+          {
+            excluded: [],
+          },
+        ],
       ],
-    ],
-  },
-});
+    }
+  })
+);

apps/example/package.json

@@ -20,20 +20,19 @@
   "dependencies": {
     "@heroicons/react": "^2.0.18",
     "@picocss/pico": "^1.5.7",
-    "@premieroctet/next-admin": "6.1.7",
+    "@premieroctet/next-admin": "6.1.8-beta.0",
     "@prisma/client": "5.14.0",
     "@tremor/react": "^3.2.2",
-    "babel-plugin-superjson-next": "^0.4.5",
-    "next": "^14.0.3",
+    "next": "^15.0.2",
     "next-intl": "^3.3.2",
-    "next-superjson-plugin": "^0.5.6",
+    "next-superjson": "^1.0.1",
+    "next-superjson-plugin": "^0.6.3",
     "react": "^18.2.0",
     "react-datepicker": "^4.24.0",
     "react-dom": "^18.2.0",
-    "superjson": "^1.12.2"
+    "superjson": "^2.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
     "@playwright/test": "^1.37.0",
     "@types/node": "^17.0.12",
     "@types/react": "^18.2.0",

package.json

@@ -35,7 +35,6 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.26.1",
-    "@radix-ui/react-slot": "^1.0.2",
     "prettier-plugin-tailwindcss": "^0.6.6"
   },
   "packageManager": "yarn@4.5.0",

packages/next-admin/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @premieroctet/next-admin
 
+## 6.1.8-beta.0
+
+### Patch Changes
+
+- [ba36b45](https://github.com/premieroctet/next-admin/commit/ba36b456e4530ae52b96bd1087e21e732e743cc2): Support Next 15
+
 ## 6.1.7
 
 ### Patch Changes

packages/next-admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@premieroctet/next-admin",
-  "version": "6.1.7",
+  "version": "6.1.8-beta.0",
   "description": "Next-Admin provides a customizable and turnkey admin dashboard for applications built with Next.js and powered by the Prisma ORM. It aims to simplify the development process by providing a turnkey admin system that can be easily integrated into your project.",
   "keywords": [
     "next.js",
@@ -93,7 +93,8 @@
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@rjsf/core": "^5.19.3",
@@ -129,6 +130,7 @@
     "@types/lodash.set": "^4.3.9",
     "@types/lodash.unset": "^4.5.9",
     "@types/lodash.update": "^4.10.9",
+    "@types/nprogress": "^0.2.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "autoprefixer": "^10.4.14",

packages/next-admin/src/appHandler.ts

@@ -31,7 +31,8 @@ export const createHandler = <P extends string = "nextadmin">({
   const resources = getResources(options);
 
   if (onRequest) {
-    router.use(async (req, ctx, next) => {
+    router.use(async (req, ctxPromise, next) => {
+      const ctx = await ctxPromise;
       const response = await onRequest(req, ctx);
 
       if (response) {
@@ -44,7 +45,8 @@ export const createHandler = <P extends string = "nextadmin">({
 
   router
     .get(`${apiBasePath}/:model/raw`, async (req, ctx) => {
-      const resource = getResourceFromParams(ctx.params[paramKey], resources);
+      const params = await ctx.params;
+      const resource = getResourceFromParams(params[paramKey], resources);
 
       if (!resource) {
         return NextResponse.json(
@@ -81,13 +83,11 @@ export const createHandler = <P extends string = "nextadmin">({
       return NextResponse.json(data);
     })
     .post(`${apiBasePath}/:model/actions/:id`, async (req, ctx) => {
-      const id = ctx.params[paramKey].at(-1)!;
+      const params = await ctx.params;
+      const id = params[paramKey].at(-1)!;
 
       // Make sure we don't have a false positive with a model that could be named actions
-      const resource = getResourceFromParams(
-        [ctx.params[paramKey][0]],
-        resources
-      );
+      const resource = getResourceFromParams([params[paramKey][0]], resources);
 
       if (!resource) {
         return NextResponse.json(
@@ -129,14 +129,15 @@ export const createHandler = <P extends string = "nextadmin">({
         );
       }
     })
-    .post(`${apiBasePath}/options`, async (req, ctx) => {
+    .post(`${apiBasePath}/options`, async (req, _ctx) => {
       const body = await req.json();
       const data = await handleOptionsSearch(body, prisma, options);
 
       return NextResponse.json(data);
     })
     .post(`${apiBasePath}/:model/:id?`, async (req, ctx) => {
-      const resource = getResourceFromParams(ctx.params[paramKey], resources);
+      const params = await ctx.params;
+      const resource = getResourceFromParams(params[paramKey], resources);
 
       if (!resource) {
         return NextResponse.json(
@@ -147,8 +148,8 @@ export const createHandler = <P extends string = "nextadmin">({
 
       const body = await getFormValuesFromFormData(await req.formData());
       const id =
-        ctx.params[paramKey].length === 2
-          ? formatId(resource, ctx.params[paramKey].at(-1)!)
+        params[paramKey].length === 2
+          ? formatId(resource, params[paramKey].at(-1)!)
           : undefined;
 
       const editOptions = options?.model?.[resource]?.edit;
@@ -195,7 +196,8 @@ export const createHandler = <P extends string = "nextadmin">({
       }
     })
     .delete(`${apiBasePath}/:model/:id`, async (req, ctx) => {
-      const resource = getResourceFromParams(ctx.params[paramKey], resources);
+      const params = await ctx.params;
+      const resource = getResourceFromParams(params[paramKey], resources);
 
       if (!resource) {
         return NextResponse.json(
@@ -212,15 +214,16 @@ export const createHandler = <P extends string = "nextadmin">({
       }
 
       await deleteResource({
-        body: [ctx.params[paramKey][1]],
+        body: [params[paramKey][1]],
         prisma,
         resource,
       });
 
       return NextResponse.json({ ok: true });
     })
     .delete(`${apiBasePath}/:model`, async (req, ctx) => {
-      const resource = getResourceFromParams(ctx.params[paramKey], resources);
+      const params = await ctx.params;
+      const resource = getResourceFromParams(params[paramKey], resources);
 
       if (!resource) {
         return NextResponse.json(

packages/next-admin/src/components/List.tsx

@@ -271,11 +271,9 @@ function List({
                   }}
                 >
                   <SelectTrigger className="bg-nextadmin-background-default dark:bg-dark-nextadmin-background-subtle max-h-[36px] max-w-[100px]">
-                    <SelectValue asChild>
                       <span className="text-nextadmin-content-inverted dark:text-dark-nextadmin-content-inverted pointer-events-none">
                         {pageSize}
                       </span>
-                    </SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value={"10"}>10</SelectItem>

packages/next-admin/src/components/inputs/RichText/components.tsx

@@ -11,16 +11,16 @@ import {
   toggleMark,
 } from "./utils";
 
-interface BaseProps {
-  className: string;
-  [key: string]: unknown;
+type BaseProps = {
+  className?: string;
 }
 
 type ButtonProps = PropsWithChildren<
   {
-    format: any;
+    format: string;
     icon: React.ReactElement;
     title?: string;
+    disabled?: boolean;
   } & BaseProps
 >;
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -41,7 +41,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         toggleMark(editor, format);
       };
     } else {
-      active = isBlockActive(editor, format as TypeElement);
+      active = isBlockActive(editor, format as unknown as TypeElement);
       handleMouseDown = (
         event: React.MouseEvent<HTMLButtonElement, MouseEvent>
       ) => {

packages/next-admin/src/types.ts

@@ -986,10 +986,14 @@ export const colorSchemes = ["light", "dark", "system"];
 export type ColorScheme = (typeof colorSchemes)[number];
 export type BasicColorScheme = Exclude<ColorScheme, "system">;
 
-export type PageProps = Readonly<{
+export type PageProps = {
   params: { [key: string]: string[] | string };
   searchParams: { [key: string]: string | string[] | undefined } | undefined;
-}>;
+};
+
+export type PromisePageProps = {
+  [key in keyof PageProps]: Promise<PageProps[key]>;
+}
 
 export type GetNextAdminPropsParams = {
   /**
@@ -1040,7 +1044,7 @@ export type GetMainLayoutPropsParams = Omit<
 >;
 
 export type RequestContext<P extends string> = {
-  params: Record<P, string[]>;
+  params: Promise<Record<P, string[]>>;
 };
 
 export type CreateAppHandlerParams<P extends string = "nextadmin"> = {