Merge branch 'release/1.0.0-beta.2'

Author: nekofar

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.0-beta.2] - 2023-07-21
+
+### <!-- 02 -->Bug Fixes
+
+- Add page title and update locale files
+- Implement `useLingui` hook for proper translation rendering"
+
+### <!-- 04 -->Refactor
+
+- Improve code readability with proper spacing
+
 ## [1.0.0-beta.1] - 2023-07-21
 
 ### <!-- 05 -->Documentation

README.md

@@ -23,12 +23,12 @@ by the coupling of Next.js's SSG and Lingui.
 
 ### Key Features
 
-* **Static Site Generation with Next.js**: Experience the unique advantages of utilizing Next.js in our static web
+- **Static Site Generation with Next.js**: Experience the unique advantages of utilizing Next.js in our static web
   application. This includes benefits such as improved performance and SEO, client-side routing, and a more streamlined
   development process.
-* **Translation Management with Lingui**: Discover how Lingui simplifies handling translations in our static web app,
+- **Translation Management with Lingui**: Discover how Lingui simplifies handling translations in our static web app,
   from message extraction to language pluralization and localized formatting.
-* **Real-time Language Switching**: Experience an interactive feature of our static web app that enables dynamic
+- **Real-time Language Switching**: Experience an interactive feature of our static web app that enables dynamic
   language switching. This allows users to effortlessly switch between different languages without navigating away from
   their current page.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-lingui-template",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/locales/ar/messages.po

@@ -13,14 +13,18 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: Poedit 3.3.2\n"
 
-#: src/pages/[locale]/index.tsx:18
+#: src/pages/[locale]/index.tsx:28
 msgid "Building a Multi-Lingual Website"
 msgstr "بناء موقع متعدد اللغات"
 
+#: src/pages/[locale]/index.tsx:18
+msgid "Next.js & Lingui: Building a Multi-Lingual Website"
+msgstr "Next.js & Lingui: بناء موقع متعدد اللغات"
+
 #: src/components/locale-switcher.tsx:20
 msgid "Open options"
 msgstr "افتح الخيارات"
 
-#: src/pages/[locale]/index.tsx:21
+#: src/pages/[locale]/index.tsx:31
 msgid "Welcome to our Next.js and Lingui demo site! Discover the power of combining Next.js, a powerful React framework for building server-side rendered applications, with Lingui, the ultimate solution for multi-lingual support in your web projects."
 msgstr "مرحبًا بك في موقعنا التجريبي لـ Next.js و Lingui! اكتشف قوة الجمع بين Next.js، إطار عمل React القوي لبناء تطبيقات تتم رسمها من جانب الخادم، مع Lingui، الحل النهائي للدعم متعدد اللغات في مشاريع الويب الخاصة بك."

src/locales/en/messages.po

@@ -13,14 +13,18 @@ msgstr ""
 "X-Generator: Poedit 3.3.2\n"
 "Plural-Forms: \n"
 
-#: src/pages/[locale]/index.tsx:18
+#: src/pages/[locale]/index.tsx:28
 msgid "Building a Multi-Lingual Website"
 msgstr "Building a Multi-Lingual Website"
 
+#: src/pages/[locale]/index.tsx:18
+msgid "Next.js & Lingui: Building a Multi-Lingual Website"
+msgstr "Next.js & Lingui: Building a Multi-Lingual Website"
+
 #: src/components/locale-switcher.tsx:20
 msgid "Open options"
 msgstr "Open options"
 
-#: src/pages/[locale]/index.tsx:21
+#: src/pages/[locale]/index.tsx:31
 msgid "Welcome to our Next.js and Lingui demo site! Discover the power of combining Next.js, a powerful React framework for building server-side rendered applications, with Lingui, the ultimate solution for multi-lingual support in your web projects."
 msgstr "Welcome to our Next.js and Lingui demo site! Discover the power of combining Next.js, a powerful React framework for building server-side rendered applications, with Lingui, the ultimate solution for multi-lingual support in your web projects."

src/locales/fa/messages.po

@@ -13,14 +13,18 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Generator: Poedit 3.3.2\n"
 
-#: src/pages/[locale]/index.tsx:18
+#: src/pages/[locale]/index.tsx:28
 msgid "Building a Multi-Lingual Website"
 msgstr "ساخت وب سایت چند زبانه"
 
+#: src/pages/[locale]/index.tsx:18
+msgid "Next.js & Lingui: Building a Multi-Lingual Website"
+msgstr "Next.js & Lingui: ساخت یک وب سایت چند زبانه"
+
 #: src/components/locale-switcher.tsx:20
 msgid "Open options"
 msgstr "باز کردن گزینه ها"
 
-#: src/pages/[locale]/index.tsx:21
+#: src/pages/[locale]/index.tsx:31
 msgid "Welcome to our Next.js and Lingui demo site! Discover the power of combining Next.js, a powerful React framework for building server-side rendered applications, with Lingui, the ultimate solution for multi-lingual support in your web projects."
 msgstr "به سایت دمو Next.js و Lingui ما خوش آمدید! قدرت ترکیب Next.js، یک فریم‌ورک React قدرتمند برای ساخت برنامه های رندر شده در سمت سرور، با Lingui، راه حل نهایی برای پشتیبانی چند زبانه در پروژه های وب خود را کشف کنید."

src/pages/[locale]/index.tsx

@@ -1,37 +1,49 @@
 import {LocaleSwitcher} from '@/components/locale-switcher'
 import {availableLocales, loadCatalog} from '@/utils/locales'
-import {Trans} from '@lingui/macro'
 import {GetStaticPropsContext} from 'next'
 import {Vazirmatn} from 'next/font/google'
+import Head from 'next/head'
+import {t, Trans} from "@lingui/macro";
+import {useLingui} from "@lingui/react";
 
 const vazirmatn = Vazirmatn({ subsets: ['latin', 'arabic'] })
 
 export default function Home() {
+  const { i18n } = useLingui()
+
   return (
-    <main
-      className={`flex min-h-screen flex-col items-center justify-between p-24 ${vazirmatn.className}`}
-    >
-      <section className="mt-16 py-8">
-        <div className="container">
-          <div className="mx-auto max-w-xl">
-            <h1 className="mb-4 text-center text-4xl font-bold leading-tight text-gray-100">
-              <Trans>Building a Multi-Lingual Website</Trans>
-            </h1>
-            <p className="mb-8 text-center text-lg text-gray-200">
-              <Trans>
-                Welcome to our Next.js and Lingui demo site! Discover the power
-                of combining Next.js, a powerful React framework for building
-                server-side rendered applications, with Lingui, the ultimate
-                solution for multi-lingual support in your web projects.
-              </Trans>
-            </p>
-            <div className="mb-4 text-center ">
-              <LocaleSwitcher />
+    <>
+      <Head>
+        <title>
+          {t(i18n)`Next.js & Lingui: Building a Multi-Lingual Website`}
+        </title>
+      </Head>
+      <main
+        className={`flex min-h-screen flex-col items-center justify-between p-24 ${vazirmatn.className}`}
+      >
+        <section className="mt-16 py-8">
+          <div className="container">
+            <div className="mx-auto max-w-xl">
+              <h1 className="mb-4 text-center text-4xl font-bold leading-tight text-gray-100">
+                <Trans>Building a Multi-Lingual Website</Trans>
+              </h1>
+              <p className="mb-8 text-center text-lg text-gray-200">
+                <Trans>
+                  Welcome to our Next.js and Lingui demo site! Discover the
+                  power of combining Next.js, a powerful React framework for
+                  building server-side rendered applications, with Lingui, the
+                  ultimate solution for multi-lingual support in your web
+                  projects.
+                </Trans>
+              </p>
+              <div className="mb-4 text-center ">
+                <LocaleSwitcher />
+              </div>
             </div>
           </div>
-        </div>
-      </section>
-    </main>
+        </section>
+      </main>
+    </>
   )
 }