Adding i18n

[PxlSyl]

Hello, I started to work on it a few days ago (en and fr). Almost finished (still some work to do), but getting a bug, or perhaps a misunderstanding on my part. At this point everything is working, except when the user clicks on a post to display it : I'm getting an error related to Pliny :

Error: Cannot read properties of undefined (reading 'default')

Call Stack
default)
node_modules\pliny\mdx-components.js (10:37)

So if there's some people interested to help and conttribute, it would be great and I'm publishing the repo with the bug right now. At least, it will show interested people how i18n works with the app router and how to globally set it up

Here's my repo : https://github.com/PxlSyl/tailwind-nextjs-starter-blog-i18n/tree/main

Note : the repo is not currently working for production, and needs some improvments (apart from the bug) but could be quickly ready with some help! :)

[PxlSyl]

Issue is now fixed, and the posts are displayed as they should. Still some work to do, but i18n is correctly set up! I think I made mistakes at the beginning, because of weird bugs related to windows and contentlayer. So now there's a working repo with internationalization for this amazing template :) Will fix some things related to metadata and others improvments, and then will deploy the demo. If anyone wants to help let me know, since there's still things to fix!

[timlrx]

Nice work, do add a link to the blog roll once you are done integrating it!

[PxlSyl]

Nice work, do add a link to the blog roll once you are done integrating it!

Thank you. Did it because I'm using the translated V.1 for my own website, and want to upgrade to app dir. I first need to translate the V.2 before upgrading, so let everyone benefit from it!

On the other hand I will need a little help, everything works as expected, except the images which are not rendered in the articles (400 bad requests) I have searched everywhere but for the moment I can't solve the problem, and that's really the main concern
​

[PxlSyl]

Hi! There's now a working demo :)

Only thing to do now is updating all the metadata related things. Everything else is now working as well as what we would expect from a blog with translation.

As it's an opinionated fork, I had to modify some things.

• The newsletter component is not imported from Pliny, but present in the repo to be able to translate it.
• The SearchProvider component has been rewritten as suggested in your repo and is imported into layout, instead of Pliny's. (For language filtering purpose) It will therefore be up to users to make modifications if they prefer algolia.

The only problems remaining are those described in my repo

Here's the link to see the i18n demo version in action : https://tailwind-nextjs-starter-blog-i18n.vercel.app/
And here's my repository : https://github.com/PxlSyl/tailwind-nextjs-starter-blog-i18n/tree/main

You can already add the links, this will allow interested people to start looking, and perhaps help me test/debug if necessary, or request improvements.

[timlrx]

Looking good! I think the trade-offs that you made are totally reasonable. It would be hard to translate some of the components and the easiest way would be to copy it and translate it like what you have done.

Small suggestion: the URL paths for blog posts could be cleaned up. Currently it duplicates the locale twice - I understand that you are probably relying on the full file path to match, but you might not want to use the path as it is as the url e.g. https://tailwind-nextjs-starter-blog-i18n.vercel.app/en/blog/en/release-of-tailwind-nextjs-starter-blog-v2.0

I have also added it to the readme!

[PxlSyl]

Yes I know about the url, it is also used for filtering and redirection reasons, but I will see to what extent I can modify this in order to offer something really clean!

I'm just finishing the metadata implementation as a major improvement, and then I'll look at it all :)

Thank you!

[jeremieca]

This is a Crazy contribution ! I definitely need it ♥️

[PxlSyl]

Thank you!! When possible, I'll try to maintain it in sync with the main repo (for new features, enhancement and fix)

PS.: Je suis à 1h de Toulouse lol

[demonhunter3333]

@PxlSyl thanks for making this! is there an easy way to include your i18n feature in my original timlrx's repo? or do i need to follow https://tailwind-nextjs-starter-blog-i18n.vercel.app/blog/posts/internationalization-v2 ?

[PxlSyl]

@PxlSyl thanks for making this! is there an easy way to include your i18n feature in my original timlrx's repo? or do i need to follow https://tailwind-nextjs-starter-blog-i18n.vercel.app/blog/posts/internationalization-v2 ?

Hi! Sorry for the late, I just saw this. I don't think there's an easy way to include the i18n feature. (I added some features and new things on my own i18n version) But what you can do, is reading the explanations in my readme file and use the same libraries and components, and adapt them to your own version :)