Add i18n client and translation

.vscode/settings.json

@@ -130,4 +130,14 @@
     "editor.tabSize": 4
   },
   "git.ignoreLimitWarning": true,
+  "[javascript][javascriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "never"
+    }
+  },
+  "[typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  },
 }

README.md

@@ -1,6 +1,6 @@
 # nextjs-ninja
 
-This is a starter template that integrates nextjs, mui and firebase for typescript.
+A starter template for TypeScript that includes nextjs app routing, React-bootstrap, i18next, and Firebase.
 
 ## Folder and file Structure
 
@@ -9,11 +9,12 @@ The folder and file structure is based on nextjs app router [Next.js Project Str
 ```txt
 .
 ├── app/                        # App Router
-│   └── [lang]/                 # Dynamic route segment
+│   └── [lng]/                  # Dynamic route segment
 │   │   └── <page>/             # Route segment
 │   │   │   └── _components/    # Opt folder and all child segments out of routing
 │   │   ├── layout.ts           # Layout
 │   │   └── page.ts             # Page
+│   ├── i18n/
 │   ├── icon.ts                 # Generated App Icon
 │   ├── apple-icon.ts           # Generated Apple App Icon
 │   ├── opengraph-image.ts      # Generated Open Graph image
@@ -49,6 +50,10 @@ The folder and file structure is based on nextjs app router [Next.js Project Str
 npx create-next-app@latest . --typescript
 ```
 
+```shell
+npm install server-only
+```
+
 Set the current Node.js version.
 
 ```shell
@@ -74,6 +79,12 @@ npm install zod react-hook-form @hookform/resolvers
 # npm install yup formik
 ```
 
+Generate RFC-compliant UUIDs in JavaScript
+
+```shell
+npm install uuid @types/uuid
+```
+
 Start the development server.
 
 ```shell
@@ -84,6 +95,7 @@ npm run dev
 
 - [EsLint](docs/EsLint.md)
 - [Firebase](docs/Firebase.md)
+- [i18next](docs/i18next.md)
 
 ## Usage
 
@@ -106,6 +118,12 @@ Start the firebase emulator.
 firebase emulators:start
 ```
 
+Set the expiration of a preview channel
+
+```shell
+firebase hosting:channel:deploy preview --expires 1d
+```
+
 Start firebase deployment.
 
 ```shell

app/[lng]/(auth)/farewell/page.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+// The React Framework.
+import Link from 'next/link';
+
+// Bootstrap components built with React.
+import Container from 'react-bootstrap/Container';
+
+// Custom components
+import { Area, Footer } from '@/components/layout';
+
+// Internationalization
+import { useTranslation } from '@/app/i18n/client';
+
+export default function Page({ params: { lng } }: { params: { lng: string } }): JSX.Element {
+  const { t } = useTranslation(lng, 'authentication');
+
+  return (
+    <>
+      <Area className="main-area">
+        <Container>
+          <h1 className="mb-4 text-center display-1">{t('Farewell')}</h1>
+          <div className="mb-4 text-center">
+            <p>
+              {t('Your are one of the best people.')} <br />
+              {t('I will never forget you!')} <br />
+              {t('Until we meet again!')}
+            </p>
+            <Link href={`/${lng}`}>{t('Home')}</Link>
+          </div>
+        </Container>
+      </Area>
+      <Footer />
+    </>
+  );
+}

app/[lang]/(auth)/forgot-username/page.tsx → app/[lng]/(auth)/forgot-password/page.tsx

@@ -1,20 +1,27 @@
 'use client';
 
+// The React Framework.
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
+// React Hooks for form state management and validation (Web + React Native).
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 
+// Bootstrap components built with React.
 import Container from 'react-bootstrap/Container';
 import Form from 'react-bootstrap/Form';
 import Nav from 'react-bootstrap/Nav';
 import Button from 'react-bootstrap/Button';
 
+// Custom components
 import { Asterisk } from '@/components/form';
 import { Area, Footer } from '@/components/layout';
 
+// Internationalization
+import { useTranslation } from '@/app/i18n/client';
+
 const FormSchema = z.object({
   email: z.string().trim().nonempty('Email is required').email({ message: 'Invalid email address' }),
 });
@@ -25,7 +32,9 @@ const FormValues = {
 
 type FormTypes = z.infer<typeof FormSchema>;
 
-export default function Page({ params }: { params: { lang: string } }): JSX.Element {
+export default function Page({ params: { lng } }: { params: { lng: string } }): JSX.Element {
+  const router = useRouter();
+  const { t } = useTranslation(lng, 'authentication');
   const {
     register,
     handleSubmit,
@@ -36,24 +45,23 @@ export default function Page({ params }: { params: { lang: string } }): JSX.Elem
     resolver: zodResolver(FormSchema),
     defaultValues: FormValues,
   });
-  const router = useRouter();
 
   const onSubmit = (data: FormTypes) => {
     console.log(data);
     reset();
-    router.push('/login');
+    router.push(`/${lng}/reset-password`);
   };
 
   return (
     <>
       <Area className="main-area">
         <Container>
-          <h1 className="mb-4 text-center display-1">Forgot Username</h1>
+          <h1 className="mb-4 text-center display-1">{t('Forgot Password')}</h1>
 
           <Form className="mb-4 mx-auto" onSubmit={handleSubmit(onSubmit)} style={{ maxWidth: 320 }}>
             <Form.Group className="mb-3">
               <Form.Label>
-                Email <Asterisk />
+                {t('Email')} <Asterisk />
               </Form.Label>
               <Form.Control
                 type="email"
@@ -68,16 +76,16 @@ export default function Page({ params }: { params: { lang: string } }): JSX.Elem
             </Form.Group>
 
             <Button type="submit" className="w-100" variant="primary" disabled={isSubmitting}>
-              Send Username
+              {t('Reset Password')}
             </Button>
           </Form>
 
           <Nav className="mb-5 justify-content-center">
-            <Nav.Link as={Link} href="/login">
-              &#183; Already have an account?
+            <Nav.Link as={Link} href={`/${lng}/signin`}>
+              &#183; {t('Already have an account?')}
             </Nav.Link>
-            <Nav.Link as={Link} href="/forgot-password">
-              &#183; Forgot your password?
+            <Nav.Link as={Link} href={`/${lng}/forgot-username`}>
+              &#183; {t('Forgot your username?')}
             </Nav.Link>
           </Nav>
         </Container>