Upgrade to Nextra 4

app/[[...mdxPath]]/page.tsx

@@ -0,0 +1,23 @@
+import { generateStaticParamsFor, importPage } from 'nextra/pages'
+import { useMDXComponents as getMDXComponents } from '../../mdx-components'
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+
+export async function generateMetadata(props: { params: Promise<{ mdxPath?: string[] }> }) {
+  const params = await props.params
+  const { metadata } = await importPage(params.mdxPath)
+  return metadata
+}
+
+const Wrapper = getMDXComponents().wrapper
+
+export default async function Page(props: { params: Promise<{ mdxPath?: string[] }> }) {
+  const params = await props.params
+  const { default: MDXContent, toc, metadata, sourceCode } = await importPage(params.mdxPath)
+
+  return (
+    <Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  )
+}

app/api/og/route.tsx

@@ -0,0 +1,70 @@
+import { ImageResponse } from 'next/og'
+
+export const runtime = 'edge'
+
+export async function GET(request: Request) {
+  const baseUrl =
+    process.env.NEXT_PUBLIC_BASE_URL || (process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : 'https://tilekit.dev')
+  const imageResponse = await fetch(`${baseUrl}/dark.png`)
+  const imageData = await imageResponse.arrayBuffer()
+  const imageBase64 = Buffer.from(imageData).toString('base64')
+  const imageDataUrl = `data:image/png;base64,${imageBase64}`
+
+  const { searchParams } = new URL(request.url)
+  const title =
+    searchParams.get('title') || 'Modelfile based SDK that lets developers customize open models and agent experiences'
+  const description =
+    searchParams.get('description') || 'Modelfile based SDK that lets developers customize open models and agent experiences'
+  const displayText = description || title
+
+  return new ImageResponse(
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#0E0E0D',
+        padding: '60px',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '40px',
+        }}
+      >
+        <img
+          src={imageDataUrl}
+          alt="Tilekit Logo"
+          style={{
+            width: '200px',
+            height: '200px',
+            objectFit: 'contain',
+          }}
+        />
+      </div>
+
+      <div
+        style={{
+          color: '#ffffff',
+          fontSize: 28,
+          textAlign: 'center',
+          maxWidth: 900,
+          lineHeight: 1.4,
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+        }}
+      >
+        {displayText}
+      </div>
+    </div>,
+    {
+      width: 1200,
+      height: 630,
+    },
+  )
+}

app/layout.tsx

@@ -0,0 +1,97 @@
+import type { Metadata, Viewport } from 'next'
+import type React from 'react'
+import { Banner, Head } from 'nextra/components'
+import { Footer, Layout, Navbar } from 'nextra-theme-docs'
+import { getPageMap } from 'nextra/page-map'
+import { Logo } from '../components/logo'
+import './globals.css'
+import 'nextra-theme-docs/style.css'
+
+const title = 'Tilekit'
+const description =
+  'Tilekit is a Rust-based declarative, cross-platform Modelfile-based SDK that lets developers customize open models and agent experiences. Build, run, and share fine-tuned open models with ease.'
+
+export const metadata: Metadata = {
+  title: {
+    default: title,
+    template: '%s',
+  },
+  description,
+  applicationName: 'Tilekit',
+  metadataBase: new URL('https://tilekit.dev'),
+  keywords: [
+    'Tilekit',
+    'Modelfile',
+    'Rust SDK',
+    'open models',
+    'AI models',
+    'model customization',
+    'agent experiences',
+    'Ollama',
+    'machine learning',
+    'LLM',
+    'fine-tuning',
+  ],
+  authors: [{ name: 'Tilekit' }],
+  openGraph: {
+    title,
+    description,
+    url: './',
+    siteName: 'Tilekit',
+    locale: 'en_US',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    site: '@tileslauncher',
+    creator: '@tileslauncher',
+  },
+  icons: {
+    icon: [
+      { url: '/favicon-96x96.png', sizes: '96x96', type: 'image/png' },
+      { url: '/favicon.svg', type: 'image/svg+xml' },
+      { url: '/favicon.ico' },
+    ],
+    apple: '/apple-touch-icon.png',
+    shortcut: '/favicon.ico',
+  },
+}
+
+export const viewport: Viewport = {
+  themeColor: '#A32026',
+}
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const pageMap = await getPageMap()
+
+  const navbar = (
+    <Navbar
+      logo={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <Logo width={24} height={24} />
+          <span>Tilekit SDK</span>
+        </div>
+      }
+      projectLink="https://github.com/tilesprivacy/tilekit"
+      chatLink="https://go.tiles.run/discord"
+    />
+  )
+
+  return (
+    <html lang="en" dir="ltr" suppressHydrationWarning>
+      <Head />
+      <body>
+        <Layout
+          banner={<Banner storageKey="Tilekit Docs">Join the community on Discord</Banner>}
+          navbar={navbar}
+          footer={<Footer>(C) 2025 Tiles Privacy</Footer>}
+          editLink="Edit this page on GitHub"
+          docsRepositoryBase="https://github.com/tilesprivacy/tilekit-docs"
+          pageMap={pageMap}
+        >
+          {children}
+        </Layout>
+      </body>
+    </html>
+  )
+}

mdx-components.tsx

@@ -0,0 +1,9 @@
+import type { MDXComponents } from 'nextra/mdx-components'
+import { useMDXComponents as getDocsMDXComponents } from 'nextra-theme-docs'
+
+export function useMDXComponents(components: MDXComponents = {}): MDXComponents {
+  return {
+    ...getDocsMDXComponents(),
+    ...components,
+  }
+}

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.mjs

@@ -0,0 +1,5 @@
+import nextra from 'nextra'
+
+const withNextra = nextra({})
+
+export default withNextra({})