How to setup i18n with different internationalization package correctly #932

huskyjp · 2024-10-05T16:10:36Z

huskyjp
Oct 5, 2024

I have an existing project which utilizing the next-international, and I want to incorporate with the fumadocs i18n setup. However, fumadocs does not recognize the i18n config with current setup properly. As a result, I can't retrieve the mdx content from the current locale like index.fr.mdx.

I didn't add the fumadocs-core/i18n in middleware since I already have next-international middleware handling the entire project locale, but it maybe causing this issue?

Here is the breakdown of how my current setup structure does.

First, I have middleware next-international like this:

const I18nMiddleware = createI18nMiddleware({
  locales: ["en", "fr"],
  defaultLocale: "en",
  urlMappingStrategy: "rewriteDefault",
})

Then create the fumadocs i18n config like this:

import type { I18nConfig } from "fumadocs-core/i18n"

export const mdxi18n: I18nConfig = {
  languages: ["en", "fr"],
  defaultLanguage: "en",
  hideLocale: "default-locale",
}

And this is my source.ts && source-config.ts

// source.ts
import { docs, meta } from '@/.source'
import { loader } from "fumadocs-core/source"
import { createMDXSource } from "fumadocs-mdx"
import { mdxi18n } from "@/utils/mdx-i18n"

export const source = loader({
  source: createMDXSource(docs, meta),
  baseUrl: "./docs", // I needed to change this because I am using src/ structure?
  mdxi18n,
})

//source-config.ts
import { defineConfig, defineDocs } from "fumadocs-mdx/config"

export const { docs, meta } = defineDocs()

export default defineConfig({})

Then, this is the src/app/[locale]/docs/[[...slug]]/page.tsx. If I add the params.locale into source.getPage(prams.slug, params.locale), it returns error since the page` is undefined (without params.locale, it just shows the default locale mdx file contents.)

export default async function Page(props: {
  params: Promise<{ locale: string; slug?: string[] }>
}) {
  const params = await props.params

  const page = source.getPage(params.slug)
  const MDX = page.data.body

  console.log(page)

  if (!page) notFound()

  return (
    <DocsPage
     ....
    </DocsPage>
  )
}

export async function generateStaticParams() {
  return source.generateParams()
}

export async function generateMetadata(props: {
  params: Promise<{ lang: string; slug?: string[] }>
}) {
  const params = await props.params
  const page = source.getPage(params.slug, params.lang)
  if (!page) notFound()

  return (
    page.slugs,
    {
      title: page.data.title,
      description: page.data.description,
    }
  )
}

As noted in the docs, I wrapped with the I18nProvider in the root layout like this:

...
<body>
        <I18nProvider
          locale={locale}
          locales={[
            {
              name: "English",
              locale: "en",
            },
            {
              name: "French",
              locale: "fr",
            },
          ]}
        >
          <Providers locale={locale}> // It does contain the next-international locale provider
                  {children}
          </Providers>
        </I18nProvider>
      </body>

Do you see any problem? @fuma-nama

huskyjp · 2024-10-05T16:19:17Z

huskyjp
Oct 5, 2024
Author

This is my project structure!

.
├── content/docs/index.mdx   # Also, index.fr.mdx
├── src
│   ├── app 
│      ├── [locale] 
│          ├── docs/[[...slug]].tsx
│          ├── layout.config.tsx
│          ├── source.ts
├── source.config.ts

0 replies

huskyjp · 2024-10-05T16:21:34Z

huskyjp
Oct 5, 2024
Author

And this is console.log ouput from const page = source.getPage(params.slug). Apparently, the locale does not set correctly...
(*Default mdx (english) is rendered correctly)

{
  file: {
    dirname: '',
    name: 'index',
    flattenedPath: 'index',
    locale: undefined,
    path: 'index.mdx'
  },
  url: '/./docs',
  slugs: [],
  data: {
    body: [Function: MDXContent],
    lastModified: undefined,
    structuredData: { contents: [Array], headings: [] },
    toc: [],
    title: 'Home',
    description: 'This page is in Index.',
    _exports: Object [Module] {
      default: [Getter],
      frontmatter: [Getter],
      lastModified: [Getter],
      structuredData: [Getter],
      toc: [Getter]
    },
    _file: {
      path: 'index.mdx',
      absolutePath: '/Users/zzzzzzzz/dev/web/content/docs/index.mdx'
    }
  }
}

0 replies

fuma-nama · 2024-10-05T16:45:07Z

fuma-nama
Oct 5, 2024
Maintainer

A mistake: mdxi18n -> i18n.

export const source = loader({
  source: createMDXSource(docs, meta),
  i18n: mdxi18n, 
})

baseUrl isn't a path, don't add ./. You don't need further changes to it for i18n.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to setup i18n with different internationalization package correctly #932

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to setup i18n with different internationalization package correctly #932

huskyjp Oct 5, 2024

Replies: 3 comments

huskyjp Oct 5, 2024 Author

huskyjp Oct 5, 2024 Author

fuma-nama Oct 5, 2024 Maintainer

huskyjp
Oct 5, 2024

huskyjp
Oct 5, 2024
Author

huskyjp
Oct 5, 2024
Author

fuma-nama
Oct 5, 2024
Maintainer