NextJs multilanguage paths

Developing with Prismic
1

I´m bulding multilanguage page with Prismic and NextJS. My locales are 'is' (icelandic) and 'en' (english)

This is my "pages" folder structure.
image

I have no problem building paths with like these
is/news/[uid]
en/news/[uid]

My problem is that I want to build paths like these
is/frett/[uid]
en/news/[uid]

I´ve search all over the place but I haven´t found any references on how this can be accomplice.

3

Hi @bippi

Welcome to the community forum, and thanks for reaching out to us.

You need to create the folder structure and files like this:

pages/
 [lang]/
  [news]/
    - index.jsx        // will match for /is/frett and /en/news, handle these paths rendering here
      - [uid].jsx   // will match for /is/frett/[uid] and /en/news/[uid]

Give this a try, and let me know if you have any further questions.

Thanks,
Priyanka

1 Like
4

Thanks for your answer Priyanka.

That would work if I would only have one document type but I have many.
This will not work

page
  [news]
   - index.jsx // is/frett and en/news
    -[uid].jsx // is/frett/[uid] and en/news/[uid]
  [article]
    -index.jsx // is/grein and en/article
    -[uid].jsx // is/grein/[uid] and en/article/[uid]

I´m starting to think that the only option is this.

page
  [doctype]
   - index.jsx // is/[frett | grein | etc] and en/[news | article | etc]
    -[uid].jsx // is/[frett | grein | etc]/[uid] and en/[news | article | etc]/[uid]

But I think that will be rather messy and will not fullfill all my demands for subpaths.

5

Hi @bippi

You are right, but if you can introduce one more level somewhere in the path like that:


page
 n-type //just an example for differentiating, you can use any other name which can segregate news and article
  [news]
   - index.jsx // is/frett and en/news
    -[uid].jsx // is/frett/[uid] and en/news/[uid]
a-type //just an example for differentiating, you can use any other name which can segregate articles 
  [article]
    -index.jsx // is/grein and en/article
    -[uid].jsx // is/grein/[uid] and en/article/[uid]

Give this a try and let me know.

Thanks,
Priyanka

7

But by this I would get urls like these
is/n-type/frett/[uid]
en/n-type/news/[uid]
etc..
and
is/a-type/grein/[uid]
en/a-type/article/[uid]

or is there a way to exclude folder from path?

Thanks
Bippi

9

Hello,

I gave an example of using strings like "n-type" and "a-type." You can use some meaningful names for folders. Here, in the path tree structure, you need to have some folder or page name through which you can differentiate the path between articles and news. Here, you need to have the hard-folder names.

Let me know if you have any further questions.

Thanks,
Priyanka

11

I think I have a solution but I´m not sure that it is acceptable.
In next.config.js I added this rewrite rules.

async rewrites() {
    return [
      {
        source: "/frett/:slug", 
        destination: "/news/:slug", 
      },
      {
        source: "/is/news/:slug", 
        destination: "/404", 
        locale: false,
      },
    ];
  },

And my folder structure under pages looks like this
image

@Priyanka do you see any downsides using this method?

All the best
Bippi

13

That way you are mentioning that all the URLs which are starting from"/frett/:slug" to "/news/:slug", but that is not the objective.

,Still be on the same side:

page
 n-type //just an example for differenti. You can use any other name which can segregate news and article
/pages
  /news_type
  /[news]
   - index.jsx // is/frett and en/news
    -[uid].jsx // is/frett/[uid] and en/news/[uid]
  /article_type //just an example for differentiating, you can use any other name which can segregate articles 
    /[article]
    -index.jsx // is/grein and en/article
    -[uid].jsx // is/grein/[uid] and en/article/[uid]

Thanks,
Priyanka