[init] initlialize next app & convert old react app

components/LocaleSwitch.jsx

@@ -0,0 +1,76 @@
+import React, { useContext, useEffect } from "react";
+import Select from "react-select";
+import getConfig from "next/config";
+import { useRouter } from "next/router";
+
+export default function LocaleSwitch({ styles }) {
+	const router = useRouter();
+
+	let selectOptions = [
+		{ value: "en", label: "English" },
+		{ value: "de", label: "Deutsch" },
+	];
+
+	const customStyles = {
+		control: (provided, state) => ({
+			...provided,
+			background: "#fff",
+			borderColor: "#9e9e9ec0",
+			minHeight: "30px",
+			height: "30px",
+			boxShadow: state.isFocused ? null : null,
+			fontSize: "0.7em",
+		}),
+
+		valueContainer: (provided, state) => ({
+			...provided,
+			height: "30px",
+			padding: "0 0 0 5px",
+			margin: "-2px 0 0 0",
+		}),
+
+		input: (provided, state) => ({
+			...provided,
+			margin: "0px",
+		}),
+		indicatorSeparator: (state) => ({
+			display: "none",
+			padding: 0,
+			margin: 0,
+		}),
+		indicatorsContainer: (provided, state) => ({
+			...provided,
+			height: "30px",
+			padding: "0",
+		}),
+		dropdownIndicator: (provided, state) => ({
+			...provided,
+			padding: "0",
+		}),
+		option: (provided, state) => ({
+			...provided,
+			padding: "5px",
+			fontSize: "0.7em",
+		}),
+	};
+
+	return (
+		<div className={styles.navSelectContainer}>
+			{router.locale !== null ? (
+				<Select
+					styles={customStyles}
+					defaultValue={selectOptions.filter(
+						(option) => option.value === router.locale
+					)}
+					onChange={(v) => {
+						router.push(router.asPath, undefined, { locale: v.value });
+					}}
+					options={selectOptions}
+					classNamePrefix="nav-select"
+				/>
+			) : (
+				""
+			)}
+		</div>
+	);
+}