next-ntms
v0.0.994
Published
A dead simple way to add i18n to your Next.js app using the Notion API and Deepl
Downloads
11
Maintainers
Readme
next-ntms
Turn your Notion into a powerful, collaborative and automatic Translation Management System for your next.js app.
Features 😻
- Very small footprint. 🌬️
- Notion as main source of truth thanks to their API. ⭐
- Empower non technical users to directly improve your site content for better DX and TeamX. 👩❤️👩
- Render simple string or complex rich text. 📝
- Automatic and precise translation into more than 20 languages thanks to the DeepL API integration. 🌍
- Data efficient:
- Translations are fetched and revalidate in the background using next.js
getStaticProps
.⚡ - Client receive only necessary translations based on his localization. ⚡
- Translations are fetched and revalidate in the background using next.js
- Extendable with translations outside of notion. ⇒ incremental adoption. 🔓
- Familiar and boilerplate-free api as it's rely on Next.js locale configuration. 💫
Drawbacks 😿
- next-ntms rely on
getStaticProps
i.e: translation fetching cannot be use in combination withgetServerSideProps
as Next.js sadly don't allow this for now ⇒ see [#11424] While it's still possible to use thegetStaticTranslations
function inside your server side logic, we do not advice to do so because of the speed of the Notion API. A workaround would be to encapsulate all you components translations inside small databases and use your_app
getStaticProps
to fetch them. - As the Notion API is still in beta and only return text-like blocks, this library is not (yet) suitable for a full and complex translated content management system.
Getting started 💨
npm i next-ntms
- Notion:
- Create your notion integration.
- get your api key.
- allow your integration to access your translations databases.
- set your
NOTION_API_KEY
inside your environnement variables.
- Automatic translation:
- set
DEEPL_API_KEY
inside your environnement variables. - set
DEEPL_URL
inside your environnement variables. - define your locale to DeepL target_lang mapping in your
next.config.js
file underserverRuntimeConfig.ntms.deepl
object.
- set
- Configure your i18n strategy inside
next.config.js
file and make sure to add the corresponding columns in your Notion's databases. - Export a
getStaticProps
function of your translated pages asgetStaticTranslations
(or use thefetchTranslations
function to pass a translations props to your page). - Wrap your page with the
withTranslation
HOC - Display your translations with the
useTranslation
hook or theTrans
component.
Documentation
Minimal example
databaseName | key | en | fr | |----------------|-------------------|------------------------| | translationKey | ntms is awesome ! | ntms est fantastique ! |
next.config.js
module.exports = {
i18n: {
locales: ['en', 'fr'],
defaultLocale: 'en'
},
serverRuntimeConfig: {
ntms: {
deepl: {
fr: 'FR'
}
}
}
}
/pages/translatedPage.js
import {
withNotionTranslation,
getStaticTranslations,
useTranslation
} from 'next-ntms'
const TranslatedPage = () => {
const { t } = useTranslation()
return (
<div>
<h1>{t('databaseName.translationKey')}</h1>
{/*
will display either "ntms is awesome !"
or "ntms est fantastique !"
depending on the locale
*/}
</div>
)
}
export const getStaticProps = getStaticTranslations('databaseId')
export default withNotionTranslation(TranslatedPage)