Frameworks support

Historically, Next-Admin was made to provide exclusive support for Next.js. The v8 release decoupled the library for any direct Next.js dependency and allowed support for any full-stack framework, as long as it can support API routes.

Next-Admin provides adapters for Next.js, Remix and TanStack Start, which simply consists on providing a routing hook that matches a given interface. So it is in fact easy to override the behavior of how routing works if the provided ones does not fit your needs.

The built-in adapters are accessible through the following import :

import { NextAdminRouterAdapter, NextAdmin, MainLayout } from '@premieroctet/next-admin/adapters/<your-framework>'

Building your own adapter

An adapter consists of a context that will need to wrap the NextAdmin component. This context provides a hook that matches RouterInterface.

type Query = Record<string, string | string[] | number | null>;
 
type PushParams = {
  pathname: string;
  query?: Query;
};
 
type Router = {
  push: (params: PushParams) => void;
  replace: (params: PushParams) => void;
  refresh: () => void;
  setQuery: (query: Query, merge?: boolean) => void;
};
 
type RouterInterface = {
  router: Router;
  query: Record<string, string>;
  pathname: string;
};

Once you created your hook, you can use the createRouterAdapter function to create the context.

import { createRouterAdapter } from "@premieroctet/next-admin/adapters/context";
import { createNextAdminComponents } from "@premieroctet/next-admin/adapters/components";
import type { RouterInterface } from '@premieroctet/next-admin/adapters/types'
 
const useMyRouterHook = (): RouterInterface => {
  // My router
}
 
export const MyCustomNextAdminRouterAdapter = createRouterAdapter(useMyRouterHook)
 
const { NextAdmin, MainLayout } = createNextAdminComponents(
  NextAdminRouterAdapter
);
 
export { NextAdmin, MainLayout };

You can now use NextAdmin in your admin page. MainLayout can be used in custom pages.

Troubleshooting

You can potentially encounter issues with the new Prisma Client. In previous versions, Prisma used to ship an index-browser.js file that would cause no issue if Prisma was bundled in the client bundle. This file does not exist anymore in the new client and importing Prisma in the client bundle can make your app crash. Make sure to have a look at the examples to see how to correctly tackle this issue.