next-i18n-export
Example ![Build Status](https://camo.githubusercontent.com/30319de2bc444a863f4960c6fbe0551c6b4fa0649b0816688d0893e9613eea07/68747470733a2f2f6170702e7472617669732d63692e636f6d2f6d617274696e6b722f6e6578742d6578706f72742d6931386e2d6578616d706c652e7376673f6272616e63683d6d61696e)
This repository is a showcase for the next-export-i18n
project.
See a running example at next-export-i18n-example.vercel.app
next-i18n-export
About Unfortunately, Next.js
i18n-routing does not supports next export
.
Since most of the i18n-libraries are using Next.js
's i18n-routing under the hood, none of them is able to support fully static sites which are generated with next export
. If they are talking about SSG support, they are talking about pre-rendered sites which are served with Next.js
. next export
creates a truly static page which can be served with any webserver (e.g. nginx, apache etc).
For the different types of pre-rendering in Next.js
, take a look at my article The two and a half + one flavors of Next.js
's pre-rendering
which explains and summarizes the different options.
next-i18n-export
Getting Started with Quick start with next-export-i18n
- Run
yarn add next-i18n-export
ornpm install next-i18n-export
- Add your
translation files
to thei18n/
folder Require
yourtranslation files
ini18n/index
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n'
in yourpages
and get the hooks
In case there is a default language set in the browser and this language is available in the translations,
it overrides the default language setting in the config file. Relevant is the primary subtag, e.g.: a default language of en-US
from the will be read as en
.
const { t } = useTranslation();
const [query] = useLanguageQuery();
- Add the
<LanguageSwitcher lang={string}>
component to change the language (or create your own language switcher) - Add the
query
fromuseLanguageQuery
to your internal links to enhance them with the language parameter (<Link href={{ query: query … }}>…
) - Add the translations with
t(key)
fromuseTranslation
to your elements. They will be automatically update as soon as the language change.
For in depth explanation please see the next-export-i18n documentation
Next.js
Getting Started with Well, you are looking for a very specific solution related to Next.js
, so I assume you already know about Next.js
. But anyway …
Run the development server:
npm run dev
# or
yarn dev
and open http://localhost:3000 with your browser to see the result.
Export the project
npm run export
# or
yarn export
and serve
the ./out
directory with your favorite web server.
Tech Stack
- next.js: 11.0.1
- react.js: 17.0.2
- jest: 27.0.6
- typescript: 4.3.5
License
Licensed under the MIT license. MIT - http://www.opensource.org/licenses/mit-license.php