docs: migrate to Nextra 3 with directory-based i18n

docs/next.config.mjs

@@ -0,0 +1,24 @@
+import nextra from 'nextra';
+import { remarkSandpack } from 'remark-sandpack';
+
+const withNextra = nextra({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.tsx',
+  defaultShowCopyCode: true,
+  mdxOptions: {
+    remarkPlugins: [remarkSandpack],
+  },
+});
+
+/** @type {import('next').NextConfig} */
+export default withNextra({
+  async redirects() {
+    return [
+      {
+        source: '/docs/:path*',
+        destination: '/en/docs/:path*',
+        permanent: true,
+      },
+    ];
+  },
+});

docs/package.json

@@ -12,8 +12,8 @@
     "@codesandbox/sandpack-react": "^2.14.5",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "next": "14.2.4",
-    "nextra": "^2.13.4",
-    "nextra-theme-docs": "^2.13.4",
+    "nextra": "^3.0.0",
+    "nextra-theme-docs": "^3.0.0",
     "react": "^18",
     "react-dom": "^18",
     "react-tooltip": "^5.27.1",

docs/src/components/HomePage.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
-import { Link } from 'nextra-theme-docs';
+import Link from 'next/link';
+import { useRouter } from 'next/router.js';
 
 export const HomePage = ({
   title,
@@ -12,6 +13,9 @@ export const HomePage = ({
   buttonText: string;
   items: { title: string; desc: string }[];
 }) => {
+  const { asPath } = useRouter();
+  const locale = asPath.startsWith('/ko') ? 'ko' : 'en';
+
   return (
     <div className="flex md:h-[calc(100vh-162px)] pt-12">
       <div className="flex flex-col md:h-full md:mr-8 flex-1">
@@ -22,8 +26,8 @@ export const HomePage = ({
             <p className="text-2xl max-lg:text-xl leading-normal break-words">{description}</p>
           </h1>
           <div>
-            <Link href="/docs/overview">
-              <span className="inline-block rounded-xl nx-bg-gray-100 dark:nx-bg-neutral-800 px-10 py-3 text-xl font-bold hover:bg-gray-200">
+            <Link href={`/${locale}/docs/overview`}>
+              <span className="inline-block rounded-xl bg-neutral-800 dark:bg-gray-100 text-white dark:text-black px-10 py-3 text-xl font-bold hover:bg-neutral-700 dark:hover:bg-gray-200">
                 {buttonText}
               </span>
             </Link>

docs/src/pages/_app.mdx → docs/src/pages/_app.tsx

@@ -1,8 +1,9 @@
 import '../styles/globals.css';
 
+import type { AppProps } from 'next/app';
 import { Tooltip } from 'react-tooltip';
 
-export default function App({ Component, pageProps }) {
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Component {...pageProps} />

docs/src/pages/_meta.ts

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    type: 'page',
+    title: 'English',
+  },
+  ko: {
+    type: 'page',
+    title: '한국어',
+  },
+};

docs/src/pages/en/_meta.ts

@@ -0,0 +1,13 @@
+export default {
+  index: {
+    type: 'page',
+    display: 'hidden',
+    theme: {
+      layout: 'full',
+    },
+  },
+  docs: {
+    type: 'page',
+    title: 'View Docs',
+  },
+};

docs/src/pages/en/docs/_meta.ts

@@ -0,0 +1,35 @@
+export default {
+  '--- introduction': {
+    type: 'separator',
+    title: 'Introduction',
+  },
+  overview: 'Overview',
+  features: 'Main Features',
+  '--- Guide': {
+    type: 'separator',
+    title: 'Guide',
+  },
+  install: 'Installation',
+  'get-started': 'Getting Started',
+  migration: 'Migrating from @toss/use-funnel',
+  '--- Reference': {
+    type: 'separator',
+    title: 'Reference',
+  },
+  'use-funnel': 'useFunnel()',
+  'funnel-render': 'funnel.Render Component',
+  '--- Advanced': {
+    type: 'separator',
+    title: 'Advanced',
+  },
+  'context-guide': 'Step-by-Step Definition of context',
+  'sub-funnel': 'Creating a Funnel within a Funnel',
+  'custom-router': 'Creating a Custom Router',
+  'transition-event': 'Define Transition Events',
+  overlay: 'Using Overlay',
+  '--- Examples': {
+    type: 'separator',
+    title: 'Examples',
+  },
+  examples: 'Examples',
+};