Firstset · bernatfp · Oct 14, 2025 · Oct 13, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git a/app/[[...mdxPath]]/page.tsx b/app/[[...mdxPath]]/page.tsx
@@ -0,0 +1,30 @@
+import { generateStaticParamsFor, importPage } from 'nextra/pages'
+import { useMDXComponents as getMDXComponents } from '../../mdx-components'
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+
+const Wrapper = getMDXComponents().wrapper
+
+export async function generateMetadata(props: {
+  params: Promise<{ mdxPath?: string[] }>
+}) {
+  const params = await props.params
+  const { metadata } = await importPage(params.mdxPath)
+  return metadata
+}
+
+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>
+  )
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,104 @@
+import type { Metadata, Viewport } from 'next'
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+import { Inter } from 'next/font/google'
+import { Footer, Layout, Navbar } from 'nextra-theme-docs'
+import { Head } from 'nextra/components'
+import { getPageMap } from 'nextra/page-map'
+
+import 'nextra-theme-docs/style.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://docs.brasa.finance'
+
+export const metadata: Metadata = {
+  metadataBase: new URL(siteUrl),
+  title: {
+    default: 'Brasa Docs',
+    template: '%s | Brasa Docs',
+  },
+  description: 'Brasa LST documentation site',
+  icons: {
+    icon: '/favicon.svg',
+    apple: '/apple-touch-icon.png',
+  },
+}
+
+export const viewport: Viewport = {
+  themeColor: '#FC502C',
+}
+
+const Logo = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+    <img src="/Logo-md-orange.svg" alt="Brasa" style={{ height: 28 }} />
+  </div>
+)
+
+const navbar = (
+  <Navbar logo={<Logo />} projectLink="https://github.com/firstset/brasa-docs" />
+)
+
+const footer = (
+  <Footer>
+    <div style={{ width: '100%' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: '1rem',
+        }}
+      >
+        <div>
+          <p style={{ margin: 0 }}>© 2025 Brasa Finance. All rights reserved.</p>
+        </div>
+        <div style={{ display: 'flex', gap: '1.5rem' }}>
+          <a href="https://brasa.finance" target="_blank" rel="noopener noreferrer">
+            Website
+          </a>
+          <a
+            href="https://twitter.com/brasafinance"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            X
+          </a>
+          <a
+            href="https://github.com/brasa-finance"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub
+          </a>
+          <Link href="/legal/terms">Terms</Link>
+        </div>
+      </div>
+    </div>
+  </Footer>
+)
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" dir="ltr" suppressHydrationWarning className={inter.className}>
+      <Head
+        color={{
+          hue: 14,
+          saturation: 100,
+          lightness: 47,
+        }}
+      />
+      <body>
+        <Layout
+          navbar={navbar}
+          pageMap={await getPageMap()}
+          docsRepositoryBase="https://github.com/firstset/brasa-docs/tree/main"
+          footer={footer}
+        >
+          {children}
+        </Layout>
+      </body>
+    </html>
+  )
+}
diff --git a/components/mdx/ContractAddress.tsx b/components/mdx/ContractAddress.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 
 interface ContractAddressProps {

diff --git a/components/mdx/Tabs.tsx b/components/mdx/Tabs.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 
 interface TabProps {

diff --git a/pages/_meta.ts → content/_meta.ts b/pages/_meta.ts → content/_meta.ts
diff --git a/pages/concepts/_meta.ts → content/concepts/_meta.ts b/pages/concepts/_meta.ts → content/concepts/_meta.ts
diff --git a/pages/concepts/what-is-brasa.mdx → content/concepts/what-is-brasa.mdx b/pages/concepts/what-is-brasa.mdx → content/concepts/what-is-brasa.mdx
diff --git a/pages/getting-started/_meta.ts → content/getting-started/_meta.ts b/pages/getting-started/_meta.ts → content/getting-started/_meta.ts
diff --git a/pages/getting-started/faq.mdx → content/getting-started/faq.mdx b/pages/getting-started/faq.mdx → content/getting-started/faq.mdx
diff --git a/pages/getting-started/overview.mdx → content/getting-started/overview.mdx b/pages/getting-started/overview.mdx → content/getting-started/overview.mdx
diff --git a/pages/getting-started/quickstart.mdx → content/getting-started/quickstart.mdx b/pages/getting-started/quickstart.mdx → content/getting-started/quickstart.mdx
diff --git a/pages/index.mdx → content/index.mdx b/pages/index.mdx → content/index.mdx
diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -1,15 +1,17 @@
-import { Callout, Tabs, Tab, Badge, Steps, Step, ContractAddress } from './components/mdx'
+import { useMDXComponents as getThemeComponents } from 'nextra-theme-docs'
+import { Callout } from 'nextra/components'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useMDXComponents(components: any) {
-  return {
+import { Badge, ContractAddress, Steps, Step, Tabs, Tab } from './components/mdx'
+
+export function useMDXComponents(components = {}) {
+  return getThemeComponents({
     ...components,
     Callout,
     Tabs,
     Tab,
-    Badge,
     Steps,
     Step,
+    Badge,
     ContractAddress,
-  }
+  })
 }
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,8 +1,6 @@
 import nextra from 'nextra'
 
 const withNextra = nextra({
-  theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.tsx',
   defaultShowCopyCode: true,
   latex: false,
   search: {
@@ -22,6 +20,8 @@ export default withNextra({
   },
   // Disable server-side features for static export
   trailingSlash: true,
+  // Explicitly set the project root for file tracing
+  outputFileTracingRoot: import.meta.dirname,
   // Environment variables
   env: {
     NEXT_PUBLIC_SITE_URL:

diff --git a/package.json b/package.json
@@ -15,23 +15,23 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "next": "^14.2.16",
-    "nextra": "^3.3.1",
-    "nextra-theme-docs": "^3.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "shiki": "^1.24.2"
+    "next": "^15.0.2",
+    "nextra": "^4.0.0",
+    "nextra-theme-docs": "^4.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "shiki": "^3.2.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.4",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^14.2.16",
+    "eslint-config-next": "^15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "husky": "^9.1.7",

diff --git a/pages/_app.tsx b/pages/_app.tsx
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}