feat: add i18n with Clerk components and remove custom style in globa…

…l.css file

.env

@@ -11,8 +11,6 @@ DATABASE_URL=file:next-js-boilerplate.db
 # Clerk authentication
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_bGlnaHQtbGFicmFkb3ItNTEuY2xlcmsuYWNjb3VudHMuZGV2JA
 
-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
 

src/app/[locale]/(auth)/layout.tsx

@@ -9,10 +9,25 @@ export default function AuthLayout({
   params: { locale: string };
 }) {
   let clerkLocale = enUS;
+  let signInUrl = '/sign-in';
+  let signUpUrl = '/sign-up';
 
   if (locale === 'fr') {
     clerkLocale = frFR;
   }
 
-  return <ClerkProvider localization={clerkLocale}>{children}</ClerkProvider>;
+  if (locale !== 'en') {
+    signInUrl = `/${locale}${signInUrl}`;
+    signUpUrl = `/${locale}${signUpUrl}`;
+  }
+
+  return (
+    <ClerkProvider
+      localization={clerkLocale}
+      signInUrl={signInUrl}
+      signUpUrl={signUpUrl}
+    >
+      {children}
+    </ClerkProvider>
+  );
 }

src/libs/Env.mjs

@@ -11,19 +11,16 @@ export const Env = createEnv({
   },
   client: {
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().nonempty(),
-    NEXT_PUBLIC_CLERK_SIGN_IN_URL: z.string().nonempty(),
-    NEXT_PUBLIC_CLERK_SIGN_UP_URL: z.string().nonempty(),
     NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL: z.string().nonempty(),
     NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL: z.string().nonempty(),
   },
+  // You need to destructure all the keys manually
   runtimeEnv: {
     DATABASE_URL: process.env.DATABASE_URL,
     DATABASE_AUTH_TOKEN: process.env.DATABASE_AUTH_TOKEN,
     CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
       process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
-    NEXT_PUBLIC_CLERK_SIGN_IN_URL: process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL,
-    NEXT_PUBLIC_CLERK_SIGN_UP_URL: process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL,
     NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL:
       process.env.NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL,
     NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL:

src/styles/global.css

@@ -1,21 +1,5 @@
 @tailwind base;
 
-a {
-  @apply text-blue-700;
-}
-
-a:hover {
-  @apply border-b-2 border-blue-700;
-}
-
 @tailwind components;
 
 @tailwind utilities;
-
-.content p {
-  @apply my-6;
-}
-
-.content ul {
-  @apply my-6;
-}