This is a hands-on project which you can use as a baseline to implement this feature yourself or, alternatively, you can follow our implementation process commit-by-commit, or just run the final version to play around in your browser.
Finally, assuming you already installed Node 16 and NPM you can run the commands below to get started:
# Setup `.env.local` with any potentially missing API KEY or Configuration
npm i
npm run dev
Access http://localhost:3000 with your browser to see the result.
1st Note: easily manage your node and npm versions with Node Version Manager
2nd Note: install the vscode plugins recommended in .vscode/extensions.json
or similar ones
# Vscode? See https://nextjs.org/docs/advanced-features/debugging#debugging-with-vs-code
# DevTools? See https://nextjs.org/docs/advanced-features/debugging#debugging-with-chrome-devtools
npm run dev:inspect
Our demo implementation was split into several branches (git fetch --all && git branch --all
).
Starting from branch 00
through branch 03
. You should be able to see features comming to life.
We challenge you to do the following exercise:
ar
Developer Tools > Application > Storage > Cookies
.react-i18next
and i18next
useTranslation
hook in components that got "translable" strings
german
, locale := de
)
/de
at the end. Does the language change?i18next-browser-languagedetector
and see if you can figure out how to synch everythingnext.js router locale
.
pages/_app.tsx
?ar
, the page direction changes <html dir="rtl">
pages/_document.tsx
! You can not use hooks here. Good luck!UI
broken.
tailwindcss-rtl
library to replace left and right
styles with start and end
.
To know more about the reason why there is not problem in having .env
files in the root
of the project read about environment variables in Next.js.
Remember Next.js looks for variables in the following places (and order) and stopslooking for them on the first match!
process.env
(system-wide environment variables).env.$(NODE_ENV).local
(please do not use this).env.local
(not loaded when NODE_ENV=test
).env.$(NODE_ENV)
(one of development | test | production
).env
Variables prefixed with NEXT_PUBLIC_
are available client-side (to user browsers) and server-side,
whereas non-prefixed variables are only available to the server and not visible to users. Next.js
also does not leak server-side code to the clients.
You can add any variables to these files as long as you follow these rules:
Non-sensitive variables required by browsers or browsers and server should be written
in plaintext and prefixed with NEXT_PUBLIC
directive:
NEXT_PUBLIC_XVAR="a_plaintext_value_for_xvar"
Non-sensitive variables required only by the server should be written in plaintext without
the NEXT_PUBLIC
directive:
YVAR="a_plaintext_value_for_yvar"
Sensitive or secret variables required only by the server should not be written in any file
other than .env.local
or exported in your .zshrc
profile. In production they should be
injected by Netlify
. You can you use the project build dashboard to add new sensitive variables.
npm run format
npm run lint