Remove language from URL in Next JS dynamic routes

Question

I have a website in NextJS with next-i18next, and every page must be translated except for the legal pages.

These legal pages are in markdown, and I have dynamic routing enabled thanks to a [legal].js page and the getStaticPaths and getStaticProps in it.

The problem is that by building my website, my legal pages are prefixed with the language (here en). I would like to remove it as I don't want these pages to be translated.

What am I doing wrong here?

Thanks a lot 🙏

Folder structure:

pages
|- index.js
|- [legal].js
|- privacy-policy.mdx

next-i18next.config.js

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],
    fallbackLng: 'en',
    defaultNS: ['homepage', 'header', 'footer'],
    localeDetection: false,
  },
}

[legal].js

import matter from 'gray-matter'
import ReactMarkdown from 'react-markdown'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import glob from 'glob'

const LegalPage = ({ markdownBody }) => (
  <ReactMarkdown>{markdownBody}</ReactMarkdown>
)

export async function getStaticProps({ locale, params }) {
  const { legal } = params
  const content = await import(`./${legal}.mdx`)
  const data = matter(content.default)

  return {
    props: {
      ...(await serverSideTranslations(locale, ['header', 'footer'])),
      markdownBody: data.content,
    },
  }
}

export async function getStaticPaths() {
  const blogs = glob.sync('src/pages/**/*.mdx')

  const blogSlugs = blogs.map(file => {
    const parts = file.split('/')
    return parts[parts.length - 1].replace('.mdx', '')
  })

  const paths = blogSlugs.map(slug => ({
    params: { legal: slug },
  }))

  return {
    paths,
    fallback: false,
  }
}

export default LegalPage

build output:

Answer 1

All static HTML files should be created in separate folders for each locale. Your default locale can be omitted in the URL, and the following URLs are equivalent:

example.com/my-first-blog
example.com/en/my-first-blog

? As a solution, you can setup app i18n base on domain:

module.exports = {
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
    domains: [
      {
        domain: 'example.com',
        defaultLocale: 'en',
      },
    ]
  }
}