Development Cheatsheet and Principles - e-Learning-by-SSE/nm-self-learning GitHub Wiki

By default, next-i18next expects your translations to be organised as such:

.
└── apps
    └── site
        └── public
            └── locales
        	├── en
        	|   └── nameSpace.json
                └── de
            	    └── nameSpace.json

Each JSON file represents a namespace and contains key-value pairs that map translation keys to their corresponding strings. For example:

{
	"key1": "Tranlation1",
	"key2": "Tranlation2",
	"key3": "Translation3"
}

To translate a particular word or sentence, ensure that the relevant key exists in all applicable language files.

Adding your translation data into /apps/site/public/locales/{language}/{namespace}.json

Be aware: When adding new keys to the JSON, you need to restart you server. A site reload is not enough

To provide translations on pages using server-side rendering, import and return translations via the getServerSideProps function:

import { serverSideTranslations } from "next-i18next/serverSideTranslations";


export async function getServerSideProps({ locale }: { locale: string }) {
	return {
		props: {
			...(await serverSideTranslations(locale, ["nameSpace1", "nameSpace2"]))
		}
	};
}

Each namespace in use must be included in the array. The locale parameter is the currently selected language.

To render a translated string in your components, utilize the useTranslation hook:

import { useTranslation } from "next-i18next";

function Component() {
	const { t } = useTranslation("nameSpace");

	return(
	<div>
		{t("key1")}
	</div>
	);
}

For applying Hotkeys functionality we used react-hotkeys-hook package.

The package has three main functions.

• useHotkeys: This hook allows us to listen to hotkeys in a declarative way and execute a callback function once the user presses down the given hotkey.
• useRecordHotkeys: This hook allows you to record a hotkey stroke by the user
• isHotkeyPressed: This function allows us to check if the user is currently pressing down a key.

An example for isHotkeyPressed

import { isHotkeyPressed } from 'react-hotkeys-hook';

function Component() {
  const [count, setCount] = useState(0);

  const onClick = () => isHotkeyPressed('shift') ? setCount(count - 1) : setCount(count + 1);

  return (
    <div>
      <p>The count is: {count}</p>
      <button onClick={onClick}>Alter the count</button>
    </div>
  )
}

More information and examples are on their website: https://www.npmjs.com/package/react-hotkeys-hook

We have a library for type safe loading and saving data to local storage.

loadFromLocalStorage("test_key");
saveToLocalStorage("test_key", new Date());

For this you need to define the storage schema inside the LocalStorageKeyTypeMap. E.g. ["test_key"]: Date | { test: string } | number | { objDate: Date }; Try to avoid window.localStorage.

• npm update: Aktualisiert alle Pakete bei denen die Wanted version es zulässt
• npm outdated: Gibt eine Liste an über veraltete Pakete. Es wird nichts geändert
• Updates von minor version:

npx npm-check-updates --target minor -u
npm install

npm install
npx nx migrate latest --interactive

Nun wurde eine Migration-Datei angelegt. Um diese auszuführen

npm install # erneutes ausführen wichtig!
npx nx migrate --run-migrations --create-commits
npx nx show projects

--create-commits wenn man commits für die einzelnen steps möchte. Bei Problemen prüfen:

nx migrate check