Add locale for en and cn

next.config.mjs

@@ -1,4 +1,5 @@
 import { withContentlayer } from "next-contentlayer"
+import plugin from 'next-intl/plugin'
 
 /**
  * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
@@ -23,4 +24,7 @@ const nextConfig = {
   //   ignoreBuildErrors: true,
   // },
 }
-export default withContentlayer(nextConfig)
+
+const withNextIntl = plugin("./src/i18n.ts");
+
+export default withNextIntl(withContentlayer(nextConfig));

package.json

@@ -20,6 +20,7 @@
     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache"
   },
   "dependencies": {
+    "@clerk/localizations": "^1.23.1",
     "@clerk/nextjs": "^4.21.13",
     "@clerk/themes": "^1.7.5",
     "@clerk/types": "^3.46.1",
@@ -63,6 +64,7 @@
     "lucide-react": "^0.258.0",
     "next": "^13.4.8",
     "next-contentlayer": "^0.3.4",
+    "next-intl": "3.0.0-beta.9",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-cropper": "^2.3.3",

src/app/(dashboard)/dashboard/stores/[storeId]/page.tsx → src/app/[locale]/(dashboard)/dashboard/stores/[storeId]/page.tsx

@@ -21,7 +21,7 @@ import { Label } from "@/components/ui/label"
 import { LoadingButton } from "@/components/ui/loading-button"
 import { Textarea } from "@/components/ui/textarea"
 import { ConnectStoreToStripeButton } from "@/components/connect-store-to-stripe-button"
-import { checkStripeConnectionAction } from "@/app/_actions/stripe"
+import { checkStripeConnectionAction } from "@/app/[locale]/_actions/stripe"
 
 export const metadata: Metadata = {
   metadataBase: new URL(env.NEXT_PUBLIC_APP_URL),

src/app/(lobby)/build-a-board/page.tsx → src/app/[locale]/(lobby)/build-a-board/page.tsx

@@ -9,8 +9,8 @@ import { BoardBuilder } from "@/components/board-builder"
 import { Header } from "@/components/header"
 import { Icons } from "@/components/icons"
 import { Shell } from "@/components/shells/shell"
-import { getCartItemsAction } from "@/app/_actions/cart"
-import { getProductsAction } from "@/app/_actions/product"
+import { getCartItemsAction } from "@/app/[locale]/_actions/cart"
+import { getProductsAction } from "@/app/[locale]/_actions/product"
 
 export const metadata: Metadata = {
   metadataBase: new URL(env.NEXT_PUBLIC_APP_URL),

src/app/(lobby)/categories/[category]/[subcategory]/page.tsx → src/app/[locale]/(lobby)/categories/[category]/[subcategory]/page.tsx

@@ -4,8 +4,8 @@ import { toTitleCase, unslugify } from "@/lib/utils"
 import { Header } from "@/components/header"
 import { Products } from "@/components/products"
 import { Shell } from "@/components/shells/shell"
-import { getProductsAction } from "@/app/_actions/product"
-import { getStoresAction } from "@/app/_actions/store"
+import { getProductsAction } from "@/app/[locale]/_actions/product"
+import { getStoresAction } from "@/app/[locale]/_actions/store"
 
 // Running out of edge function execution units on vercel free plan
 // export const runtime = "edge"

src/app/(lobby)/categories/[category]/loading.tsx → src/app/[locale]/(lobby)/categories/[category]/loading.tsx

@@ -1,4 +1,4 @@
-import ProductsLoading from "@/app/(lobby)/products/loading"
+import ProductsLoading from "@/app/[locale]/(lobby)/products/loading"
 
 export default function CategoryLoading() {
   return <ProductsLoading />

src/app/(lobby)/categories/[category]/page.tsx → src/app/[locale]/(lobby)/categories/[category]/page.tsx

@@ -4,8 +4,8 @@ import { toTitleCase } from "@/lib/utils"
 import { Header } from "@/components/header"
 import { Products } from "@/components/products"
 import { Shell } from "@/components/shells/shell"
-import { getProductsAction } from "@/app/_actions/product"
-import { getStoresAction } from "@/app/_actions/store"
+import { getProductsAction } from "@/app/[locale]/_actions/product"
+import { getStoresAction } from "@/app/[locale]/_actions/store"
 
 // Running out of edge function execution units on vercel free plan
 // export const runtime = "edge"

src/app/(lobby)/page.tsx → src/app/[locale]/(lobby)/page.tsx

@@ -21,6 +21,7 @@ import {
 import { Icons } from "@/components/icons"
 import { ProductCard } from "@/components/product-card"
 import { Shell } from "@/components/shells/shell"
+import { getTranslator } from "next-intl/server"
 
 // Running out of edge function execution units on vercel free plan
 // export const runtime = "edge"
@@ -29,7 +30,7 @@ import { Shell } from "@/components/shells/shell"
 // Read more: https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
 export const dynamic = "force-dynamic"
 
-export default async function IndexPage() {
+export default async function IndexPage({params: {locale}}) {
   const allProducts = await db
     .select()
     .from(products)
@@ -77,6 +78,8 @@ export default async function IndexPage() {
 
   const githubStars = await getGithubStars()
 
+  const t = await getTranslator(locale, 'Index');
+
   return (
     <Shell as="div" className="gap-12">
       <section
@@ -94,11 +97,10 @@ export default async function IndexPage() {
           </Link>
         ) : null}
         <h1 className="text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:text-6xl lg:leading-[1.1]">
-          An e-commerce skateshop built with everything new in Next.js 13
+          {t("title")}
         </h1>
         <Balance className="max-w-[46rem] text-lg text-muted-foreground sm:text-xl">
-          Buy and sell skateboarding products from independent brands and stores
-          around the world
+          {t("subtitle")}
         </Balance>
         <div className="flex flex-wrap items-center justify-center gap-4">
           <Link

src/app/(lobby)/products/page.tsx → src/app/[locale]/(lobby)/products/page.tsx

@@ -5,8 +5,8 @@ import { env } from "@/env.mjs"
 import { Header } from "@/components/header"
 import { Products } from "@/components/products"
 import { Shell } from "@/components/shells/shell"
-import { getProductsAction } from "@/app/_actions/product"
-import { getStoresAction } from "@/app/_actions/store"
+import { getProductsAction } from "@/app/[locale]/_actions/product"
+import { getStoresAction } from "@/app/[locale]/_actions/store"
 
 // Running out of edge function execution units on vercel free plan
 // export const runtime = "edge"