feat: Migrate from pages directory to app router

app/admin/add-unclaimed-node/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/admin/add-unclaimed-node'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/admin/claim-nodes/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/admin/claim-nodes'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/admin/node-version-compatibility/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/admin/node-version-compatibility'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/admin/nodes/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/admin/nodes'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/admin/nodeversions/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/admin/nodeversions'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/admin/page.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { Breadcrumb } from 'flowbite-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import {
+  HiHome,
+  HiOutlineAdjustments,
+  HiOutlineClipboardCheck,
+  HiOutlineCollection,
+} from 'react-icons/hi'
+import AdminTreeNavigation from '@/components/admin/AdminTreeNavigation'
+import withAdmin from '@/components/common/HOC/authAdmin'
+import { useNextTranslation } from '@/src/hooks/i18n'
+
+function AdminDashboard() {
+  const router = useRouter()
+  const { t } = useNextTranslation()
+
+  return (
+    <div className="p-4">
+      <Breadcrumb className="py-4">
+        <Breadcrumb.Item href="/" icon={HiHome} className="dark">
+          {t('Home')}
+        </Breadcrumb.Item>
+        <Breadcrumb.Item href="#" className="dark">
+          {t('Admin Dashboard')}
+        </Breadcrumb.Item>
+      </Breadcrumb>
+
+      <h1 className="text-2xl font-bold text-gray-200 mb-6">
+        {t('Admin Dashboard')}
+      </h1>
+
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div className="lg:col-span-1">
+          <AdminTreeNavigation />
+        </div>
+
+        <div className="lg:col-span-3">
+          <div className="bg-gray-800 rounded-lg p-6">
+            <h2 className="text-xl font-semibold text-gray-200 mb-4">
+              {t('Quick Actions')}
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Link
+                href="/admin/search-ranking"
+                className="bg-blue-600 hover:bg-blue-700 text-white rounded-lg p-4 flex items-center transition-colors"
+              >
+                <HiOutlineAdjustments className="h-8 w-8 mr-3" />
+                <span>{t('Search Ranking Table')}</span>
+              </Link>
+              <Link
+                href="/admin/nodeversions?filter=flagged"
+                className="bg-yellow-600 hover:bg-yellow-700 text-white rounded-lg p-4 flex items-center transition-colors"
+              >
+                <HiOutlineClipboardCheck className="h-8 w-8 mr-3" />
+                <span>{t('Review Flagged Versions')}</span>
+              </Link>
+              <Link
+                href="/admin/claim-nodes"
+                className="bg-green-600 hover:bg-green-700 text-white rounded-lg p-4 flex items-center transition-colors"
+              >
+                <HiOutlineCollection className="h-8 w-8 mr-3" />
+                <span>{t('Manage Unclaimed Nodes')}</span>
+              </Link>
+              <Link
+                href="/admin/nodes"
+                className="bg-purple-600 hover:bg-purple-700 text-white rounded-lg p-4 flex items-center transition-colors"
+              >
+                <HiOutlineCollection className="h-8 w-8 mr-3" />
+                <span>{t('Manage All Nodes')}</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const WrappedAdminDashboard = withAdmin(AdminDashboard)
+
+export default function Page() {
+  return <WrappedAdminDashboard />
+}
+
+export const dynamic = 'force-dynamic'

app/admin/preempted-comfy-node-names/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/admin/preempted-comfy-node-names'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/admin/search-ranking/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/admin/search-ranking'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/auth/login/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import SignIn from '@/components/AuthUI/AuthUI'
+
+export default function SignInPage() {
+  return <SignIn />
+}

app/auth/logout/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import Logout from '@/components/AuthUI/Logout'
+
+export default function LogoutPage() {
+  return <Logout />
+}

app/auth/signup/page.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import SignIn from '@/components/AuthUI/AuthUI'
+
+export default function SignUpPage() {
+  return <SignIn />
+}

app/layout.tsx

@@ -0,0 +1,32 @@
+import i18next from 'i18next'
+import { Metadata } from 'next'
+import { Providers } from './providers'
+import '../styles/globals.css'
+
+export const metadata: Metadata = {
+  title: 'ComfyUI Registry',
+  description: 'Discover and install ComfyUI custom nodes.',
+  icons: {
+    icon: '/favicon.ico',
+  },
+}
+
+export const dynamic = 'force-dynamic'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // Default to 'en', will be handled by i18n middleware/client-side detection
+  const locale = 'en'
+  const dir = i18next.dir(locale)
+
+  return (
+    <html lang={locale} dir={dir}>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}

app/nodes/[nodeId]/claim/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/nodes/claim'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/nodes/[nodeId]/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/nodes/[nodeId]'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/nodes/page.tsx

@@ -0,0 +1,5 @@
+import Registry from '@/components/registry/Registry'
+
+export default function NodeList() {
+  return <Registry />
+}

app/page.tsx

@@ -0,0 +1,5 @@
+import Registry from '@/components/registry/Registry'
+
+export default function Home() {
+  return <Registry />
+}

app/providers.tsx

@@ -0,0 +1,126 @@
+'use client'
+
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { persistQueryClient } from '@tanstack/react-query-persist-client'
+import { AxiosResponse } from 'axios'
+import { getAuth } from 'firebase/auth'
+import { ThemeModeScript } from 'flowbite-react'
+import { useEffect, useState } from 'react'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { DIE } from 'phpdie'
+import { AXIOS_INSTANCE } from '@/src/api/mutator/axios-instance'
+import app from '@/src/firebase'
+import FlowBiteThemeProvider from '../components/flowbite-theme'
+import Layout from '../components/layout'
+
+// Add an interceptor to attach the Firebase JWT token to every request
+AXIOS_INSTANCE.interceptors.request.use(async (config) => {
+  const auth = getAuth(app)
+  const user = auth.currentUser
+  if (user) {
+    const token = await user.getIdToken()
+    sessionStorage.setItem('idToken', token)
+    config.headers.Authorization = `Bearer ${token}`
+  } else {
+    const cachedIdtoken = sessionStorage.getItem('idToken') ?? ''
+    if (cachedIdtoken) config.headers.Authorization = `Bearer ${cachedIdtoken}`
+  }
+  return config
+})
+
+const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: (failureCount, error: any) => {
+          // Don't retry on 404s
+          if (error?.response?.status === 404) return false
+
+          // Retry up to 3 times for other errors
+          return failureCount < 3
+        },
+        staleTime: 0, // set to 0 to always query fresh data when page refreshed, and render staled data while requesting (swr)
+        gcTime: 86400e3,
+      },
+    },
+  })
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => createQueryClient())
+
+  useEffect(() => {
+    // General localStorage cache invalidation for all endpoints
+    // this interceptors will user always have latest data after edit.
+    const responseInterceptor = AXIOS_INSTANCE.interceptors.response.use(
+      function onSuccess(response: AxiosResponse) {
+        const req = response.config
+        if (!req.url) return response
+
+        const baseURL =
+          req.baseURL ??
+          globalThis.location.origin ??
+          DIE('Remember to fill window.location when testing axios')
+        const pathname = new URL(req.url, baseURL).pathname
+
+        const isCreateMethod = ['POST'].includes(
+          req.method!.toUpperCase() ?? ''
+        )
+        const isEditMethod = ['PUT', 'PATCH', 'DELETE'].includes(
+          req.method!.toUpperCase() ?? ''
+        )
+
+        if (isCreateMethod) {
+          queryClient.invalidateQueries({ queryKey: [pathname] })
+        }
+        if (isEditMethod) {
+          queryClient.invalidateQueries({ queryKey: [pathname] })
+          queryClient.invalidateQueries({
+            queryKey: [pathname.split('/').slice(0, -1).join('/')],
+          })
+        }
+        return response
+      },
+      (error) => {
+        return Promise.reject(error)
+      }
+    )
+
+    // Persist query client
+    const [unsubscribe] = persistQueryClient({
+      queryClient: queryClient as any,
+      persister: createSyncStoragePersister({
+        storage: window.localStorage,
+        key: 'comfy-registry-cache',
+      }),
+      // Only persist queries with these query keys
+      dehydrateOptions: {
+        shouldDehydrateQuery: ({ queryKey, state }) => {
+          // Don't persist pending queries as they can't be properly restored
+          if (state.status === 'pending') return false
+
+          // Persist all queries in localStorage, share across tabs
+          return true
+        },
+      },
+      maxAge: 86400e3, // 1 day in milliseconds
+      buster: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA ?? 'v1',
+    })
+
+    return () => {
+      AXIOS_INSTANCE.interceptors.response.eject(responseInterceptor)
+      unsubscribe()
+    }
+  }, [queryClient])
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeModeScript />
+      <FlowBiteThemeProvider>
+        <Layout>{children}</Layout>
+        <ToastContainer />
+      </FlowBiteThemeProvider>
+    </QueryClientProvider>
+  )
+}

app/publishers/[publisherId]/claim-my-node/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/publishers/claim-my-node'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'

app/publishers/[publisherId]/nodes/[nodeId]/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Component from '@/components/pages/publishers/[nodeId]'
+
+export default function Page() {
+  return <Component />
+}
+
+export const dynamic = 'force-dynamic'