# Change the default languages id's on url's on next.js

**URL:** https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622
**Category:** Developing with Prismic
**Tags:** nextjs
**Created:** [August 16, 2021, 10:20am UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622 "2021-08-16T10:20:55Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![ositaka](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ositaka/32/2344_2.png) [@ositaka](https://community.prismic.io/u/ositaka)
#### Post date: [August 16, 2021, 10:20am UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/1 "2021-08-16T10:20:55Z")

</div>

Hello, I am using the next.js + prismic starter: [GitHub - prismicio-community/nextjs-starter-prismic-multi-language: Multi-language project with Next.js & Prismic](https://github.com/prismicio/nextjs-multi-language-site)

And I am wondering how can I have just "en" or "fr" on the url's, instead of "en-gb" and "fr-fr". I see on the repo these 2 files, where I think the languages slug could be "remapped":

- [https://github.com/prismicio/nextjs-multi-language-site/blob/master/utils/prismicHelpers.js](https://github.com/prismicio/nextjs-multi-language-site/blob/master/utils/prismicHelpers.js)
- [nextjs-starter-prismic-multi-language/next.config.js at master · prismicio-community/nextjs-starter-prismic-multi-language · GitHub](https://github.com/prismicio/nextjs-multi-language-site/blob/master/next.config.js)

I don't really now how to do it. Can anybody help?

Thank you

---

<div class="post-metadata">

### Author: ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)
#### Post date: [August 16, 2021, 3:02pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/3 "2021-08-16T15:02:13Z")

</div>

Hey Nuno,

What you'll probably need to do here is create an i18n file that you can use to create short pseudonyms for the longer language codes.

I haven't done it myself, but it should be possible.

> **[Advanced Features: Internationalized Routing | Next.js](https://nextjs.org/docs/advanced-features/i18n-routing)**
>
> Next.js has built-in support for internationalized routing and language detection. Learn more here.

Thanks.

---

<div class="post-metadata">

### Author: ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)
#### Post date: [August 20, 2021, 2:41pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/4 "2021-08-20T14:41:55Z")

</div>

Hi Nuno,

I've just remembered there's probably the much easier option of using custom locales to achieve this in your repo:

> **[Manage Languages and Locales](https://prismic.io/docs/core-concepts/languages-locales#add-custom-locales)**
>
> This article provides an introduction to Prismic languages and locales.

Thanks.

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [August 21, 2021, 2:42pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/5 "2021-08-21T14:42:10Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

### Author: ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)
#### Post date: [December 9, 2021, 3:31pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/6 "2021-12-09T15:31:06Z")

</div>



---

<div class="post-metadata">

### Author: ![Marving](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marving/32/5259_2.png) [@Marving](https://community.prismic.io/u/Marving)
#### Post date: [December 30, 2022, 9:19pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/7 "2022-12-30T21:19:32Z")

</div>

Hello [@Prismic-Support-Team](https://community.prismic.io/groups/prismic-support-team),

Picking-up on @Phil 's answer.

I have tried to create a custom locale. Unfortunately, you are forced to add a region with it.  
So I can not create a custom locale named only "fr", I need to add a region which leads me to "fr-xyz".  
Am I doing something wrong?

I am trying to do the same thing as @ositaka getting a subfolder with only "fr" instead of "fr-fr" for my second language.

Happy New Year btw 🙂

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [January 2, 2023, 11:11pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/8 "2023-01-02T23:11:13Z")

</div>

Hey @Marving, you can use the "lang" filter on your [route resolver](https://prismic.io/docs/route-resolver):

```auto
[
  {
    type: "page",
    lang: "en-us",
    path: "/en/:uid",
  },
  {
    type: "page",
    lang: "es-mx",
    path: "/es/:uid",
  },
  // etc.
]
,,,
```

---

<div class="post-metadata">

### Author: ![Marving](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marving/32/5259_2.png) [@Marving](https://community.prismic.io/u/Marving)
#### Post date: [January 4, 2023, 12:24am UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/10 "2023-01-04T00:24:17Z")

</div>

Hello @Pau ,

Interesting. Thank you! I have figured out the issue for (1).  
Dummy mistake to be honest… My browser was set to French as main language and so it redirected me automatically to the French version of a site if there were one available.

Regarding the (2) with the route resolver and the “lang” filter, it is still not working on my hand.

If I understand correctly according to documentation and the forum, we have to use either the route resolver or the link resolver in the prismicio.js.

So as you have suggested, I have switched from Link Resolver to the route resolver:

```auto
import * as prismic from '@prismicio/client';
import * as prismicNext from '@prismicio/next';
import sm from './sm.json';
import * as prismicH from '@prismicio/helpers';

/**
 * The project's Prismic repository name.
 */
export const repositoryName = prismic.getRepositoryName(sm.apiEndpoint);
// Update the routes array to match your project's route structure
/**@type {prismic.ClientConfig['routes']}**/
const routes = [
    {
        type: 'homepage',
        lang: 'en-ca',
        path: '/'
    },
    {
        type: 'homepage',
        lang: 'fr-wo',
        path: '/fr'
    },
    {
        type: 'page',
        lang: 'en-ca',
        path: '/:uid'
    },
    {
        type: 'page',
        lang: 'fr-wo',
        path: '/fr/:uid'
    },
    {
        type: 'seo_mother',
        lang: 'en-ca',
        path: '/seo'
    },
    {
        type: 'seo_mother',
        lang: 'fr-wo',
        path: '/seo/fr'
    },
    {
        type: 'seo_child',
        lang: 'en-ca',
        path: '/seo/:uid'
    },
    {
        type: 'seo_child',
        lang: 'fr-wo',
        path: '/seo/fr/:uid'
    },
    {
        type: 'dev_mother',
        lang: 'en-ca',
        path: '/dev'
    },
    {
        type: 'dev_mother',
        lang: 'fr-wo',
        path: '/dev/fr'
    },
    {
        type: 'dev_child',
        lang: 'en-ca',
        path: '/dev/:uid'
    },
    {
        type: 'dev_child',
        lang: 'fr-wo',
        path: '/dev/fr/:uid'
    },

    { type: 'blog_homepage', lang: 'en-ca', path: '/blog' },
    { type: 'blog_homepage', lang: 'fr-wo', path: '/blog/fr' },
    {
        type: 'blog_post',
        lang: 'en-ca',
        path: '/blog/:uid'
    },
    {
        type: 'blog_post',
        lang: 'fr-wo',
        path: '/blog/fr/:uid'
    }
];

/**
 * Creates a Prismic client for the project's repository. The client is used to
 * query content from the Prismic API.
 *
 * @param config {prismicNext.CreateClientConfig} - Configuration for the Prismic client.
 */
export const createClient = (config = {}) => {
    const client = prismic.createClient(sm.apiEndpoint, {
        routes,
        ...config
    });

    prismicNext.enableAutoPreviews({
        client,
        previewData: config.previewData,
        req: config.req
    });

    return client;
};

```

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [January 4, 2023, 3:18pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/12 "2023-01-04T15:18:35Z")

</div>

That's correct. The route resolver should cover all of your use cases. We can continue the conversation in the help center.

---

<div class="post-metadata">

### Author: ![Khadar](https://avatars.discourse-cdn.com/v4/letter/k/ee7513/32.png) [@Khadar](https://community.prismic.io/u/Khadar)
#### Post date: [April 16, 2023, 10:32am UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/16 "2023-04-16T10:32:17Z")

</div>

Hi, I have the same issue as @Marving.

I tried to set the lang filter in the routes resolver but it doesn't work. When I hit this URL: localhost:3000/de/about I get and 404 page not found.

My setup looks like this:  
next.config.js

```auto
i18n: {
    defaultLocale: "en-us",
    locales: ["en-us", "de-de"]
},

```

prismic.js

```auto
const routes = [
  {
    type: "home",
    lang: "en-us",
    path: "/",
  },
  {
    type: "home",
    lang: "de-de",
    path: "/de",
  },
  {
    type: "page",
    lang: "en-us",
    path: "/:uid",
  },
  {
    type: "page",
    lang: "de-de",
    path: "/de/:uid",
  },
  {
    type: "tours",
    lang: "en-us",
    path: "/tours",
  },
  {
    type: "tours",
    lang: "de-de",
    path: "/de/touren",
  },
  {
    type: "tour",
    lang: "en-us",
    path: "/tour/:uid",
  },
  {
    type: "tour",
    lang: "de-de",
    path: "/de/tour/:uid",
  },
  {
    type: "legal",
    uid: "privacy",
    lang: "en-us",
    path: "/legal/privacy",
  },
  {
    type: "legal",
    uid: "privacy",
    lang: "de-de",
    path: "/de/legal/datenschutz",
  },
  {
    type: "legal",
    uid: "terms",
    lang: "en-us",
    path: "/legal/terms",
  },
  {
    type: "legal",
    uid: "terms",
    lang: "en-us",
    path: "/de/legal/impressum",
  },
];

```

---

<div class="post-metadata">

### Author: ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)
#### Post date: [April 17, 2023, 2:48pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/18 "2023-04-17T14:48:35Z")

</div>

Are you passing the correct lang param to the query for the About page?

---

<div class="post-metadata">

### Author: ![Ryan\_Mac](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@Ryan\_Mac](https://community.prismic.io/u/Ryan_Mac)
#### Post date: [March 27, 2025, 10:34am UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/20 "2025-03-27T10:34:10Z")

</div>

Is it possible for the default locale (en-us) to exist without the [lang] path? I'm using the i18n starter project.. it works fine on the home page but breaks when I add subsequent pages.

[domain.com/contact](http://domain.com/contact). (english)  
[domain.com/zh-cn/contact](http://domain.com/zh-cn/contact). (chinese)

---

<div class="post-metadata">

### Author: ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)
#### Post date: [March 27, 2025, 12:13pm UTC](https://community.prismic.io/t/change-the-default-languages-ids-on-urls-on-next-js/6622/21 "2025-03-27T12:13:50Z")

</div>

Hi @Ryan_Mac,

You can set up a redirect for this purpose. I don't know your project's structure or framework, but I've done it like this before. This was my `next.config.js` file:

```auto
module.exports = {
  async redirects() {
    return [
      {
        source: '/en-us',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

```
