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

Developing with Prismic
1

Hello, I am using the next.js + prismic starter: GitHub - prismicio-community/nextjs-starter-prismic-multi-language: Multi-language project with Next.js & Prismic

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":

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

Thank you

1 Like
3

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.

Thanks.

4

Hi Nuno,

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

Thanks.

1 Like
5

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

7

Hello @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 :slight_smile:

8

Hey @Marving, you can use the "lang" filter on your route resolver:

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

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:

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;
};
1 Like
12

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

1 Like
16

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

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

prismic.js

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",
  },
];
18

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