[WIP/RFC] Full Next.JS experience with App Router

eslint.config.js

@@ -7,6 +7,7 @@ module.exports = tseslint.config(
   {
     ignores: [
       '**/.keystone/',
+      '**/.next/',
       '**/dist/',
       '**/node_modules/',
       '**/syntax-error.js',

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react'
 import { Core } from '@keystone-ui/core'
-import { type AppProps } from 'next/app'
 import { type DocumentNode } from 'graphql'
 import { type AdminConfig, type FieldViews } from '../../../../types'
 import { ErrorBoundary } from '../../../../admin-ui/components'
 import { KeystoneProvider } from '../../../../admin-ui/context'
 
+type AdminProps = {
+  children: React.ReactNode
+  config: AppConfig
+}
+
 type AppConfig = {
   adminConfig: AdminConfig
   adminMetaHash: string
@@ -14,14 +18,12 @@ type AppConfig = {
   apiPath: string
 }
 
-export const getApp =
-  (props: AppConfig) =>
-  ({ Component, pageProps }: AppProps) => {
-    return (
+export function Layout ({ children, config }: AdminProps) {
+  return (
       <Core>
-        <KeystoneProvider {...props}>
+        <KeystoneProvider {...config}>
           <ErrorBoundary>
-            <Component {...pageProps} />
+           {children}
           </ErrorBoundary>
         </KeystoneProvider>
       </Core>

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx

@@ -4,7 +4,7 @@
 import { Box, jsx } from '@keystone-ui/core'
 import { LoadingDots } from '@keystone-ui/loading'
 import { Button } from '@keystone-ui/button'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { Fields } from '../../../../admin-ui/utils'
 import { PageContainer } from '../../../../admin-ui/components/PageContainer'
 import { useKeystone, useList } from '../../../../admin-ui'
@@ -45,13 +45,10 @@ function CreatePageForm (props: { list: ListMeta }) {
   )
 }
 
-type CreateItemPageProps = { listKey: string }
+type CreateItemPageProps = { params: { listKey: string } }
 
-export const getCreateItemPage = (props: CreateItemPageProps) => () =>
-  <CreateItemPage {...props} />
-
-function CreateItemPage (props: CreateItemPageProps) {
-  const list = useList(props.listKey)
+export function CreateItemPage ({ params }: CreateItemPageProps) {
+  const list = useList(params.listKey)
   const { createViewFieldModes } = useKeystone()
 
   return (

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx

@@ -16,10 +16,12 @@ import { Link, type LinkProps } from '../../../../admin-ui/router'
 function ListCard ({
   listKey,
   count,
-  hideCreate
+  hideCreate,
+  basePath,
 }: {
   listKey: string
   hideCreate: boolean
+  basePath: string
   count:
     | { type: 'success', count: number }
     | { type: 'no-access' }
@@ -31,7 +33,7 @@ function ListCard ({
   return (
     <div css={{ position: 'relative' }}>
       <Link
-        href={`/${list.path}${list.isSingleton ? '/1' : ''}`}
+        href={`${basePath ?? ''}/${list.path}${list.isSingleton ? '/1' : ''}`}
         css={{
           backgroundColor: colors.background,
           borderColor: colors.border,
@@ -65,7 +67,7 @@ function ListCard ({
         )}
       </Link>
       {hideCreate === false && !list.isSingleton && (
-        <CreateButton title={`Create ${list.singular}`} href={`/${list.path}/create`}>
+        <CreateButton title={`Create ${list.singular}`} href={`${basePath ?? ''}/${list.path}/create`}>
           <PlusIcon size="large" />
           <VisuallyHidden>Create {list.singular}</VisuallyHidden>
         </CreateButton>
@@ -106,14 +108,17 @@ function CreateButton (props: LinkProps) {
 
 export function HomePage () {
   const {
-    adminMeta: { lists },
+    adminMeta: { lists, config },
     visibleLists,
   } = useKeystone()
   const query = useMemo(
     () => gql`
     query {
       keystone {
         adminMeta {
+          config {
+            adminPath
+          }
           lists {
             key
             hideCreate
@@ -158,10 +163,11 @@ export function HomePage () {
               )
             }
             return Object.keys(lists).map(key => {
-              if (!visibleLists.lists.has(key)) {
+              const list = lists[key]
+              if (!visibleLists.lists.has(list.key)) {
                 return null
               }
-              const result = dataGetter.get(key)
+              const result = dataGetter.get(list.key)
               return (
                 <ListCard
                   count={
@@ -177,6 +183,7 @@ export function HomePage () {
                   }
                   key={key}
                   listKey={key}
+                  basePath={data?.keystone.adminMeta.config.adminPath}
                 />
               )
             })

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx

@@ -45,7 +45,10 @@ import { CreateButtonLink } from '../../../../admin-ui/components/CreateButtonLi
 import { BaseToolbar, ColumnLayout, ItemPageHeader } from './common'
 
 type ItemPageProps = {
-  listKey: string
+  params: { 
+    id: string 
+    listKey: string
+  }
 }
 
 function useEventCallback<Func extends (...args: any) => any>(callback: Func): Func {
@@ -330,11 +333,9 @@ function DeleteButton ({
   )
 }
 
-export const getItemPage = (props: ItemPageProps) => () => <ItemPage {...props} />
-
-function ItemPage ({ listKey }: ItemPageProps) {
-  const list = useList(listKey)
-  const id = useRouter().query.id as string
+export function ItemPage ({ params }: ItemPageProps) {
+  const list = useList(params?.listKey)
+  const id = params?.id as string
 
   const { query, selectedFields } = useMemo(() => {
     const selectedFields = Object.entries(list.fields)
@@ -385,6 +386,9 @@ function ItemPage ({ listKey }: ItemPageProps) {
       item: ItemData
       keystone: {
         adminMeta: {
+          config: {
+            adminPath: string
+          }
           list: {
             fields: {
               path: string

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FieldSelection.tsx

@@ -5,7 +5,7 @@ import { Box, jsx } from '@keystone-ui/core'
 import { ChevronDownIcon } from '@keystone-ui/icons/icons/ChevronDownIcon'
 import { Options, OptionPrimitive, CheckMark } from '@keystone-ui/options'
 import { Popover } from '@keystone-ui/popover'
-import { useRouter } from 'next/router'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { type ListMeta } from '../../../../types'
 import { useSelectedFields } from './useSelectedFields'
 
@@ -19,7 +19,7 @@ function isArrayEqual (arrA: string[], arrB: string[]) {
   return true
 }
 
-const Option: typeof OptionPrimitive = props => {
+const Option: typeof OptionPrimitive = (props) => {
   return (
     <OptionPrimitive {...props}>
       {props.children}
@@ -33,7 +33,9 @@ const Option: typeof OptionPrimitive = props => {
 }
 
 // TODO: return type required by pnpm :(
-export const fieldSelectionOptionsComponents: Parameters<typeof Options>[0]['components'] = {
+export const fieldSelectionOptionsComponents: Parameters<
+  typeof Options
+>[0]['components'] = {
   Option,
 }
 
@@ -45,18 +47,26 @@ export function FieldSelection ({
   fieldModesByFieldPath: Record<string, 'hidden' | 'read'>
 }) {
   const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // Create a query object that behaves like the old query object
+  const query = {}
+  for (let [key, value] of searchParams.entries()) {
+    query[key] = value
+  }
   const selectedFields = useSelectedFields(list, fieldModesByFieldPath)
 
   const setNewSelectedFields = (selectedFields: string[]) => {
     if (isArrayEqual(selectedFields, list.initialColumns)) {
-      const { fields: _ignore, ...otherQueryFields } = router.query
+      const { fields: _ignore, ...otherQueryFields } = query
       router.push({ query: otherQueryFields })
     } else {
-      router.push({ query: { ...router.query, fields: selectedFields.join(',') } })
+      router.push({ query: { ...query, fields: selectedFields.join(',') } })
     }
   }
   const fields: { value: string, label: string, isDisabled: boolean }[] = []
-  Object.keys(fieldModesByFieldPath).forEach(fieldPath => {
+  Object.keys(fieldModesByFieldPath).forEach((fieldPath) => {
     if (fieldModesByFieldPath[fieldPath] === 'read') {
       fields.push({
         value: fieldPath,
@@ -72,7 +82,13 @@ export function FieldSelection ({
       triggerRenderer={({ triggerProps }) => {
         return (
           <Button weight="link" css={{ padding: 4 }} {...triggerProps}>
-            <span css={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>
+            <span
+              css={{
+                display: 'inline-flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
               {selectedFields.size} column{selectedFields.size === 1 ? '' : 's'}{' '}
               <ChevronDownIcon size="smallish" />
             </span>
@@ -83,12 +99,12 @@ export function FieldSelection ({
       <div css={{ width: 320 }}>
         <Box padding="medium">
           <Options
-            onChange={options => {
+            onChange={(options) => {
               if (!Array.isArray(options)) return
-              setNewSelectedFields(options.map(x => x.value))
+              setNewSelectedFields(options.map((x) => x.value))
             }}
             isMulti
-            value={fields.filter(option => selectedFields.has(option.value))}
+            value={fields.filter((option) => selectedFields.has(option.value))}
             options={fields}
             components={fieldSelectionOptionsComponents}
           />

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/SortSelection.tsx

@@ -6,8 +6,8 @@ import { ChevronDownIcon } from '@keystone-ui/icons/icons/ChevronDownIcon'
 import { Options } from '@keystone-ui/options'
 import { PopoverDialog, usePopover } from '@keystone-ui/popover'
 import { Fragment } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { type ListMeta } from '../../../../types'
-import { useRouter } from '../../../../admin-ui/router'
 import { fieldSelectionOptionsComponents } from './FieldSelection'
 import { useSort } from './useSort'
 
@@ -80,6 +80,13 @@ function SortSelectionPopoverContent ({
 }) {
   const sort = useSort(list, orderableFields)
   const router = useRouter()
+  const searchParams = useSearchParams()
+
+  // Create a query object that behaves like the old query object
+  const query = {}
+  for (let [key, value] of searchParams.entries()) {
+    query[key] = value
+  }
 
   return (
     <Stack padding="medium" css={{ minWidth: 320 }} gap="small">
@@ -100,7 +107,7 @@ function SortSelectionPopoverContent ({
             if (list.initialSort) {
               router.push({
                 query: {
-                  ...router.query,
+                  ...query,
                   sortBy: ''
                 }
               })
@@ -110,7 +117,7 @@ function SortSelectionPopoverContent ({
           } else {
             router.push({
               query: {
-                ...router.query,
+                ...query,
                 sortBy:
                   sort?.field === fieldPath && sort.direction === 'ASC'
                     ? `-${sort.field}`