[Req]: Internationalization

[dlford]

Contact Details

No response

Explain the proposed feature

This project will benefit from displaying in many languages, but first we need a system to handle translations.

Explain the possible use cases for the feature

Not everyone speaks or reads the english language, and even those who do may prefer another for ease of use.

Any other details you would like to provide?

A PR for this issue should:

• Lay out a system for handling different languages
• Replace all hard coded text with a reference to the translation system so it may be replaced by another language
• Provide an easy way to add translations for different languages organized by each tool or page

It is not required to add any other languages in the PR for this issue, I will open a new issue for that, but if you know another language please feel free to add it.

[shu1007]

If you would like, could you also assign this issue?

[dlford]

@shu1007 all yours, thank you!

[dlford]

@shu1007 Not sure if this helps, or I'm too late, but this seems like a good implementation - https://github.com/i18next/next-i18next

[shu1007]

It's still in process, but I'll show you the implementation. #62

• https://deploy-preview-62--developertools-tech.netlify.app/ja
• https://deploy-preview-62--developertools-tech.netlify.app/ja/base64 Some pages have been translated into Japanese

I also found out about next-i18next but I wanted to do some cleanup against the translation files. So I am trying to implement the idea of defining a translation data object in TypeScript and using it.

Is it acceptable to implement this policy?

[shu1007]

i18n uses the following features of Next.js https://nextjs.org/docs/advanced-features/i18n-routing#sub-path-routing

Then add the following several files to implement i18n

• translation files
  • https://github.com/developertools-tech/developertools.tech/tree/c209c867bdd5c85c21a36f5d378d053bebf16444/data/locale
  • new hook
  • https://github.com/developertools-tech/developertools.tech/tree/c209c867bdd5c85c21a36f5d378d053bebf16444/data/locale

[dlford]

@shu1007 This looks like a great start, I think the two problems I see that need solving are:

1. The types or schema of the translations, I think it would be a pain to maintain that in TypeScript
2. Fallbacks, as the project grows and new tools are added, they may only have one language to start, so it will have to fall back to that language.

If you can solve those two things, I don't mind how you implement it, I only suggested i18next because I thought it might save you some time, but it is up to you either way.

Thanks!

Edit: Looks like you already have fallbacks solved maybe? The demos look great!

[dlford]

Maybe we can use generics instead?

[shu1007]

Sorry for the delay in contacting you. I've decided to change my policy and use next i18-next https://github.com/shu1007/developertools.tech/tree/make-i18n-next

Most of the implementation is done, but it will take a little longer.

[dlford]

@shu1007 No worries, thank you!

[dlford]

@shu1007 This is looking great! Thanks so much for your hard work!

I'm not sure if it helps, but we can also add locale to the Jest mock of next/router here - https://github.com/shu1007/developertools.tech/blob/make-i18n/jest.setup.js#L13

[shu1007]

@dlford

I'm not sure if it helps, but we can also add locale to the Jest mock of next/router here -

Thanks. However currently on test, i18n outputs mock or English only, so I don't think it is necessary.

[shu1007]

Sorry for the delay. I finally submitted a pull request.

[dlford]

No worries!