fix: dictionary usage (#19)

* fix: use dictionary * chore: fix typings * fix: translation issues * chore: some moves * fix: build
pure-js · Oct 3, 2023 · 6b80b16 · 6b80b16
1 parent b6217ad
commit 6b80b16
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,18 @@
+# React.js Hello World <sup>(Enterprise Edition)</sup>
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
+## Currently Supported Features <sup>to be continued...</sup>
+
+- A/B testing
+- Localization
+- Server-side rendering
+
 ## Getting Started
 
 First, run the development server:
 
-```bash
+```sh
 bun run dev
 # or
 pnpm dev

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,23 +1,33 @@
-import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 
 import Providers from './providers';
+import type { Locales } from '@/types/locales';
+
+import './globals.css';
+
+export async function generateStaticParams() {
+  return [{ lang: 'en' }, { lang: 'es' }];
+}
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'React Hello World Enterprise Edition',
+  title: 'React Hello World | Enterprise Edition',
   description: 'Generated by create next app',
 };
 
 export default function RootLayout({
   children,
+  params,
 }: {
   children: React.ReactNode;
+  params: {
+    lang: Locales;
+  };
 }) {
   return (
-    <html lang="en">
+    <html lang={params.lang}>
       <body className={inter.className}>
         <Providers>{children}</Providers>
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,14 @@
 import Image from 'next/image';
 import { HelloWorld } from '@/components/hello-world';
+import { Locales } from '@/types/locales';
+import { getDictionary } from '@/dictionaries/index';
 
-export default function Home() {
+export default async function Home({
+  params: { lang },
+}: {
+  params: { lang: Locales };
+}) {
+  const dict = await getDictionary(lang);
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
@@ -40,7 +47,7 @@ export default function Home() {
         />
       </div>
 
-      <HelloWorld />
+      <HelloWorld name={dict.world} lang={lang} />
 
       <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
         <a

diff --git a/components/hello-world/hello-world.stories.ts b/components/hello-world/hello-world.stories.ts
@@ -15,10 +15,16 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const LoggedIn: Story = {
+export const LangdEn: Story = {
   args: {
     name: 'Jane Doe',
+    lang: 'en',
   },
 };
 
-export const LoggedOut: Story = {};
+export const LangEs: Story = {
+  args: {
+    name: 'Jane Doe',
+    lang: 'es',
+  },
+};
diff --git a/components/hello-world/hello-world.tsx b/components/hello-world/hello-world.tsx
@@ -1,11 +1,19 @@
 import Image from 'next/image';
 
 import Earth from '@/public/earth.svg';
+import { getDictionary } from '@/dictionaries/index';
+import type { Locales } from '@/types/locales';
+
 import { Title } from './hello-world.css';
-import { getDictionary } from '../../app/dictionaries';
 
-export const HelloWorld = async ({ name = 'World' }) => {
-  const dict = await getDictionary('en');
+export const HelloWorld = async ({
+  name,
+  lang = 'en',
+}: {
+  name: string;
+  lang: Locales;
+}) => {
+  const dict = await getDictionary(lang);
   return (
     <>
       <h1 className={Title}>

diff --git a/dictionaries/en.json b/dictionaries/en.json
@@ -1,3 +1,5 @@
 {
-  "hello": "Hola"
-}
+  "hello": "Hello",
+  "hey": "Hey",
+  "world": "World"
+}
diff --git a/dictionaries/es.json b/dictionaries/es.json
@@ -1,3 +1,5 @@
 {
-  "hello": "Hello"
-}
+  "hello": "Hola",
+  "hey": "Eh",
+  "world": "Mundo"
+}
diff --git a/dictionaries/index.ts b/dictionaries/index.ts
@@ -0,0 +1,10 @@
+import 'server-only';
+import type { Locales } from '@/types/locales';
+
+const dictionaries = {
+  en: () => import('./en.json').then((module) => module.default),
+  es: () => import('./es.json').then((module) => module.default),
+};
+
+export const getDictionary = async (locale: Locales) =>
+  dictionaries[locale]?.() ?? dictionaries.en();
diff --git a/i18n-config.ts b/i18n-config.ts
@@ -0,0 +1,6 @@
+export const i18n = {
+  defaultLocale: 'en',
+  locales: ['en', 'es'],
+} as const;
+
+export type Locale = (typeof i18n)['locales'][number];
diff --git a/tsconfig.json b/tsconfig.json
@@ -31,7 +31,9 @@
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     "paths": {
       "@/components/*": ["./components/*"],
-      "@/public/*": ["./public/*"]
+      "@/public/*": ["./public/*"],
+      "@/dictionaries/*": ["./dictionaries/*"],
+      "@/types/*": ["./types/*"]
     },                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */

diff --git a/types/locales.ts b/types/locales.ts
@@ -0,0 +1 @@
+export type Locales = 'en' | 'es';