Implement Internationalization

client/package.json

@@ -25,6 +25,7 @@
     "i18next": "^23.6.0",
     "next": "13.4.13",
     "next-i18next": "^14.0.3",
+    "next-intl": "^2.22.1",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-date-range": "^1.4.0",

client/src/app/(page-components)/MultiPageForm.tsx → client/src/app/[locale]/(page-components)/MultiPageForm.tsx

@@ -18,6 +18,7 @@ import { DateRange } from "react-date-range";
 import { addDays } from "date-fns";
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
+import { useTranslations } from "next-intl";
 
 import Image from "next/image";
 
@@ -61,6 +62,8 @@ const StepPage: React.FC<StepPageProps> = ({
   buttonClick,
   isDisable = true,
 }) => {
+  const t = useTranslations("TripCreation");
+
   return (
     <div
       style={{
@@ -96,7 +99,7 @@ const StepPage: React.FC<StepPageProps> = ({
             padding: "10px 0px",
           }}
         >
-          Sounds great
+          {t("button_text")}
         </Button>
       </div>
     </div>
@@ -110,6 +113,7 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
   const [endDate, setEndDate] = useState(addDays(new Date(), 7));
   const [title, setTitle] = useState("");
   const [destination, setDestination] = useState("");
+  const t = useTranslations("TripCreation");
 
   useEffect(() => {
     setProgress((activeStep / (steps.length - 1)) * 100);
@@ -199,13 +203,19 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                 alignItems: "center",
               }}
             >
-              <div style={{ fontSize: "1.3rem", width: "95%" }}>
-                Welcome to PocketMate!{" "}
+              <div
+                style={{
+                  fontSize: "1.3rem",
+                  width: "95%",
+                  marginBottom: "5px",
+                }}
+              >
+                {t("welcome")}
               </div>
               <div
                 style={{ fontSize: "1.7rem", fontWeight: "bold", width: "95%" }}
               >
-                Let's make a travel note
+                {t("welcome_sub")}
               </div>
               <div style={{ marginTop: "30%", marginBottom: "30px" }}>
                 <Image
@@ -231,12 +241,12 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                 lineHeight: 1.4,
               }}
             >
-              Where are you going for the trip?
+              {t("destination_title")}
             </div>
             <TextField
               variant="standard"
               fullWidth
-              placeholder="Please choose a travel destination"
+              placeholder={t("destination_input")}
               style={{
                 marginTop: "25px",
               }}
@@ -254,7 +264,7 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                 width: "80%",
               }}
             >
-              When shall we go?
+              {t("date_title")}
             </div>
             <div style={{ marginTop: "30px" }}>
               <DateRange
@@ -282,13 +292,13 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                 fontWeight: "bold",
               }}
             >
-              What is the Trip's name?
+              {t("trip_title")}
             </div>
             <div>
               <TextField
                 variant="standard"
                 fullWidth
-                placeholder="Propose a travel title"
+                placeholder={t("trip_input")}
                 style={{
                   marginTop: "20px",
                 }}
@@ -302,7 +312,7 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                   fontSize: "0.8rem",
                 }}
               >
-                {title.length} / {maxCharacters} Characters
+                {title.length} / {maxCharacters} {t('character')}
               </div>
             </div>
           </StepPage>
@@ -320,7 +330,7 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
               <div
                 style={{ fontSize: "2rem", fontWeight: "bold", width: "80%" }}
               >
-                A new travel note has been created
+                {t("final_title")}
               </div>
               <div style={{ marginTop: "20px", marginBottom: "30px" }}>
                 <Image
@@ -335,7 +345,7 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                 {/* Trip Title */}
                 <Grid container style={styles.resultListStyle}>
                   <Grid item xs={6} style={styles.resultKeyStyle}>
-                    Note name
+                    {t("container_title")}
                   </Grid>
                   <Grid item xs={6} style={styles.resultValueStyle}>
                     {title}
@@ -345,7 +355,7 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                 {/* Trip Destination */}
                 <Grid container style={styles.resultListStyle}>
                   <Grid item xs={6} style={styles.resultKeyStyle}>
-                    Travel Destination
+                    {t("container_destination")}
                   </Grid>
                   <Grid item xs={6} style={styles.resultValueStyle}>
                     {destination}
@@ -355,7 +365,7 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                 {/* Trip Start Date */}
                 <Grid container style={styles.resultListStyle}>
                   <Grid item xs={6} style={styles.resultKeyStyle}>
-                    Start Date
+                    {t("container_start_date")}
                   </Grid>
                   <Grid item xs={6} style={styles.resultValueStyle}>
                     {startDate?.toDateString()}
@@ -365,7 +375,7 @@ const MultiPageForm: React.FC<MultiPageFormProps> = ({ closeForm }) => {
                 {/* Trip End Date */}
                 <Grid container style={styles.resultListStyle}>
                   <Grid item xs={6} style={styles.resultKeyStyle}>
-                    End Date
+                    {t("container_end_date")}
                   </Grid>
                   <Grid item xs={6} style={styles.resultValueStyle}>
                     {endDate?.toDateString()}

client/src/app/(routes)/sso-login/page.tsx → client/src/app/[locale]/(routes)/sso-login/page.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { Typography, Button } from "@mui/material";
 import Image from "next/image";
-import { LoginLinkColor } from "@/app/constants";
+import { LoginLinkColor } from "@/app/[locale]/constants";
 
 interface SSOButtonProps {
   image: string;

client/src/app/[locale]/layout.tsx

@@ -0,0 +1,25 @@
+import {NextIntlClientProvider} from 'next-intl';
+import {notFound} from 'next/navigation';
+
+export function generateStaticParams() {
+  return [{locale: 'en'}, {locale: 'de'}];
+}
+
+export default async function LocaleLayout({children, params: {locale}}: any) {
+  let messages;
+  try {
+    messages = (await import(`../../messages/${locale}.json`)).default;
+  } catch (error) {
+    notFound();
+  }
+
+  return (
+    <html lang={locale}>
+      <body>
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          {children}
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

client/src/app/page.tsx → client/src/app/[locale]/page.tsx

@@ -93,7 +93,7 @@ export default function Home() {
       </div>
 
       {/* Body */}
-      <div style={{marginTop: "10%"}}>
+      <div style={{ marginTop: "10%" }}>
         <SwipableCards />
       </div>
 
@@ -132,7 +132,7 @@ export default function Home() {
           style: {
             overflowY: "hidden",
             maxHeight: "100%",
-            backgroundColor: BackgroundColor
+            backgroundColor: BackgroundColor,
           },
         }}
       >

client/src/messages/en.json

@@ -0,0 +1,18 @@
+{
+  "TripCreation": {
+    "welcome": "Welcome to PocketMate!",
+    "welcome_sub": "Let's make a travel note",
+    "destination_title": "Where are you going for the trip?",
+    "destination_input": "Select Country",
+    "date_title": "When shall we go?",
+    "trip_title": "What is the Trip's name?",
+    "trip_input": "Propose a travel title",
+    "final_title": "A new travel note has been created",
+    "container_title": "Trip Name",
+    "container_destination": "Travel Destination",
+    "container_start_date": "Start Date",
+    "container_end_date": "End Date",
+    "button_text": "Next",
+    "character": "Characters"
+  }
+}

client/src/messages/kr.json

@@ -0,0 +1,18 @@
+{
+  "TripCreation": {
+    "welcome": "환영합니다",
+    "welcome_sub": "여행 노트를 만들어봐요",
+    "destination_title": "어디로 가시나요?",
+    "destination_input": "나라 선택",
+    "date_title": "언제 가시나요?",
+    "trip_title": "이 여행의 이름은 무엇인가요?",
+    "trip_input": "여행노트 이름을 적어주세요",
+    "final_title": "새로운 여행 노트가 만들어졌어요!",
+    "container_title": "노트 이름",
+    "container_destination": "여행 국가",
+    "container_start_date": "여행 시작일",
+    "container_end_date": "여행 종료일",
+    "button_text": "즐거운 여행 함께 해봐요~",
+    "character": "자"
+  }
+}

client/src/middleware.ts

@@ -0,0 +1,15 @@
+import createMiddleware from 'next-intl/middleware';
+
+export default createMiddleware({
+  // A list of all locales that are supported
+  locales: ['en', 'kr'],
+
+  // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
+  defaultLocale: 'en'
+});
+
+export const config = {
+  // Skip all paths that should not be internationalized. This example skips
+  // certain folders and all pathnames with a dot (e.g. favicon.ico)
+  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
+};

client/tsconfig.json

@@ -23,6 +23,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/[lang]/page.js"],
   "exclude": ["node_modules"]
 }