This repository is a demo of how to setup AdminJS
with NextJS
. The setup is simple but it hasn't been tested fully.
It works by creating an Express
app with the router created by the AdminJS plugin
. The Express
app is mounted in an API Route
under the pages router. It needs to be setup with the pages router because the App Router
doesn't have an option to disable the body parser.
- Install
adminjs
,@adminjs/express
,@types/express
,express
,express-formidable
andexpress-session
. - Setup a
NextJS API Route
with anExpress
app that uses the router provided by the@adminjs/express
plugin. - Disable the
bodyParser
for theAPI Route
you just created. You can also enable theexternalResolver
setting to remove the warnings from NextJS. - Add the following to the
next.config.js
to rewrites the routes for the adminjs section:
...
rewrites: () => [
{
source: '/:admin*',
destination: '/api/:admin*',
},
],
...
- That's it! ๐
-
This setup hasn't been tested fully.
AdminJS
renders fine but I haven't tested all the functionalities provided by the library. -
Changing the package type to module may have some side effects. If there is any library that uses CommonJS in your project, the whole setup won't work. I would recommend to use an older version of AdminJS as an alternative for that scenario, although I'm not sure if those are mantained.
-
This setup is not a guide on how to use neither
NextJS
norAdminJS
, it's just a demo of how I managed to get both playing "nicely" together. -
The
AdminJS
docs (recommend to setup a file watcher in development)[https://docs.adminjs.co/installation/getting-started#frontend-bundling]. There, they mentioned the following:you would bundle all frontend files during build step of your deployment process
I'm not sure on how to do that with
AdminJS
and also on how this step would be integrated withNextJS'
build step.