diff --git a/README.md b/README.md index 50910de..3f8bf92 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,24 @@ +# React.js Hello World (Enterprise Edition) + 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 to be continued... + +- A/B testing +- Localization +- Server-side rendering + ## Getting Started First, run the development server: -```bash +```sh bun run dev # or pnpm dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +Open [http://localhost:3000/en](http://localhost:3000/en) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. diff --git a/app/globals.css b/app/[lang]/globals.css similarity index 100% rename from app/globals.css rename to app/[lang]/globals.css diff --git a/app/growthbook.ts b/app/[lang]/growthbook.ts similarity index 100% rename from app/growthbook.ts rename to app/[lang]/growthbook.ts diff --git a/app/layout.tsx b/app/[lang]/layout.tsx similarity index 71% rename from app/layout.tsx rename to app/[lang]/layout.tsx index 8bc3f36..89a3c5a 100644 --- a/app/layout.tsx +++ b/app/[lang]/layout.tsx @@ -3,6 +3,11 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import Providers from './providers'; +import type { Locales } from '@/types/locales'; + +export async function generateStaticParams() { + return [{ lang: 'en' }, { lang: 'es' }]; +} const inter = Inter({ subsets: ['latin'] }); @@ -13,11 +18,15 @@ export const metadata: Metadata = { export default function RootLayout({ children, + params, }: { children: React.ReactNode; + params: { + lang: Locales; + }; }) { return ( - + {children} diff --git a/app/page.tsx b/app/[lang]/page.tsx similarity index 95% rename from app/page.tsx rename to app/[lang]/page.tsx index be146b8..234c12c 100644 --- a/app/page.tsx +++ b/app/[lang]/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 (
@@ -40,7 +47,7 @@ export default function Home() { />
- +
import('../dictionaries/en.json').then((module) => module.default), - es: () => import('../dictionaries/es.json').then((module) => module.default), -}; - -export const getDictionary = async (locale: 'es' | 'en') => - dictionaries[locale](); diff --git a/components/hello-world/hello-world.tsx b/components/hello-world/hello-world.tsx index 662dff8..eaf1a24 100644 --- a/components/hello-world/hello-world.tsx +++ b/components/hello-world/hello-world.tsx @@ -2,10 +2,17 @@ import Image from 'next/image'; import Earth from '@/public/earth.svg'; import { Title } from './hello-world.css'; -import { getDictionary } from '../../app/dictionaries'; +import { getDictionary } from '@/dictionaries/index'; +import type { Locales } from '@/types/locales'; -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 ( <>

diff --git a/dictionaries/en.json b/dictionaries/en.json index 8a91e98..2ba81d0 100644 --- a/dictionaries/en.json +++ b/dictionaries/en.json @@ -1,3 +1,5 @@ { - "hello": "Hola" -} \ No newline at end of file + "hello": "Hello", + "hey": "Hey", + "world": "World" +} diff --git a/dictionaries/es.json b/dictionaries/es.json index a479da3..d6c98c2 100644 --- a/dictionaries/es.json +++ b/dictionaries/es.json @@ -1,3 +1,5 @@ { - "hello": "Hello" -} \ No newline at end of file + "hello": "Hola", + "hey": "Eh", + "world": "Mundo" +} diff --git a/dictionaries/index.ts b/dictionaries/index.ts new file mode 100644 index 0000000..55a43c2 --- /dev/null +++ b/dictionaries/index.ts @@ -0,0 +1,9 @@ +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](); diff --git a/tsconfig.json b/tsconfig.json index dc4f358..94cb2f1 100644 --- 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 new file mode 100644 index 0000000..9396ab6 --- /dev/null +++ b/types/locales.ts @@ -0,0 +1 @@ +export type Locales = 'en' | 'es';