i18n help

[kilianbalaguer]

Hey im using Nextra 2 docs but when i use i18n i delete the index and make a index.en-US.mdx and the meta json of it but it says 404 page not found and i dont know how to use i18n in nextra.

[LuchoTurtle]

I'm having the same issue.

I've made all the modifications according to the Nextra's documentation.

// next.config.js
const withNextra = require("nextra")({
  theme: "./theme/src/index.tsx",
  themeConfig: "./theme.config.tsx",
  defaultShowCopyCode: true
});

module.exports = withNextra({
  i18n: {
    locales: ['en-US', 'ar-SA'],
    defaultLocale: 'en-US'
  }
});

// middleware.ts

"server only";

import { auth } from "@/src/auth";
import { NextResponse } from "next/server";
import { withLocales } from 'nextra/locales'

export default withLocales(auth(async (req, ctx) => {
  return NextResponse.next()
}));

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

// theme.config.tsx
import { DocsThemeConfig } from "nextra-theme-docs";

const config: DocsThemeConfig = {
    logo: <span>My Nextra Documentation</span>,
    project: {
      link: 'https://github.com/shuding/nextra'
    },
    i18n: [
      { locale: 'en-US', text: 'English' },
      { locale: 'ar-SA', text: 'العربية', direction: 'rtl' }
    ]
  }

  export default config

And my page returns 404 on localhost:3000.

This wasn't the case before (index.mdx was rendered properly). Here's how my file structure looks like now:

Weird stuff 🤔 . Any insights?

[kilianbalaguer]

Yeah bc for me it does work if i do localhost:3000/filename exaple

localhost:3000/index.en-US.mdx

but for the rest i dont know what to do.

[kilianbalaguer]

and when i use middleware.ts it gives me the error ERR_TOO_MANY_REDIRECTS but when i delete it it stops giving me the error

[arno-fukuda]

try this matcher:

export const config = {
  matcher: [
    '/',
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

[LuchoTurtle]

@arno-fukuda thank you! That fixed it (a bit). The i18n works, though the middleware seems to always be skipped on every route that I visit now. Is this expected? I use middleware.ts to protect some routes, so this behaviour is not accepted (in my scenario) :(

[arno-fukuda]

Does it also reproduce if you remove the matcher completely?

[LuchoTurtle]

If I remove the matcher completely, the middleware.ts executes normally and the i18n seems to work as intended.

Which is weird, what's the point of withLocales hook, then? 🤔

[kilianbalaguer]

If I remove the matcher completely, the middleware.ts executes normally and the i18n seems to work as intended.

Which is weird, what's the point of withLocales hook, then? 🤔

So how is your code now?

[LuchoTurtle]

@kilianbalaguer you just remove the matcher you exported inside your middleware.tsfile.

// middleware.ts

"server only";

import { auth } from "@/src/auth";
import { NextResponse } from "next/server";
import { withLocales } from 'nextra/locales'

export default withLocales(auth(async (req, ctx) => {
  return NextResponse.next()
}));

export const config = {} // don't match anything

[kilianbalaguer]

@LuchoTurtle and what is your next config code and how is your pages look like for the i18n

[LuchoTurtle]

My next.config.js code is written above in my original reply. The pages are the same as following the guide (meaning you've _meta.en-US.json and index.en-US.mdx files and such).

[kilianbalaguer]

bc me it does not work when i do url/en i need to specifie my file

[kilianbalaguer]

but can you delete the index file bc if i do that its not found

[kilianbalaguer]

btw do you have the repo of you? @LuchoTurtle

[LuchoTurtle]

I don't have a repo, it's stashed. If anything, you should share yours so people can help you :)

[kilianbalaguer]

@LuchoTurtle
https://github.com/WinUI-Blog/site what do i need to do to use i18n?