chore: partial esm conversion of next package

packages/next/src/index.ts

@@ -1,5 +1,5 @@
-export { AdminLayout } from './layouts/Admin'
-export { RootLayout } from './layouts/Root'
-export { Dashboard as DashboardPage } from './views/Dashboard'
-export { Login } from './views/Login'
-export { RootPage } from './views/Root'
+export { AdminLayout } from './layouts/Admin/index.js'
+export { RootLayout } from './layouts/Root/index.js'
+export { Dashboard as DashboardPage } from './views/Dashboard/index.js'
+export { Login } from './views/Login/index.js'
+export { RootPage } from './views/Root/index.js'

packages/next/src/views/Dashboard/Default/index.client.tsx

@@ -1,5 +1,6 @@
 'use client'
 import type { EntityToGroup, Group } from '@payloadcms/ui'
+import type { Permissions } from 'payload/auth'
 
 import { getTranslation } from '@payloadcms/translations'
 import {
@@ -15,16 +16,15 @@ import {
 import React, { Fragment, useEffect, useState } from 'react'
 
 import './index.scss'
-import { Permissions } from 'payload/auth'
 
 const baseClass = 'dashboard'
 
 export const DefaultDashboardClient: React.FC<{
   Link: React.ComponentType
+  permissions: Permissions
   visibleCollections: string[]
   visibleGlobals: string[]
-  permissions: Permissions
-}> = ({ Link, visibleCollections, visibleGlobals, permissions }) => {
+}> = ({ Link, permissions, visibleCollections, visibleGlobals }) => {
   const config = useConfig()
 
   const {

packages/next/src/views/Dashboard/Default/index.tsx

@@ -1,20 +1,20 @@
+import type { Permissions } from 'payload/auth'
 import type { SanitizedConfig } from 'payload/types'
 
 import { Gutter, SetStepNav, SetViewActions } from '@payloadcms/ui'
 import React from 'react'
 
-import { DefaultDashboardClient } from './index.client'
+import { DefaultDashboardClient } from './index.client.js'
 import './index.scss'
-import { Permissions } from 'payload/auth'
 
 const baseClass = 'dashboard'
 
 export type DashboardProps = {
   Link: React.ComponentType<any>
   config: SanitizedConfig
+  permissions: Permissions
   visibleCollections: string[]
   visibleGlobals: string[]
-  permissions: Permissions
 }
 
 export const DefaultDashboard: React.FC<DashboardProps> = (props) => {
@@ -25,9 +25,9 @@ export const DefaultDashboard: React.FC<DashboardProps> = (props) => {
         components: { afterDashboard, beforeDashboard },
       },
     },
+    permissions,
     visibleCollections,
     visibleGlobals,
-    permissions,
   } = props
 
   return (
@@ -39,9 +39,9 @@ export const DefaultDashboard: React.FC<DashboardProps> = (props) => {
           beforeDashboard.map((Component, i) => <Component key={i} />)}
         <DefaultDashboardClient
           Link={Link}
+          permissions={permissions}
           visibleCollections={visibleCollections}
           visibleGlobals={visibleGlobals}
-          permissions={permissions}
         />
         {Array.isArray(afterDashboard) &&
           afterDashboard.map((Component, i) => <Component key={i} />)}

packages/next/src/views/Dashboard/index.tsx

@@ -1,14 +1,14 @@
 import { HydrateClientUser, RenderCustomComponent } from '@payloadcms/ui'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import { isEntityHidden } from 'payload/utilities'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
-import type { DashboardProps } from './Default'
+import type { AdminViewProps } from '../Root/index.d.ts'
+import type { DashboardProps } from './Default/index.d.ts'
 
-import { DefaultDashboard } from './Default'
+import { DefaultDashboard } from './Default/index.js'
 
-export { generateDashboardMetadata } from './meta'
+export { generateDashboardMetadata } from './meta.js'
 
 export const Dashboard: React.FC<AdminViewProps> = ({
   initPageResult,
@@ -41,9 +41,9 @@ export const Dashboard: React.FC<AdminViewProps> = ({
   const componentProps: DashboardProps = {
     Link,
     config,
+    permissions,
     visibleCollections,
     visibleGlobals,
-    permissions,
   }
 
   return (

packages/next/src/views/Dashboard/meta.ts

@@ -1,5 +1,6 @@
-import { meta } from '../../utilities/meta'
-import { GenerateViewMetadata } from '../Root'
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateDashboardMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) => {
   return meta({

packages/next/src/views/Document/getMetaBySegment.tsx

@@ -1,14 +1,15 @@
 import type { Metadata } from 'next'
 import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
 
-import { getNextI18n } from '../../utilities/getNextI18n'
-import { generateMetadata as apiMeta } from '../API/meta'
-import { generateMetadata as editMeta } from '../Edit/meta'
-import { generateMetadata as livePreviewMeta } from '../LivePreview/meta'
-import { generateMetadata as versionMeta } from '../Version/meta'
-import { generateMetadata as versionsMeta } from '../Versions/meta'
-import { GenerateViewMetadata } from '../Root'
-import { generateNotFoundMeta } from '../NotFound/meta'
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { getNextI18n } from '../../utilities/getNextI18n.js'
+import { generateMetadata as apiMeta } from '../API/meta.js'
+import { generateMetadata as editMeta } from '../Edit/meta.js'
+import { generateMetadata as livePreviewMeta } from '../LivePreview/meta.js'
+import { generateNotFoundMeta } from '../NotFound/meta.js'
+import { generateMetadata as versionMeta } from '../Version/meta.js'
+import { generateMetadata as versionsMeta } from '../Versions/meta.js'
 
 export type GenerateEditViewMetadata = (
   args: Parameters<GenerateViewMetadata>[0] & {
@@ -19,10 +20,10 @@ export type GenerateEditViewMetadata = (
 ) => Promise<Metadata>
 
 export const getMetaBySegment: GenerateEditViewMetadata = async ({
-  config,
-  params,
   collectionConfig,
+  config,
   globalConfig,
+  params,
 }) => {
   const { segments } = params
 

packages/next/src/views/Document/getViewsFromConfig.tsx

@@ -8,13 +8,13 @@ import type {
 
 import { isEntityHidden } from 'payload/utilities'
 
-import { APIView as DefaultAPIView } from '../API'
-import { EditView as DefaultEditView } from '../Edit'
-import { LivePreviewView as DefaultLivePreviewView } from '../LivePreview'
-import { VersionView as DefaultVersionView } from '../Version'
-import { VersionsView as DefaultVersionsView } from '../Versions'
-import { getCustomViewByKey } from './getCustomViewByKey'
-import { getCustomViewByPath } from './getCustomViewByPath'
+import { APIView as DefaultAPIView } from '../API/index.js'
+import { EditView as DefaultEditView } from '../Edit/index.js'
+import { LivePreviewView as DefaultLivePreviewView } from '../LivePreview/index.js'
+import { VersionView as DefaultVersionView } from '../Version/index.js'
+import { VersionsView as DefaultVersionsView } from '../Versions/index.js'
+import { getCustomViewByKey } from './getCustomViewByKey.js'
+import { getCustomViewByPath } from './getCustomViewByPath.js'
 
 export const getViewsFromConfig = async ({
   collectionConfig,

packages/next/src/views/Document/index.tsx

@@ -19,13 +19,13 @@ import {
 } from '@payloadcms/ui'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
-import type { GenerateEditViewMetadata } from './getMetaBySegment'
+import type { AdminViewProps } from '../Root/index.d.ts'
+import type { GenerateEditViewMetadata } from './getMetaBySegment.d.ts'
 
-import { formatTitle } from '../Edit/Default/SetDocumentTitle/formatTitle'
-import { NotFoundClient } from '../NotFound/index.client'
-import { getMetaBySegment } from './getMetaBySegment'
-import { getViewsFromConfig } from './getViewsFromConfig'
+import { formatTitle } from '../Edit/Default/SetDocumentTitle/formatTitle.js'
+import { NotFoundClient } from '../NotFound/index.client.js'
+import { getMetaBySegment } from './getMetaBySegment.js'
+import { getViewsFromConfig } from './getViewsFromConfig.js'
 
 export const generateMetadata: GenerateEditViewMetadata = async (args) => getMetaBySegment(args)
 

packages/next/src/views/Document/meta.ts

@@ -1,4 +1,6 @@
-import { GenerateEditViewMetadata, getMetaBySegment } from './getMetaBySegment'
+import type { GenerateEditViewMetadata } from './getMetaBySegment.js'
+
+import { getMetaBySegment } from './getMetaBySegment.js'
 
 export const generateDocumentMetadata: GenerateEditViewMetadata = async (args) =>
   getMetaBySegment(args)

packages/next/src/views/Edit/Default/Auth/index.tsx

@@ -13,9 +13,9 @@ import {
 import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import APIKey from './APIKey'
+import APIKey from './APIKey.js'
 import './index.scss'
 
 const baseClass = 'auth-fields'
@@ -47,8 +47,8 @@ const Auth: React.FC<Props> = (props) => {
   const handleChangePassword = useCallback(
     async (state: boolean) => {
       if (!state) {
-        dispatchFields({ path: 'password', type: 'REMOVE' })
-        dispatchFields({ path: 'confirm-password', type: 'REMOVE' })
+        dispatchFields({ type: 'REMOVE', path: 'password' })
+        dispatchFields({ type: 'REMOVE', path: 'confirm-password' })
       }
 
       setChangingPassword(state)

packages/next/src/views/Edit/Default/SetDocumentTitle/formatTitle.ts

@@ -1,19 +1,25 @@
-import { I18n, getTranslation } from '@payloadcms/translations'
+import type { I18n } from '@payloadcms/translations'
+import type {
+  SanitizedCollectionConfig,
+  SanitizedConfig,
+  SanitizedGlobalConfig,
+} from 'payload/types'
+
+import { getTranslation } from '@payloadcms/translations'
 import { formatDate } from '@payloadcms/ui'
-import { SanitizedCollectionConfig, SanitizedConfig, SanitizedGlobalConfig } from 'payload/types'
 
 export const formatTitle = ({
-  value,
   collectionConfig,
+  dateFormat: dateFormatFromConfig,
   globalConfig,
   i18n,
-  dateFormat: dateFormatFromConfig,
+  value,
 }: {
-  value: string
   collectionConfig?: SanitizedCollectionConfig
+  dateFormat: SanitizedConfig['admin']['dateFormat']
   globalConfig?: SanitizedGlobalConfig
   i18n: I18n
-  dateFormat: SanitizedConfig['admin']['dateFormat']
+  value: string
 }): string => {
   let title: string = value
 

packages/next/src/views/Edit/Default/SetDocumentTitle/index.tsx

@@ -3,7 +3,8 @@ import type { ClientConfig } from 'payload/types'
 
 import { useDocumentInfo, useFormFields, useTranslation } from '@payloadcms/ui'
 import { useEffect } from 'react'
-import { formatTitle } from './formatTitle'
+
+import { formatTitle } from './formatTitle.js'
 
 export const SetDocumentTitle: React.FC<{
   collectionConfig?: ClientConfig['collections'][0]
@@ -23,16 +24,16 @@ export const SetDocumentTitle: React.FC<{
   const dateFormatFromConfig = config?.admin?.dateFormat
 
   const title = formatTitle({
+    collectionConfig,
+    dateFormat: dateFormatFromConfig,
+    globalConfig,
+    i18n,
     value:
       typeof field === 'string'
         ? field
         : typeof field === 'number'
           ? String(field)
           : (field?.value as string),
-    collectionConfig,
-    globalConfig,
-    i18n,
-    dateFormat: dateFormatFromConfig,
   })
 
   useEffect(() => {

packages/next/src/views/Edit/Default/index.tsx

@@ -17,11 +17,11 @@ import {
 import { Upload } from '@payloadcms/ui/elements'
 import React, { Fragment, useCallback } from 'react'
 
-import { LeaveWithoutSaving } from '../../../elements/LeaveWithoutSaving'
+import { LeaveWithoutSaving } from '../../../elements/LeaveWithoutSaving/index.js'
 // import { getTranslation } from '@payloadcms/translations'
-import Auth from './Auth'
-import { SetDocumentTitle } from './SetDocumentTitle'
-import { SetStepNav } from './SetStepNav'
+import Auth from './Auth/index.js'
+import { SetDocumentTitle } from './SetDocumentTitle/index.js'
+import { SetStepNav } from './SetStepNav/index.js'
 import './index.scss'
 
 const baseClass = 'collection-edit'

packages/next/src/views/Edit/index.client.tsx

@@ -8,7 +8,7 @@ import {
   useDocumentInfo,
   useFormQueryParams,
 } from '@payloadcms/ui'
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 import React, { Fragment, useEffect } from 'react'
 import { useCallback } from 'react'
 

packages/next/src/views/Edit/index.tsx

@@ -2,7 +2,7 @@ import type { ServerSideEditViewProps } from 'payload/types'
 
 import React from 'react'
 
-import { EditViewClient } from './index.client'
+import { EditViewClient } from './index.client.js'
 
 export const EditView: React.FC<ServerSideEditViewProps> = () => {
   return <EditViewClient />

packages/next/src/views/Edit/meta.ts

@@ -2,9 +2,9 @@ import type { Metadata } from 'next'
 
 import { getTranslation } from '@payloadcms/translations'
 
-import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment'
+import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.js'
 
-import { meta } from '../../utilities/meta'
+import { meta } from '../../utilities/meta.js'
 
 export const generateMetadata: GenerateEditViewMetadata = async ({
   collectionConfig,

packages/next/src/views/ForgotPassword/index.tsx

@@ -1,10 +1,10 @@
 import { Button, Email, Form, FormSubmit, Translation } from '@payloadcms/ui'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.js'
 
-export { generateForgotPasswordMetadata } from './meta'
+export { generateForgotPasswordMetadata } from './meta.js'
 
 export const forgotPasswordBaseClass = 'forgot-password'
 

packages/next/src/views/ForgotPassword/meta.ts

@@ -1,4 +1,4 @@
-import { meta } from '../../utilities/meta'
+import { meta } from '../../utilities/meta.js'
 
 export const generateForgotPasswordMetadata = async ({ config, i18n: { t } }) => {
   return meta({

packages/next/src/views/List/Default/Cell/fields/Relationship/index.tsx

@@ -5,7 +5,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { canUseDOM, formatDocTitle, useConfig, useIntersect, useTranslation } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
-import { useListRelationships } from '../../../RelationshipProvider'
+import { useListRelationships } from '../../../RelationshipProvider/index.js'
 import './index.scss'
 
 type Value = { relationTo: string; value: number | string }

packages/next/src/views/List/Default/Cell/fields/index.tsx

@@ -1,13 +1,13 @@
-import { ArrayCell } from './Array'
-import { BlocksCell } from './Blocks'
-import { CheckboxCell } from './Checkbox'
-import { CodeCell } from './Code'
-import { DateCell } from './Date'
-import { FileCell } from './File'
-import { JSONCell } from './JSON'
-import { RelationshipCell } from './Relationship'
-import { SelectCell } from './Select'
-import { TextareaCell } from './Textarea'
+import { ArrayCell } from './Array/index.js'
+import { BlocksCell } from './Blocks/index.js'
+import { CheckboxCell } from './Checkbox/index.js'
+import { CodeCell } from './Code/index.js'
+import { DateCell } from './Date/index.js'
+import { FileCell } from './File/index.js'
+import { JSONCell } from './JSON/index.js'
+import { RelationshipCell } from './Relationship/index.js'
+import { SelectCell } from './Select/index.js'
+import { TextareaCell } from './Textarea/index.js'
 
 export default {
   File: FileCell,

packages/next/src/views/List/Default/Cell/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React from 'react' // TODO: abstract this out to support all routers
 
 import type { CellProps } from 'payload/types'
@@ -8,8 +8,8 @@ import { getTranslation } from '@payloadcms/translations'
 import { useConfig, useTableCell, useTranslation } from '@payloadcms/ui'
 import { TableCellProvider } from '@payloadcms/ui'
 
-import cellComponents from './fields'
-import { CodeCell } from './fields/Code'
+import { CodeCell } from './fields/Code/index.js'
+import cellComponents from './fields/index.js'
 
 export const DefaultCell: React.FC<CellProps> = (props) => {
   const {

packages/next/src/views/List/Default/RelationshipProvider/index.tsx

@@ -5,7 +5,7 @@ import { useConfig, useDebounce, useLocale, useTranslation } from '@payloadcms/u
 import querystring from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
 
-import { reducer } from './reducer'
+import { reducer } from './reducer.js'
 
 // documents are first set to null when requested
 // set to false when no doc is returned
@@ -73,14 +73,14 @@ export const RelationshipProvider: React.FC<{ children?: React.ReactNode }> = ({
             const json = await result.json()
             if (json.docs) {
               dispatchDocuments({
+                type: 'ADD_LOADED',
                 docs: json.docs,
                 idsToLoad,
                 relationTo: slug,
-                type: 'ADD_LOADED',
               })
             }
           } else {
-            dispatchDocuments({ docs: [], idsToLoad, relationTo: slug, type: 'ADD_LOADED' })
+            dispatchDocuments({ type: 'ADD_LOADED', docs: [], idsToLoad, relationTo: slug })
           }
         }
       })
@@ -95,7 +95,7 @@ export const RelationshipProvider: React.FC<{ children?: React.ReactNode }> = ({
 
   const getRelationships = useCallback(
     async (relationships: { relationTo: string; value: number | string }[]) => {
-      dispatchDocuments({ docs: relationships, type: 'REQUEST' })
+      dispatchDocuments({ type: 'REQUEST', docs: relationships })
     },
     [],
   )

packages/next/src/views/List/Default/RelationshipProvider/reducer.ts

@@ -1,6 +1,6 @@
 import type { TypeWithID } from 'payload/types'
 
-import type { Documents } from './index'
+import type { Documents } from './index.js'
 
 type RequestDocuments = {
   docs: { relationTo: string; value: number | string }[]

packages/next/src/views/List/Default/index.tsx

@@ -25,13 +25,13 @@ import {
   SetViewActions,
   UnpublishMany,
 } from '@payloadcms/ui/elements'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import { formatFilesize } from 'payload/utilities'
 import React, { Fragment, useEffect } from 'react'
 
-import type { CollectionComponentMap } from '../../../../../ui/src/utilities/buildComponentMap/types'
+import type { CollectionComponentMap } from '../../../../../ui/src/utilities/buildComponentMap/types.d.ts'
 
-import { RelationshipProvider } from './RelationshipProvider'
+import { RelationshipProvider } from './RelationshipProvider/index.js'
 import './index.scss'
 
 const baseClass = 'collection-list'

packages/next/src/views/List/index.tsx

@@ -4,16 +4,16 @@ import {
   RenderCustomComponent,
   TableColumnsProvider,
 } from '@payloadcms/ui'
-import { notFound } from 'next/navigation'
+import { notFound } from 'next/navigation.js'
 import { isEntityHidden } from 'payload/utilities'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
-import type { DefaultListViewProps, ListPreferences } from './Default/types'
+import type { AdminViewProps } from '../Root/index.d.ts'
+import type { DefaultListViewProps, ListPreferences } from './Default/types.d.ts'
 
-import { DefaultListView } from './Default'
+import { DefaultListView } from './Default/index.js'
 
-export { generateListMetadata } from './meta'
+export { generateListMetadata } from './meta.js'
 
 export const ListView: React.FC<AdminViewProps> = async ({ initPageResult, searchParams }) => {
   const {

packages/next/src/views/List/meta.ts

@@ -1,8 +1,11 @@
-import { meta } from '../../utilities/meta'
+import type { Metadata } from 'next'
+import type { SanitizedCollectionConfig } from 'payload/types'
+
 import { getTranslation } from '@payloadcms/translations'
-import { GenerateViewMetadata } from '../Root'
-import { Metadata } from 'next'
-import { SanitizedCollectionConfig } from 'payload/types'
+
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateListMetadata = async (
   args: Parameters<GenerateViewMetadata>[0] & {

packages/next/src/views/LivePreview/Context/context.ts

@@ -4,8 +4,8 @@ import type { Dispatch } from 'react'
 
 import { createContext, useContext } from 'react'
 
-import type { usePopupWindow } from '../usePopupWindow'
-import type { SizeReducerAction } from './sizeReducer'
+import type { usePopupWindow } from '../usePopupWindow.d.ts'
+import type { SizeReducerAction } from './sizeReducer.d.ts'
 
 export interface LivePreviewContextType {
   appIsReady: boolean

packages/next/src/views/LivePreview/Context/index.tsx

@@ -4,11 +4,11 @@ import type { LivePreviewConfig } from 'payload/config'
 import { DndContext } from '@dnd-kit/core'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import type { usePopupWindow } from '../usePopupWindow'
+import type { usePopupWindow } from '../usePopupWindow.d.ts'
 
-import { customCollisionDetection } from './collisionDetection'
-import { LivePreviewContext } from './context'
-import { sizeReducer } from './sizeReducer'
+import { customCollisionDetection } from './collisionDetection.js'
+import { LivePreviewContext } from './context.js'
+import { sizeReducer } from './sizeReducer.js'
 
 export type LivePreviewProviderProps = {
   appIsReady?: boolean

packages/next/src/views/LivePreview/Device/index.tsx

@@ -2,7 +2,7 @@
 import { useResize } from '@payloadcms/ui'
 import React, { useEffect } from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
+import { useLivePreviewContext } from '../Context/context.js'
 
 export const DeviceContainer: React.FC<{
   children: React.ReactNode

packages/next/src/views/LivePreview/DeviceContainer/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
+import { useLivePreviewContext } from '../Context/context.js'
 
 export const DeviceContainer: React.FC<{
   children: React.ReactNode

packages/next/src/views/LivePreview/IFrame/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { forwardRef } from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
+import { useLivePreviewContext } from '../Context/context.js'
 import './index.scss'
 
 const baseClass = 'live-preview-iframe'

packages/next/src/views/LivePreview/Preview/index.tsx

@@ -10,10 +10,10 @@ import {
 } from '@payloadcms/ui'
 import React, { useEffect } from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
-import { DeviceContainer } from '../Device'
-import { IFrame } from '../IFrame'
-import { LivePreviewToolbar } from '../Toolbar'
+import { useLivePreviewContext } from '../Context/context.js'
+import { DeviceContainer } from '../Device/index.js'
+import { IFrame } from '../IFrame/index.js'
+import { LivePreviewToolbar } from '../Toolbar/index.js'
 import './index.scss'
 
 const baseClass = 'live-preview-window'

packages/next/src/views/LivePreview/Toolbar/Controls/index.tsx

@@ -5,8 +5,8 @@ import type { EditViewProps } from 'payload/types'
 import { Chevron, LinkIcon, Popup, PopupList, X } from '@payloadcms/ui'
 import React from 'react'
 
-import { useLivePreviewContext } from '../../Context/context'
-import { PreviewFrameSizeInput } from '../SizeInput'
+import { useLivePreviewContext } from '../../Context/context.js'
+import { PreviewFrameSizeInput } from '../SizeInput/index.js'
 import './index.scss'
 
 const baseClass = 'live-preview-toolbar-controls'

packages/next/src/views/LivePreview/Toolbar/SizeInput/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { useCallback, useEffect } from 'react'
 
-import { useLivePreviewContext } from '../../Context/context'
+import { useLivePreviewContext } from '../../Context/context.js'
 import './index.scss'
 
 const baseClass = 'toolbar-input'

packages/next/src/views/LivePreview/Toolbar/index.tsx

@@ -5,8 +5,8 @@ import { useDraggable } from '@dnd-kit/core'
 import { DragHandle } from '@payloadcms/ui'
 import React from 'react'
 
-import { useLivePreviewContext } from '../Context/context'
-import { ToolbarControls } from './Controls'
+import { useLivePreviewContext } from '../Context/context.js'
+import { ToolbarControls } from './Controls/index.js'
 import './index.scss'
 
 const baseClass = 'live-preview-toolbar'

packages/next/src/views/LivePreview/index.client.tsx

@@ -19,14 +19,14 @@ import {
 } from '@payloadcms/ui'
 import React, { Fragment, useCallback } from 'react'
 
-import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving'
-import { SetDocumentTitle } from '../Edit/Default/SetDocumentTitle'
-import { SetStepNav } from '../Edit/Default/SetStepNav'
-import { LivePreviewProvider } from './Context'
-import { useLivePreviewContext } from './Context/context'
-import { LivePreview } from './Preview'
+import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving/index.js'
+import { SetDocumentTitle } from '../Edit/Default/SetDocumentTitle/index.js'
+import { SetStepNav } from '../Edit/Default/SetStepNav/index.js'
+import { useLivePreviewContext } from './Context/context.js'
+import { LivePreviewProvider } from './Context/index.js'
+import { LivePreview } from './Preview/index.js'
 import './index.scss'
-import { usePopupWindow } from './usePopupWindow'
+import { usePopupWindow } from './usePopupWindow.js'
 
 const baseClass = 'live-preview'
 

packages/next/src/views/LivePreview/index.tsx

@@ -3,7 +3,7 @@ import type { ServerSideEditViewProps } from 'payload/types'
 
 import React from 'react'
 
-import { LivePreviewClient } from './index.client'
+import { LivePreviewClient } from './index.client.js'
 import './index.scss'
 
 export const LivePreviewView: React.FC = async (props: ServerSideEditViewProps) => {

packages/next/src/views/LivePreview/meta.ts

@@ -2,9 +2,9 @@ import type { Metadata } from 'next'
 
 import { getTranslation } from '@payloadcms/translations'
 
-import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment'
+import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.d.ts'
 
-import { meta } from '../../utilities/meta'
+import { meta } from '../../utilities/meta.js'
 
 export const generateMetadata: GenerateEditViewMetadata = async ({
   collectionConfig,

packages/next/src/views/Login/LoginForm/index.tsx

@@ -9,14 +9,14 @@ import {
   useConfig,
   useTranslation,
 } from '@payloadcms/ui'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React from 'react'
 
 const baseClass = 'login__form'
 
 import type { FormState } from 'payload/types'
 
-import { useRouter } from 'next/navigation'
+import { useRouter } from 'next/navigation.js'
 
 import './index.scss'
 

packages/next/src/views/Login/index.tsx

@@ -1,13 +1,13 @@
 import { Logo } from '@payloadcms/ui'
-import { redirect } from 'next/navigation'
+import { redirect } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.js'
 
-import { LoginForm } from './LoginForm'
+import { LoginForm } from './LoginForm/index.js'
 import './index.scss'
 
-export { generateLoginMetadata } from './meta'
+export { generateLoginMetadata } from './meta.js'
 
 export const loginBaseClass = 'login'
 

packages/next/src/views/Login/meta.ts

@@ -1,5 +1,6 @@
-import { meta } from '../../utilities/meta'
-import { GenerateViewMetadata } from '../Root'
+import type { GenerateViewMetadata } from '../Root/index.js'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateLoginMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) => {
   return meta({

packages/next/src/views/Logout/LogoutClient.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { Button, useTranslation } from '@payloadcms/ui'
 import { useAuth } from '@payloadcms/ui/providers'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React, { Fragment, useEffect } from 'react'
 
 export const LogoutClient: React.FC<{

packages/next/src/views/Logout/index.tsx

@@ -1,14 +1,14 @@
 import { MinimalTemplate } from '@payloadcms/ui'
 import React from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.js'
 
-import { LogoutClient } from './LogoutClient'
+import { LogoutClient } from './LogoutClient.js'
 import './index.scss'
 
 const baseClass = 'logout'
 
-export { generateLogoutMetadata } from './meta'
+export { generateLogoutMetadata } from './meta.js'
 
 export const Logout: React.FC<
   AdminViewProps & {

packages/next/src/views/Logout/meta.ts

@@ -1,5 +1,6 @@
-import { meta } from '../../utilities/meta'
-import { GenerateViewMetadata } from '../Root'
+import type { GenerateViewMetadata } from '../Root/index.js'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateLogoutMetadata: GenerateViewMetadata = async ({ config, i18n: { t } }) => {
   return meta({

packages/next/src/views/NotFound/index.client.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { Button, Gutter, useConfig, useStepNav, useTranslation } from '@payloadcms/ui'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React, { useEffect } from 'react'
 
 import './index.scss'

packages/next/src/views/NotFound/index.tsx

@@ -1,9 +1,10 @@
+import type { SanitizedConfig } from 'payload/types'
+
+import { DefaultTemplate } from '@payloadcms/ui'
 import React from 'react'
 
-import { NotFoundClient } from './index.client'
-import { DefaultTemplate } from '@payloadcms/ui'
-import { SanitizedConfig } from 'payload/types'
-import { initPage } from '../../utilities/initPage'
+import { initPage } from '../../utilities/initPage.js'
+import { NotFoundClient } from './index.client.js'
 
 export const NotFoundView = async ({
   config: configPromise,
@@ -22,8 +23,8 @@ export const NotFoundView = async ({
 
   const initPageResult = await initPage({
     config,
-    searchParams,
     route: '',
+    searchParams,
   })
 
   return (

packages/next/src/views/NotFound/meta.ts

@@ -1,6 +1,7 @@
-import { I18n } from '@payloadcms/translations'
-import { meta } from '../../utilities/meta'
-import { SanitizedConfig } from 'payload/types'
+import type { I18n } from '@payloadcms/translations'
+import type { SanitizedConfig } from 'payload/types'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateNotFoundMeta = ({ config, i18n }: { config: SanitizedConfig; i18n: I18n }) => {
   return meta({

packages/next/src/views/ResetPassword/index.tsx

@@ -8,16 +8,16 @@ import {
   Password,
   Translation,
 } from '@payloadcms/ui'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.js'
 
 import './index.scss'
 
 export const resetPasswordBaseClass = 'reset-password'
 
-export { generateResetPasswordMetadata } from './meta'
+export { generateResetPasswordMetadata } from './meta.js'
 
 export const ResetPassword: React.FC<AdminViewProps> = ({ initPageResult, params }) => {
   const { req } = initPageResult

packages/next/src/views/ResetPassword/meta.ts

@@ -1,5 +1,6 @@
-import { meta } from '../../utilities/meta'
-import { GenerateViewMetadata } from '../Root'
+import type { GenerateViewMetadata } from '../Root/index.js'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateResetPasswordMetadata: GenerateViewMetadata = async ({
   config,

packages/next/src/views/Root/index.tsx

@@ -3,23 +3,23 @@ import type { Metadata } from 'next'
 import type { InitPageResult, SanitizedConfig } from 'payload/types'
 
 import { DefaultTemplate, MinimalTemplate } from '@payloadcms/ui'
-import { notFound, redirect } from 'next/navigation'
+import { notFound, redirect } from 'next/navigation.js'
 import React from 'react'
 
-import { initPage } from '../../utilities/initPage'
-import { Account } from '../Account'
-import { CreateFirstUser } from '../CreateFirstUser'
-import { Dashboard } from '../Dashboard'
-import { Document as DocumentView } from '../Document'
-import { ForgotPassword, forgotPasswordBaseClass } from '../ForgotPassword'
-import { ListView } from '../List'
-import { Login, loginBaseClass } from '../Login'
-import { Logout, LogoutInactivity } from '../Logout'
-import { ResetPassword, resetPasswordBaseClass } from '../ResetPassword'
-import { Unauthorized } from '../Unauthorized'
-import { Verify, verifyBaseClass } from '../Verify'
+import { initPage } from '../../utilities/initPage.js'
+import { Account } from '../Account/index.js'
+import { CreateFirstUser } from '../CreateFirstUser/index.js'
+import { Dashboard } from '../Dashboard/index.js'
+import { Document as DocumentView } from '../Document/index.js'
+import { ForgotPassword, forgotPasswordBaseClass } from '../ForgotPassword/index.js'
+import { ListView } from '../List/index.js'
+import { Login, loginBaseClass } from '../Login/index.js'
+import { Logout, LogoutInactivity } from '../Logout/index.js'
+import { ResetPassword, resetPasswordBaseClass } from '../ResetPassword/index.js'
+import { Unauthorized } from '../Unauthorized/index.js'
+import { Verify, verifyBaseClass } from '../Verify/index.js'
 
-export { generatePageMetadata } from './meta'
+export { generatePageMetadata } from './meta.js'
 
 export type GenerateViewMetadata = (args: {
   config: SanitizedConfig
@@ -86,10 +86,10 @@ export const RootPage = async ({
   const isGlobal = segmentOne === 'globals'
   const isCollection = segmentOne === 'collections'
 
-  let initPageOptions: Parameters<typeof initPage>[0] = {
+  const initPageOptions: Parameters<typeof initPage>[0] = {
     config,
-    searchParams,
     route,
+    searchParams,
   }
 
   // TODO: handle custom routes

packages/next/src/views/Root/meta.ts

@@ -1,17 +1,18 @@
-import { generateAccountMetadata } from '../Account'
-import { generateCreateFirstUserMetadata } from '../CreateFirstUser'
-import { generateDashboardMetadata } from '../Dashboard'
-import { generateForgotPasswordMetadata } from '../ForgotPassword'
-import { generateListMetadata } from '../List'
-import { generateLoginMetadata } from '../Login'
-import { generateResetPasswordMetadata } from '../ResetPassword'
-import { generateUnauthorizedMetadata } from '../Unauthorized'
-import { generateVerifyMetadata } from '../Verify'
-import { Metadata } from 'next'
-import { generateDocumentMetadata } from '../Document/meta'
-import { getNextI18n } from '../../utilities/getNextI18n'
-import { SanitizedConfig } from 'payload/types'
-import { generateNotFoundMeta } from '../NotFound/meta'
+import type { Metadata } from 'next'
+import type { SanitizedConfig } from 'payload/types'
+
+import { getNextI18n } from '../../utilities/getNextI18n.js'
+import { generateAccountMetadata } from '../Account/index.js'
+import { generateCreateFirstUserMetadata } from '../CreateFirstUser/index.js'
+import { generateDashboardMetadata } from '../Dashboard/index.js'
+import { generateDocumentMetadata } from '../Document/meta.js'
+import { generateForgotPasswordMetadata } from '../ForgotPassword/index.js'
+import { generateListMetadata } from '../List/index.js'
+import { generateLoginMetadata } from '../Login/index.js'
+import { generateNotFoundMeta } from '../NotFound/meta.js'
+import { generateResetPasswordMetadata } from '../ResetPassword/index.js'
+import { generateUnauthorizedMetadata } from '../Unauthorized/index.js'
+import { generateVerifyMetadata } from '../Verify/index.js'
 
 const oneSegmentMeta = {
   'create-first-user': generateCreateFirstUserMetadata,
@@ -93,13 +94,13 @@ export const generatePageMetadata = async ({ config: configPromise, params }: Ar
       }
       if (isCollection) {
         // --> /collections/:collectionSlug
-        meta = await generateListMetadata({ config, i18n, collectionConfig })
+        meta = await generateListMetadata({ collectionConfig, config, i18n })
       } else if (isGlobal) {
         // --> /globals/:globalSlug
         meta = await generateDocumentMetadata({
           config,
-          i18n,
           globalConfig,
+          i18n,
           isEditing: false,
           params,
         })
@@ -117,16 +118,16 @@ export const generatePageMetadata = async ({ config: configPromise, params }: Ar
         // --> /collections/:collectionSlug/:id/versions
         // --> /collections/:collectionSlug/:id/versions/:version
         // --> /collections/:collectionSlug/:id/api
-        const isEditing = ['preview', 'versions', 'api', 'create'].includes(segmentTwo)
-        meta = await generateDocumentMetadata({ config, i18n, collectionConfig, isEditing, params })
+        const isEditing = ['api', 'create', 'preview', 'versions'].includes(segmentTwo)
+        meta = await generateDocumentMetadata({ collectionConfig, config, i18n, isEditing, params })
       } else if (isGlobal) {
         // Custom Views
         // --> /globals/:globalSlug/versions
         // --> /globals/:globalSlug/versions/:version
         // --> /globals/:globalSlug/preview
         // --> /globals/:globalSlug/api
-        const isEditing = ['preview', 'versions', 'api', 'create'].includes(segmentTwo)
-        meta = await generateDocumentMetadata({ config, i18n, globalConfig, isEditing, params })
+        const isEditing = ['api', 'create', 'preview', 'versions'].includes(segmentTwo)
+        meta = await generateDocumentMetadata({ config, globalConfig, i18n, isEditing, params })
       }
       break
     }

packages/next/src/views/Unauthorized/UnauthorizedClient.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { Button, useTranslation } from '@payloadcms/ui'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React from 'react'
 
 export const UnauthorizedClient: React.FC<{ logoutRoute: string }> = ({ logoutRoute }) => {

packages/next/src/views/Unauthorized/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.d.ts'
 
-import { UnauthorizedClient } from './UnauthorizedClient'
+import { UnauthorizedClient } from './UnauthorizedClient.js'
 
-export { generateUnauthorizedMetadata } from './meta'
+export { generateUnauthorizedMetadata } from './meta.js'
 
 export const Unauthorized: React.FC<AdminViewProps> = ({ initPageResult }) => {
   const {

packages/next/src/views/Unauthorized/meta.ts

@@ -1,5 +1,6 @@
-import { meta } from '../../utilities/meta'
-import { GenerateViewMetadata } from '../Root'
+import type { GenerateViewMetadata } from '../Root/index.d.ts'
+
+import { meta } from '../../utilities/meta.js'
 
 export const generateUnauthorizedMetadata: GenerateViewMetadata = async ({
   config,

packages/next/src/views/Verify/index.tsx

@@ -1,14 +1,14 @@
 import { Logo } from '@payloadcms/ui'
-import { redirect } from 'next/navigation'
+import { redirect } from 'next/navigation.js'
 import React from 'react'
 
-import type { AdminViewProps } from '../Root'
+import type { AdminViewProps } from '../Root/index.d.ts'
 
 import './index.scss'
 
 export const verifyBaseClass = 'verify'
 
-export { generateVerifyMetadata } from './meta'
+export { generateVerifyMetadata } from './meta.js'
 
 export const Verify: React.FC<AdminViewProps> = async ({ initPageResult, params }) => {
   // /:collectionSlug/verify/:token

packages/next/src/views/Version/Default/index.tsx

@@ -13,15 +13,15 @@ import {
 } from '@payloadcms/ui'
 import React, { useState } from 'react'
 
-import type { CompareOption, DefaultVersionsViewProps } from './types'
+import type { CompareOption, DefaultVersionsViewProps } from './types.d.ts'
 
-import RenderFieldsToDiff from '../RenderFieldsToDiff'
-import diffComponents from '../RenderFieldsToDiff/fields'
-import Restore from '../Restore'
-import { SelectComparison } from '../SelectComparison'
-import { SelectLocales } from '../SelectLocales'
-import { mostRecentVersionOption } from '../shared'
-import { SetStepNav } from './SetStepNav'
+import diffComponents from '../RenderFieldsToDiff/fields/index.js'
+import RenderFieldsToDiff from '../RenderFieldsToDiff/index.js'
+import Restore from '../Restore/index.js'
+import { SelectComparison } from '../SelectComparison/index.js'
+import { SelectLocales } from '../SelectLocales/index.js'
+import { mostRecentVersionOption } from '../shared.js'
+import { SetStepNav } from './SetStepNav.js'
 import './index.scss'
 
 const baseClass = 'view-version'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx

@@ -4,10 +4,10 @@ import { getTranslation } from '@payloadcms/translations'
 import { getUniqueListBy } from 'payload/utilities'
 import React from 'react'
 
-import type { Props } from '../types'
+import type { Props } from '../types.d.ts'
 
-import RenderFieldsToDiff from '../..'
-import Label from '../../Label'
+import Label from '../../Label/index.js'
+import RenderFieldsToDiff from '../../index.js'
 import './index.scss'
 
 const baseClass = 'iterable-diff'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Nested/index.tsx

@@ -1,10 +1,10 @@
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
-import type { Props } from '../types'
+import type { Props } from '../types.d.ts'
 
-import RenderFieldsToDiff from '../..'
-import Label from '../../Label'
+import Label from '../../Label/index.js'
+import RenderFieldsToDiff from '../../index.js'
 import './index.scss'
 
 const baseClass = 'nested-diff'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx

@@ -7,10 +7,10 @@ import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types'
 import React from 'react'
 import ReactDiffViewer from 'react-diff-viewer-continued'
 
-import type { Props } from '../types'
+import type { Props } from '../types.d.ts'
 
-import Label from '../../Label'
-import { diffStyles } from '../styles'
+import Label from '../../Label/index.js'
+import { diffStyles } from '../styles.js'
 import './index.scss'
 
 const baseClass = 'relationship-diff'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx

@@ -4,11 +4,11 @@ import type { OptionObject, SelectField } from 'payload/types'
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
-import type { Props } from '../types'
+import type { Props } from '../types.d.ts'
 
-import Label from '../../Label'
-import { diffStyles } from '../styles'
-import { DiffViewer } from './DiffViewer'
+import Label from '../../Label/index.js'
+import { diffStyles } from '../styles.js'
+import { DiffViewer } from './DiffViewer/index.js'
 import './index.scss'
 
 const baseClass = 'select-diff'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import type { Props } from '../types'
+import type { Props } from '../types.d.ts'
 
-import RenderFieldsToDiff from '../..'
-import Nested from '../Nested'
+import RenderFieldsToDiff from '../../index.js'
+import Nested from '../Nested/index.js'
 
 const baseClass = 'tabs-diff'
 

packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/index.tsx

@@ -1,11 +1,11 @@
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
-import type { Props } from '../types'
+import type { Props } from '../types.d.ts'
 
-import Label from '../../Label'
-import { diffStyles } from '../styles'
-import { DiffViewer } from './DiffViewer'
+import Label from '../../Label/index.js'
+import { diffStyles } from '../styles.js'
+import { DiffViewer } from './DiffViewer/index.js'
 import './index.scss'
 
 const baseClass = 'text-diff'

packages/next/src/views/Version/RenderFieldsToDiff/fields/index.tsx

@@ -1,9 +1,9 @@
-import Iterable from './Iterable'
-import Nested from './Nested'
-import Relationship from './Relationship'
-import Select from './Select'
-import Tabs from './Tabs'
-import Text from './Text'
+import Iterable from './Iterable/index.js'
+import Nested from './Nested/index.js'
+import Relationship from './Relationship/index.js'
+import Select from './Select/index.js'
+import Tabs from './Tabs/index.js'
+import Text from './Text/index.js'
 
 export default {
   array: Iterable,

packages/next/src/views/Version/RenderFieldsToDiff/index.tsx

@@ -3,10 +3,10 @@ import type { DiffMethod } from 'react-diff-viewer-continued'
 
 import React from 'react'
 
-import type { FieldDiffProps, Props } from './types'
+import type { FieldDiffProps, Props } from './types.d.ts'
 
-import Nested from './fields/Nested'
-import { diffMethods } from './fields/diffMethods'
+import Nested from './fields/Nested/index.js'
+import { diffMethods } from './fields/diffMethods.js'
 import './index.scss'
 
 const baseClass = 'render-field-diffs'
@@ -57,7 +57,7 @@ const RenderFieldsToDiff: React.FC<Props> = ({
               fieldPermissions: subFieldPermissions,
               i18n,
               isRichText,
-              locales: locales,
+              locales,
               version: versionValue,
             }
 

packages/next/src/views/Version/RenderFieldsToDiff/types.ts

@@ -3,7 +3,7 @@ import type { FieldMap, MappedField } from '@payloadcms/ui'
 import type { FieldPermissions } from 'payload/auth'
 import type { DiffMethod } from 'react-diff-viewer-continued'
 
-import type { DiffComponents } from './fields/types'
+import type { DiffComponents } from './fields/types.d.ts'
 
 export type Props = {
   comparison: Record<string, any>

packages/next/src/views/Version/Restore/index.tsx

@@ -12,7 +12,7 @@ import {
 import React, { Fragment, useCallback, useState } from 'react'
 import { toast } from 'react-toastify'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
 // import { requests } from '../../../../api'
 import './index.scss'

packages/next/src/views/Version/SelectComparison/index.tsx

@@ -7,9 +7,9 @@ import { ReactSelect, fieldBaseClass, formatDate, useConfig } from '@payloadcms/
 import qs from 'qs'
 import React, { useCallback, useEffect, useState } from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
-import { mostRecentVersionOption, publishedVersionOption } from '../shared'
+import { mostRecentVersionOption, publishedVersionOption } from '../shared.js'
 import './index.scss'
 
 const baseClass = 'compare-version'

packages/next/src/views/Version/SelectComparison/types.ts

@@ -1,7 +1,7 @@
 import type { PaginatedDocs } from 'payload/database'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import type { CompareOption } from '../Default/types'
+import type { CompareOption } from '../Default/types.d.ts'
 
 export type Props = {
   baseURL: string

packages/next/src/views/Version/SelectLocales/index.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from '@payloadcms/ui'
 import { ReactSelect, useLocale } from '@payloadcms/ui'
 import React from 'react'
 
-import type { Props } from './types'
+import type { Props } from './types.d.ts'
 
 import './index.scss'
 

packages/next/src/views/Version/index.tsx

@@ -2,10 +2,10 @@ import type { Option } from '@payloadcms/ui'
 import type { CollectionPermission, GlobalPermission } from 'payload/auth'
 import type { Document, ServerSideEditViewProps } from 'payload/types'
 
-import { notFound } from 'next/navigation'
+import { notFound } from 'next/navigation.js'
 import React from 'react'
 
-import { DefaultVersionView } from './Default'
+import { DefaultVersionView } from './Default/index.js'
 
 export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
   const { initPageResult, routeSegments } = props

packages/next/src/views/Version/meta.ts

@@ -3,9 +3,9 @@ import type { Metadata } from 'next'
 import { getTranslation } from '@payloadcms/translations'
 import { formatDate } from '@payloadcms/ui'
 
-import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment'
+import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.d.ts'
 
-import { meta } from '../../utilities/meta'
+import { meta } from '../../utilities/meta.js'
 
 export const generateMetadata: GenerateEditViewMetadata = async ({
   collectionConfig,

packages/next/src/views/Versions/buildColumns.tsx

@@ -9,9 +9,9 @@ import type {
 import { SortColumn } from '@payloadcms/ui'
 import React from 'react'
 
-import { AutosaveCell } from './cells/AutosaveCell'
-import { CreatedAtCell } from './cells/CreatedAt'
-import { IDCell } from './cells/ID'
+import { AutosaveCell } from './cells/AutosaveCell/index.js'
+import { CreatedAtCell } from './cells/CreatedAt/index.js'
+import { IDCell } from './cells/ID/index.js'
 
 export const buildVersionColumns = ({
   collectionConfig,

packages/next/src/views/Versions/cells/CreatedAt/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { formatDate, useConfig, useTableCell, useTranslation } from '@payloadcms/ui'
-import Link from 'next/link'
+import Link from 'next/link.js'
 import React from 'react'
 
 type CreatedAtCellProps = {

packages/next/src/views/Versions/index.client.tsx

@@ -14,7 +14,7 @@ import {
   usePayloadAPI,
   useTranslation,
 } from '@payloadcms/ui'
-import { useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation.js'
 import React, { Fragment, useEffect, useRef } from 'react'
 
 export const VersionsViewClient: React.FC<{

packages/next/src/views/Versions/index.tsx

@@ -1,12 +1,12 @@
 import type { ServerSideEditViewProps } from 'payload/types'
 
 import { Gutter } from '@payloadcms/ui'
-import { notFound } from 'next/navigation'
+import { notFound } from 'next/navigation.js'
 import React from 'react'
 
-import { SetStepNav } from '../Edit/Default/SetStepNav'
-import { buildVersionColumns } from './buildColumns'
-import { VersionsViewClient } from './index.client'
+import { SetStepNav } from '../Edit/Default/SetStepNav/index.js'
+import { buildVersionColumns } from './buildColumns.js'
+import { VersionsViewClient } from './index.client.js'
 import './index.scss'
 
 export const baseClass = 'versions'

packages/next/src/views/Versions/meta.ts

@@ -2,9 +2,9 @@ import type { Metadata } from 'next'
 
 import { getTranslation } from '@payloadcms/translations'
 
-import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment'
+import type { GenerateEditViewMetadata } from '../Document/getMetaBySegment.d.ts'
 
-import { meta } from '../../utilities/meta'
+import { meta } from '../../utilities/meta.js'
 
 export const generateMetadata: GenerateEditViewMetadata = async ({
   collectionConfig,