Feat add Translation (#9)

* feat: adding src folder

* feat: configure next-intl

* style: cleaning code

* style: cleaning files

* feat: merge with master

* fix: trying to fix api endpoint not found error

* feat: update image llm to stable diffusion xl

* fix: making api call works

* fix: linking from site to dashboard

* fix: fixing small bugs & design

* fix: fixing hydration errors

* fix: fixing front end minor errors and improving hero section text

* feat: general usage of t3-cross-env

* feat: updating README

* feat: updating path management for sign in & sign up url

* style: cleaning middleware

* fix: adding mention on why we do not use default CLERK env variables

* fix: rollback nvm to match vercel env

* fix: fixing routing path for default locale

* fix: rollback constant for production

* fix: adding back dev environment (in comments)

* fix: update some text

* feat: removing clerk default variable for more understandability

* fix: fixing css layout for cards

* fix: cleaning front end minor issues

---------

Co-authored-by: Guillaume Dieudonné <8122069+GuiDieudo@users.noreply.github.com>

Author: 0xGeegZ

.env.example

@@ -1,13 +1,9 @@
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=
 
-NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
-NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
-NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
-NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
-
 OPENAI_API_KEY=
 REPLICATE_API_TOKEN=
+GENERATED_BY_API_KEY=
 
 DATABASE_URL=
 
@@ -17,5 +13,3 @@ STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
 NEXT_PUBLIC_CRISP_WEBSITE_ID=
-
-GENERATED_BY_API_KEY=

.nvmrc

@@ -0,0 +1 @@
+v18.17.1

README.md

@@ -10,6 +10,7 @@ Features:
 
 - AI prompts folders to generate main project pages (Terms, FAQ, Privacy Policy, About, Documentation, etc.)
 - Folder structure in [Next 13 App Router](https://nextjs.org/docs/app)
+- [Next Intl](https://next-intl-docs.vercel.app/) for Internationalization (compatible with App Router Server 1 Client components)
 - [Shadcn](https://ui.shadcn.com/) UI on top of Radix UI
 - [Tailwind](https://tailwindcss.com/docs/installation) & [Framer Motion](https://www.framer.com/motion/) animations and effects
 - [Clerk Authentication](https://clerk.com/docs) (Email, Google, 9+ Social Logins)
@@ -45,7 +46,7 @@ These prompts are designed to help individuals and teams quickly start a SaaS bu
 
 ### Prerequisites
 
-**Node version 18.x.x**
+**Node version 20.x.x**
 
 ### Cloning the repository
 
@@ -91,3 +92,11 @@ Running commands with npm `npm run [command]`
 | `start`       | Starts the production application        |
 | `lint`        | Lints the application code               |
 | `postinstall` | Generates Prisma client after install    |
+
+## Internationalization
+
+This project has been fully set up for internationalization, using [Next Intl](https://next-intl-docs.vercel.app/). However, the pages and components have not been translated yet. This means that while the infrastructure for supporting multiple languages is in place, the actual content in different languages is not available.
+
+If you would like to contribute to this project, we have created an issue for translating the pages and components. Any help in this regard would be greatly appreciated. You can find the issue on our GitHub repository and contribute by providing translations for the various strings used throughout the application.
+
+Please note that while contributing, you should follow the guidelines provided in the issue to ensure consistency and quality in translations. Thank you in advance for your contributions!

env.mjs

@@ -2,6 +2,10 @@ import { createEnv } from "@t3-oss/env-nextjs"
 import { z } from "zod"
 
 export const env = createEnv({
+  /*
+   * Serverside Environment variables, not available on the client.
+   * Will throw if you access these variables on the client.
+   */
   server: {
     DATABASE_URL: z.string().url().min(1),
 
@@ -14,16 +18,39 @@ export const env = createEnv({
     STRIPE_API_KEY: z.string().optional(),
     STRIPE_WEBHOOK_SECRET: z.string().optional(),
   },
+  /*
+   * Environment variables available on the client (and server).
+   *
+   * 💡 You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
+   */
   client: {
-    NEXT_PUBLIC_APP_URL: z.string().url().optional(),
-
-    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
-    NEXT_PUBLIC_CLERK_SIGN_IN_URL: z.string().min(1),
-    NEXT_PUBLIC_CLERK_SIGN_UP_URL: z.string().min(1),
-    NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL: z.string().min(1),
-    NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL: z.string().min(1),
+    NEXT_PUBLIC_APP_URL: z.string().url().min(1),
 
     NEXT_PUBLIC_CRISP_WEBSITE_ID: z.string().optional(),
   },
-  experimental__runtimeEnv: {},
+  /*
+   * Due to how Next.js bundles environment variables on Edge and Client,
+   * we need to manually destructure them to make sure all are included in bundle.
+   *
+   * 💡 You'll get type errors if not all variables from `server` & `client` are included here.
+   */
+  runtimeEnv: {
+    DATABASE_URL: process.env.DATABASE_URL,
+
+    CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
+
+    GENERATED_BY_API_KEY: process.env.GENERATED_BY_API_KEY,
+    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    REPLICATE_API_TOKEN: process.env.REPLICATE_API_TOKEN,
+
+    STRIPE_API_KEY: process.env.STRIPE_API_KEY,
+    STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
+
+    NEXT_PUBLIC_APP_URL: process.env.NEXT_PUBLIC_APP_URL,
+
+    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
+      process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+
+    NEXT_PUBLIC_CRISP_WEBSITE_ID: process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID,
+  },
 })

next.config.mjs

@@ -2,6 +2,9 @@
 
 import million from "million/compiler"
 import "./env.mjs"
+import withNextIntl from "next-intl/plugin"
+
+const i18nConfig = "./src/i18n/i18n.ts"
 
 const millionConfig = {
   auto: { rsc: true },
@@ -19,12 +22,19 @@ const nextConfig = {
   }),
   images: {
     domains: [
+      "images.clerk.com",
+      "www.gravatar.com",
       "googleusercontent.com",
+      "pbxt.replicate.delivery",
       "oaidalleapiprodscus.blob.core.windows.net",
       "cdn.openai.com",
     ],
   },
   transpilePackages: ["react-tweet"],
 }
 
-export default million.next(nextConfig, millionConfig)
+const combinedMillionConfig = million.next(nextConfig, millionConfig)
+
+const combinedIntlConfig = withNextIntl(i18nConfig)(combinedMillionConfig)
+
+export default combinedIntlConfig

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@atlaskit/code": "^14.6.7",
-    "@clerk/nextjs": "^4.25.3",
+    "@clerk/nextjs": "^4.25.6",
     "@hookform/resolvers": "^3.3.1",
     "@prisma/client": "^5.4.2",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -43,7 +43,7 @@
     "@radix-ui/react-tooltip": "^1.0.6",
     "@react-three/drei": "^9.83.9",
     "@react-three/fiber": "^8.14.2",
-    "@t3-oss/env-nextjs": "^0.7.0",
+    "@t3-oss/env-nextjs": "^0.7.1",
     "@tanstack/react-table": "^8.10.0",
     "@types/node": "20.4.1",
     "@types/react": "18.2.14",
@@ -54,6 +54,7 @@
     "clsx": "^1.2.1",
     "cmdk": "^0.2.0",
     "cobe": "^0.6.3",
+    "country-flag-icons": "^1.5.7",
     "crisp-sdk-web": "^1.0.19",
     "date-fns": "^2.30.0",
     "eslint": "8.44.0",
@@ -63,6 +64,7 @@
     "maath": "^0.9.0",
     "million": "2.6.4",
     "next": "13.5.6",
+    "next-intl": "3.0.0-beta.19",
     "next-themes": "^0.2.1",
     "openai": "^3.3.0",
     "postcss": "8.4.25",