Internationalization implementation with Next JS (13.5.6) & typescript

Developing with Prismic
,
1

Hey there!

I've recently started working on our website, which is built using Next JS and TypeScript (specifically, Next 13.5.6). I followed this tutorial to set it up: https://www.youtube.com/watch?v=nfZu56KsK_Q

My current challenge is to implement internationalization with Prismic, so we can smoothly handle both English and French languages on our website. However, I've scoured YouTube and community forums, but I can't seem to find any tutorials or guidance on this specific topic.

That's why I'm reaching out here – I'm wondering if there's anyone who knows how to tackle this and might be interested in helping me out. :blush:

You can find the repository here: https://github.com/polyphoniamusic/polyphonia-prismic-website

P.S. Since I'm still a beginner, please bear in mind that my code might not be top-notch just yet :grin:

A big thanks in advance!

Andy

3

Hi Andy,

We've got documentation on how to set this up here :slight_smile:

Thanks.

4

Hey Phil,

Thank you again for replying.

I already read this doc a few days ago, but since the project uses typescript (and because I'm a beginner/noob aha) I can't find a way to adapt it to my code :/

5

Hey Andy

In your code I see that your are using the new Next.js App router.
Therefore the current Prismic Next.js internationalization documentation is outdated.

I believe that the following blog post might help you out. :slight_smile:

1 Like
6

Hello Andre,

Thank you so much for this! :blush:

I followed all the tutorial but unfortunately I still have some errors;

There is no homepage appearing when I go to:

  • localhost:3000 & localhost:3000/fr-fr
    (but there is one for this path: localhost:3000/en-US)

But all the other paths are working (for example):

  • localhost:3000/fr-fr/blog & localhost:3000/en-US/blog
  • localhost:3000/fr-fr/blog/spotify-new-feature-discovery-mode & localhost:3000/en-US/blog/spotify-new-feature-discovery-mode
  • localhost:3000/fr-fr/artists & localhost:3000/en-US/artists
  • localhost:3000/fr-fr/artists/blurblur & localhost:3000/en-US/artists/blurblur

It seems like the main language found is french, which is great, but no homepage are being loaded for this one :confused:

Here is the link to the repo with the tutorial edits added: https://github.com/polyphoniamusic/polyphonia-prismic-website/tree/production

Would you consider looking at what I've done to tell me if I've forgotten or done something wrong?

Thank you so much for your help! :face_holding_back_tears:

7

Here is the updated repo, where I still have the problem of my latest message :slight_smile: https://github.com/polyphoniamusic/polyphonia-website-prismic-lang

8

@polyphoniamusic.mgmt

The sample project should help you out with this: