V5 Migration Guide – Next Admin

Why migrate?

Next Admin v5 is a major release that comes with a lot of improvements. It is also a breaking change, so you will need to update your code to make it work with the new version. We decided to make this breaking change to make the library easier to use. Actions are removed in v5 and replaced by a catch-all API route [[...nextadmin]] that handles all the next-admin API routes.

How to migrate from v4 to v5 ?

Upgrade the package

First, you need to upgrade the package to the latest version. You can do this by running the following command:

bash copy yarn add @premieroctet/next-admin@latest

Create the `[[...nextadmin]]` API route

Next Admin v5 uses a catch-all route [[...nextadmin]] to handle all the API routes. You need to create this route in your project.

Refer to this guide to know where you should create the [[...nextadmin]] route.

app/api/admin/[[...nextadmin]]/route.ts

  import { createHandler } from '@premieroctet/next-admin/appHandler';
  import schema from '@/path/to/json-schema.json';
  import prisma from '@/path/to/prisma/client';
  import { options } from '@/path/to/next-admin-options';
 
  const { run } = createHandler({
    apiBasePath: '/api/admin',
    prisma,
    schema,
    options, // optional
  });
 
  export { run as DELETE, run as GET, run as POST };

Remove `basePath` property

The options property is not required anymore, so we moved the basePath (required) to the <NextAdmin /> component. You can remove it from your options object.

Remove server actions

If you were using App Router you had to create server actions to perform some operations. In v5 these actions are no longer needed. You can remove them from your project.

Update your Next-Admin page

Update your Next-Admin page to use the new getNextAdminProps function (more details here).

app/admin/[[...nextadmin]]/page.tsx

  import { NextAdmin, PageProps } from '@premieroctet/next-admin';
  import { getNextAdminProps } from '@premieroctet/next-admin/appRouter';
  import prisma from '@/path/to/prisma/client';
  import schema from '@/prisma/json-schema/json-schema.json';
  import { options } from '@/path/to/next-admin-options';
  import '@/styles.css' // .css file containing tailiwnd rules
  
  export default async function AdminPage({
    params,
    searchParams,
  }: PageProps) {
    const props = await getNextAdminProps({
      params: params.nextadmin,
      searchParams,
      basePath: '/admin',
      apiBasePath: '/api/admin', 
      prisma,
      schema,
      options, // optional
    });
  
    return <NextAdmin {...props}/>;
  }

You should now have a working Next Admin v5 project. If you encounter any problems, please refer to the corresponding documentation or open a ticket on our Github repository

Code snippets