feat(react-email): Non-encoded email slugs

packages/react-email/src/app/preview/[slug]/page.tsx → packages/react-email/src/app/preview/[...slug]/page.tsx

@@ -8,13 +8,13 @@ import Preview from './preview';
 export const dynamicParams = true;
 
 export interface PreviewParams {
-  slug: string;
+  slug: string[];
 }
 
 export default async function Page({ params }: { params: PreviewParams }) {
-  // will come in here as a relative path to the email
-  // ex: authentication/verify-password.tsx but encoded like authentication%20verify-password.tsx
-  const slug = decodeURIComponent(params.slug);
+  // will come in here as segments of a relative path to the email
+  // ex: ['authentication', 'verify-password.tsx']
+  const slug = params.slug.join('/');
   const emailsDirMetadata = await getEmailsDirectoryMetadata(
     emailsDirectoryAbsolutePath,
   );
@@ -47,5 +47,5 @@ export default async function Page({ params }: { params: PreviewParams }) {
 }
 
 export function generateMetadata({ params }: { params: PreviewParams }) {
-  return { title: `${decodeURIComponent(params.slug)} — React Email` };
+  return { title: `${params.slug.join('/')} — React Email` };
 }

packages/react-email/src/cli/commands/build.ts

@@ -104,9 +104,15 @@ const getEmailSlugsFromEmailDirectory = (
     .replace(emailsDirectoryAbsolutePath, '')
     .trim();
 
-  const slugs = [] as string[];
+  const slugs = [] as Array<string>[];
   emailDirectory.emailFilenames.forEach((filename) =>
-    slugs.push(path.join(directoryPathRelativeToEmailsDirectory, filename)),
+    slugs.push(
+      path
+        .join(directoryPathRelativeToEmailsDirectory, filename)
+        .split(path.sep)
+        // sometimes it gets empty segments due to trailing slashes
+        .filter((segment) => segment.length > 0),
+    ),
   );
   emailDirectory.subDirectories.forEach((directory) => {
     slugs.push(
@@ -136,7 +142,7 @@ const forceSSGForEmailPreviews = async (
   ).map((slug) => ({ slug }));
 
   await fs.promises.appendFile(
-    path.resolve(builtPreviewAppPath, './src/app/preview/[slug]/page.tsx'),
+    path.resolve(builtPreviewAppPath, './src/app/preview/[...slug]/page.tsx'),
     `
 
 export async function generateStaticParams() { 

packages/react-email/src/components/sidebar/sidebar-directory-children.tsx

@@ -67,7 +67,7 @@ export const SidebarDirectoryChildren = (props: {
                     return (
                       <Link
                         href={{
-                          pathname: `/preview/${encodeURIComponent(emailSlug)}`,
+                          pathname: `/preview/${emailSlug}`,
                           search: searchParams.toString(),
                         }}
                         key={emailSlug}