[RFC] Full Next.Js support and UI upgrades

[gautamsi]

Full Next.JS support

Currently the frontend is hidden away in .keystone/admin folder and generates multiple pages for each list routes. This is not very continent and makes customization very difficult. To overcome this I have proposed use of full Next.Js integration.

Some initial poc done in #9181 .

Goals

• [ ] Leverage full Next.Js integration instead of isolated instance
• [ ] Upgrade Next.Js to use App Router with server actions
• [ ] Code split custom field views instead of bundling them together
• [ ] Frontend to have less dependency on GraphQL for Administration, this also opens up additional features
• [ ] upgrade @keystone-ui to be ssr friendly
• [ ] Decouple Admin-UI and frontend logic to allow use of other frameworks like Remix
• [ ] Allow selection of relationship fields in UI
• [ ] Nested filters in UI
• [ ] Add support for UI Hooks/Extensions
• [ ] ....TBD (waiting for community feedback)

Using App router will allow theming and customization easily with the Layouts.

Kudos to @junaid33 for initial Next.Js 14 work done in https://github.com/openshiporg/openfront

[junaid33]

This looks so good! And adding themes should be a lot easier with this.

I think it would be really powerful if Keystone took the Shadcn/ui approach and let people "copy and paste" the whole Admin UI thru a CLI (or using a simple frontend). They could choose a theme, point to their schema, add an adminPath, and the CLI could build the app pages and layout pages. Then people could really hack away at that code and change almost everything.

I started doing this for Openship 3 and reusing the Fields component instead of building forms all over again is saving me so much time. The props passed to Fields can easily be manipulated to hide certain fields and error handling and validation are all built-in. I even built a EditItemDrawer that makes it easy to edit items on the fly .

Maybe down the line, Apollo client and Prisma can be decoupled and people can plug in React-Query or Drizzle instead thru the CLI and they still get the Admin-UI.