teyfik-i18n-next v0.0.27
teyfik-i18n-next
Seamless i18n integration for Next.js. Manage locales, route localization, dynamic content translation, and more. Reach a global audience effortlessly. #Nextjs #i18n
Usage
Installation
Install teyfik-i18n-next
npm i teyfik-i18n-next
Install teyfik-directory-loader
if you don't have a custom loader
npm i teyfik-directory-loader
Next.js configuration
Configure your i18n settings in next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'de'],
},
};
module.exports = nextConfig;
Initializing pageWithTranslations
helper
teyfik-i18n-next
uses a function called pageWithTranslationsFactory
to
create a helper function to use in every page of the app. The factory function
takes a single argument called loader, and the loader function takes a single
argument called locale then returns all the translations for given locale.
- Using
teyfik-directory-loader
With the help of teyfik-directory-loader
, you can load every JSON and YAML
files in a specific directory keeping folder structure. Read more about the
package here
import directoryLoader from 'teyfik-directory-loader';
import { pageWithTranslations } from 'teyfik-i18n-next';
const pageWithTranslations = pageWithTranslationsFactory((locale) =>
directoryLoader('public', 'locales', locale),
);
export default pageWithTranslations;
- Using a custom loader
import { pageWithTranslations } from 'teyfik-i18n-next';
const pageWithTranslations = pageWithTranslationsFactory((locale) =>
fetch(`https://example.com/locales/${locale}.json`),
);
export default pageWithTranslations;
The loader's return value should return all the translations for the given locale, as shown in the example below:
{
"common": {
"title": "Hello world!",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit..."
},
"index": {
"title": "Home"
},
"footer": {
"copyright": "Copyright © 2023"
}
}
If you prefer to use teyfik-directory-loader
, your directory structure should
be similar to the following:
.
└── path
└── to
└── locales
├── en
| └── common.json
└── de
└── common.json
Using the pageWithTranslations
helper
After you initialize a loader and defined pageWithTranslations
helper you
should use it in your pages to load translations:
import { useTranslation } from 'teyfik-i18n-next';
import { pageWithTranslations } from '../helpers/pageWithTranslations';
export default function Home() {
const { t } = useTranslation();
return (
<section>
<header>
<h1>{t('common.title')}</h1>
</header>
</section>
);
}
export const getStaticProps = pageWithTranslations('common', (context) => {
// Your custom getStaticProps logic here
return {
props: {},
};
});
You can define filtered namespaces on property level such as:
export const getStaticProps = pageWithTranslations('common.title');
Finally, wrap your app with I18nProvider
. In the example below, i18n
prop
comes from pageWithTranslations
helper that we used with getStaticProps
.
import type { AppProps } from 'next/app';
import { I18nProvider } from 'teyfik-i18n-next';
function App({ Component, pageProps }: AppProps) {
return (
<I18nProvider i18n={pageProps.i18n}>
<Component {...pageProps} />
</I18nProvider>
);
}
export default App;
That's it!
Plurals
In the example below, the translation of profile.viewCount
that is tried to be
accessed will be changed to profile.viewCount.other
. Other possible values
will be profile.viewCount.zero
and profile.viewCount.one
.
export default function Page() {
const { t } = useTranslation();
return (
<section>
<main>
<p>{t('profile.viewCount', { count: 5 })}</p>
</main>
</section>
);
}
Answers
In the example below, the translation of profile.public
that is tried to be
accessed will be changed to profile.public.yes
. Other possible values will be
profile.public.no
.
export default function Page() {
const { t } = useTranslation();
return (
<section>
<main>
<p>{t('profile.public', { answer: true })}</p>
</main>
</section>
);
}
Template literals
Templates will be rendered with Mustache. In the example below, {{ username }}
template literal will be changed with the username that is provided in the
context.
public/locales/en/profile.json
{
"salute": "Hello, {{ username }}!"
}
export default function Profile() {
const { t } = useTranslation();
return (
<section>
<main>
<p>{t('profile.salute', { username: 'teyfik' })}</p>
</main>
</section>
);
}
The result will be "Hello, teyfik!"
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago