Added dropdown for easy locale switching.

src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { useI18n } from 'next-localization';
+import { useRouter } from 'next/router';
 import { useTheme } from 'next-themes';
-import { GetStaticProps } from 'next';
 import Link from 'next/link';
 
 import { BiMoon } from 'react-icons/bi';
@@ -10,6 +10,28 @@ import { FC } from 'react';
 
 import styles from './Navbar.module.scss';
 
+const LanguageSelector: FC = () => {
+	const router = useRouter();
+
+	const path = router.pathname;
+
+	return (
+		<select className={styles.select} defaultValue={router.locale}>
+			{router.locales.map((locale) => (
+				<option
+					key={locale}
+					onClick={() => {
+						router.push(path, path, { locale });
+					}}
+					value={locale}
+				>
+					{locale.toUpperCase()}
+				</option>
+			))}
+		</select>
+	);
+};
+
 const Navbar: FC = () => {
 	const { t } = useI18n();
 
@@ -35,10 +57,7 @@ const Navbar: FC = () => {
 						<BiMoon onClick={switchTheme} className={styles.moon} />
 						<ImSun onClick={switchTheme} className={styles.sun} />
 
-						<select className={styles.select}>
+						<LanguageSelector />
-							<option value="nl">NL</option>
-							<option value="en">EN</option>
-						</select>
 					</div>
 				</div>
 			</div>
@@ -46,12 +65,4 @@ const Navbar: FC = () => {
 	);
 };
 
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
-	const { default: lngDict = {} } = await import(`../locales/${locale}.json`);
-
-	return {
-		props: { lngDict },
-	};
-};
-
 export default Navbar;

src/locales.ts

@@ -0,0 +1,9 @@
+import { GetStaticProps } from 'next';
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+	const { default: lngDict = {} } = await import(`./locales/${locale}.json`);
+
+	return {
+		props: { lngDict },
+	};
+};

src/pages/404.tsx

@@ -4,6 +4,8 @@ import Page from '@components/Page';
 import Layout from '@components/Layout';
 import PageBuilder from '@components/PageBuilder';
 
+export { getStaticProps } from '../locales';
+
 const NotFound: FC = () => (
 	<Page title="Page not found" description="This page either doesn't exist or has been deleted">
 		<Layout>

src/pages/contact.tsx

@@ -6,6 +6,8 @@ import ReCAPTCHA from 'react-google-recaptcha';
 import Page from '@components/Page';
 import Layout from '@components/Layout';
 
+export { getStaticProps } from '../locales';
+
 import styles from './contact.module.scss';
 
 const formURL = 'https://forms.guusvanmeerveld.dev/portfolio';

src/pages/shifts.tsx

@@ -14,6 +14,8 @@ import Page from '@components/Page';
 
 import Shift from '@models/shifts';
 
+export { getStaticProps } from '../locales';
+
 import styles from './shifts.module.scss';
 
 interface APIResponse {

src/pages/thanks.tsx

@@ -4,6 +4,8 @@ import Page from '@components/Page';
 import Layout from '@components/Layout';
 import PageBuilder from '@components/PageBuilder';
 
+export { getStaticProps } from '../locales';
+
 import styles from './thanks.module.scss';
 
 const Thanks: NextPage = () => (