Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RFC] Full Next.Js support and UI upgrades #9183

Open
10 tasks
gautamsi opened this issue Jun 24, 2024 · 1 comment
Open
10 tasks

[RFC] Full Next.Js support and UI upgrades #9183

gautamsi opened this issue Jun 24, 2024 · 1 comment

Comments

@gautamsi
Copy link
Member

gautamsi commented Jun 24, 2024

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
Copy link

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.

gautamsi added a commit to gautamsi/keystone that referenced this issue Jul 25, 2024
gautamsi added a commit to gautamsi/keystone that referenced this issue Aug 10, 2024
gautamsi added a commit to gautamsi/keystone that referenced this issue Aug 27, 2024
gautamsi added a commit to gautamsi/keystone that referenced this issue Sep 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants