fix(templates): encoding and decoding slugs in website template (#14216)

Fixes an issue where if your slugs are using special characters such as
Thai "" then it won't correctly encode or decode the slugs from params

Fixes #14177

Author: paulpopus

templates/website/src/app/(frontend)/[slug]/page.tsx

@@ -46,12 +46,13 @@ type Args = {
 export default async function Page({ params: paramsPromise }: Args) {
   const { isEnabled: draft } = await draftMode()
   const { slug = 'home' } = await paramsPromise
-  const url = '/' + slug
-
+  // Decode to support slugs with special characters
+  const decodedSlug = decodeURIComponent(slug)
+  const url = '/' + decodedSlug
   let page: RequiredDataFromCollectionSlug<'pages'> | null
 
   page = await queryPageBySlug({
-    slug,
+    slug: decodedSlug,
   })
 
   // Remove this code once your website is seeded
@@ -81,8 +82,10 @@ export default async function Page({ params: paramsPromise }: Args) {
 
 export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
   const { slug = 'home' } = await paramsPromise
+  // Decode to support slugs with special characters
+  const decodedSlug = decodeURIComponent(slug)
   const page = await queryPageBySlug({
-    slug,
+    slug: decodedSlug,
   })
 
   return generateMeta({ doc: page })

templates/website/src/app/(frontend)/posts/[slug]/page.tsx

@@ -44,8 +44,10 @@ type Args = {
 export default async function Post({ params: paramsPromise }: Args) {
   const { isEnabled: draft } = await draftMode()
   const { slug = '' } = await paramsPromise
-  const url = '/posts/' + slug
-  const post = await queryPostBySlug({ slug })
+  // Decode to support slugs with special characters
+  const decodedSlug = decodeURIComponent(slug)
+  const url = '/posts/' + decodedSlug
+  const post = await queryPostBySlug({ slug: decodedSlug })
 
   if (!post) return <PayloadRedirects url={url} />
 
@@ -77,7 +79,9 @@ export default async function Post({ params: paramsPromise }: Args) {
 
 export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
   const { slug = '' } = await paramsPromise
-  const post = await queryPostBySlug({ slug })
+  // Decode to support slugs with special characters
+  const decodedSlug = decodeURIComponent(slug)
+  const post = await queryPostBySlug({ slug: decodedSlug })
 
   return generateMeta({ doc: post })
 }

templates/website/src/utilities/generatePreviewPath.ts

@@ -17,10 +17,13 @@ export const generatePreviewPath = ({ collection, slug }: Props) => {
     return null
   }
 
+  // Encode to support slugs with special characters
+  const encodedSlug = encodeURIComponent(slug)
+
   const encodedParams = new URLSearchParams({
-    slug,
+    slug: encodedSlug,
     collection,
-    path: `${collectionPrefixMap[collection]}/${slug}`,
+    path: `${collectionPrefixMap[collection]}/${encodedSlug}`,
     previewSecret: process.env.PREVIEW_SECRET || '',
   })