Properly type i18n messages

app/[locale]/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
 import { Metadata } from "next";
-import { Locale } from "@/util/i18n";
+import { Locale, Messages } from "@/util/i18n";
 
 import About from "@/components/About";
 import Banner from "@/components/Banner";
@@ -45,7 +45,7 @@ export default async function Home({
   );
 }
 
-async function getMessages(locale: string) {
+async function getMessages(locale: string): Promise<Messages> {
   try {
     return (await import(`../../messages/${locale}.json`)).default;
   } catch (error) {

components/About.tsx

@@ -3,7 +3,7 @@ import experience from "@/content/experience.json";
 import profilePic from "@/cv/profile_picture.jpg";
 import styles from "./About.module.scss";
 import { formatDate } from "@/util/date-time";
-import { Locale } from "@/util/i18n";
+import { Locale, Messages } from "@/util/i18n";
 
 const birthDate = new Date("1998-06-30");
 const currentDate = new Date();
@@ -17,13 +17,13 @@ export default function About({
   messages,
   locale,
 }: {
-  messages: any;
+  messages: Messages;
   locale: Locale;
 }) {
   const aboutMyself = messages.about.myself
-    .replace("{currentAge}", currentAge)
+    .replace("{currentAge}", String(currentAge))
     .replace("{startDate}", formatDate(new Date(currentJob.startDate), locale))
-    .replace("{jobTitle}", currentJob.title)
+    .replace("{jobTitle}", String(currentJob.title))
     .replace("{company}", currentJob.company);
 
   return (

components/Banner.tsx

@@ -1,11 +1,11 @@
-import { Locale } from "@/util/i18n";
+import { Locale, Messages } from "@/util/i18n";
 import styles from "./Banner.module.scss";
 
 export default function Banner({
   messages,
   locale,
 }: {
-  messages: any;
+  messages: Messages;
   locale: Locale;
 }) {
   return (

components/Contact.tsx

@@ -1,6 +1,7 @@
+import { Messages } from "@/util/i18n";
 import styles from "./Contact.module.scss";
 
-export default function Contact({ messages }: { messages: any }) {
+export default function Contact({ messages }: { messages: Messages }) {
   return (
     <div id="contact" className={styles.contact}>
       <h2>{messages.header.sections.contact}</h2>

components/Education.tsx

@@ -5,6 +5,7 @@ import {
   Locale,
   MaybeMultilingualList,
   MaybeMultilingualString,
+  Messages,
   getMultilingualContent,
 } from "@/util/i18n";
 
@@ -22,7 +23,7 @@ export default function Education({
   messages,
   locale,
 }: {
-  messages: any;
+  messages: Messages;
   locale: Locale;
 }) {
   return (

components/Experience.tsx

@@ -24,7 +24,7 @@ export default function ExperienceTimeline({
   messages,
   locale,
 }: {
-  messages: any;
+  messages: Messages;
   locale: Locale;
 }) {
   return (

components/Header.tsx

@@ -3,14 +3,14 @@
 import clsx from "clsx";
 import { useState } from "react";
 import styles from "./Header.module.scss";
-import { Locale, supportedLocales } from "@/util/i18n";
+import { Locale, Messages, supportedLocales } from "@/util/i18n";
 import React from "react";
 
 export default function Header({
   messages,
   locale,
 }: {
-  messages: any;
+  messages: Messages;
   locale: Locale;
 }) {
   const [isMobileMenuOpened, setMobileMenuOpened] = useState(false);

components/Projects.tsx

@@ -5,14 +5,15 @@ import styles from "./Projects.module.scss";
 import {
   Locale,
   MaybeMultilingualString,
+  Messages,
   getMultilingualContent,
 } from "@/util/i18n";
 
 export default function Projects({
   messages,
   locale,
 }: {
-  messages: any;
+  messages: Messages;
   locale: Locale;
 }) {
   return (
@@ -51,7 +52,7 @@ function ProjectItem({
   sourceCodeUrl?: string;
   technologies: Technology[];
   title: MaybeMultilingualString;
-  messages: any;
+  messages: Messages;
   locale: Locale;
 }) {
   const translatedTitle = getMultilingualContent(title, locale);
@@ -103,7 +104,7 @@ function Technologies({
   messages,
 }: {
   technologies: Technology[];
-  messages: any;
+  messages: Messages;
 }) {
   return (
     <div className={styles.projectLogos}>
@@ -119,7 +120,7 @@ function TechnologyItem({
   image,
   name,
   messages,
-}: Technology & { messages: any }) {
+}: Technology & { messages: Messages }) {
   return (
     <a className={styles.projectLogoLink} href={url} key={name} target="_blank">
       {typeof image === "string" ? (

components/Skills.tsx

@@ -1,9 +1,10 @@
 import rawSkills from "@/content/skills.json";
+import { Messages } from "@/util/i18n";
 import styles from "./Skills.module.scss";
 
 const skills = rawSkills.map((skill) => skill.name).sort();
 
-export default function Skills({ messages }: { messages: any }) {
+export default function Skills({ messages }: { messages: Messages }) {
   return (
     <div id="skills" className={styles.skills}>
       <h2 className="heading">{messages.header.sections.skills}</h2>

util/i18n.ts

@@ -1,3 +1,6 @@
+import defaultMessages from '@/messages/de.json';
+export type Messages = typeof defaultMessages;
+
 export enum Locale {
   de = "de",
   en = "en",