@websolutespa/bom-next 3.0.0

package/src/server/handlers/route.handler.ts

@@ -0,0 +1,161 @@
+import { IRedirect, IRoute, qsDeserialize } from '@websolutespa/bom-core';
+import { getRoutes, getRouteSnapshot, sortCollection, whereCollection } from '@websolutespa/payload-plugin-bowl';
+import { ResponseNotFound, ResponseSuccess } from '@websolutespa/payload-utils/server';
+import { NextRequest } from 'next/server';
+import { createPayloadRequest, getPayload as getPayload_, PayloadRequest, SanitizedConfig } from 'payload';
+import { guest } from '../../lib/const';
+import { sanitizeHref, sanitizeRedirectFrom, sanitizeRedirectTo, sanitizeRedirectUrl } from '../../lib/utils';
+import { getHandlerErrorResponse } from './error-response';
+
+/**
+ * Creates the internal `/-route` GET handler used by middleware to resolve CMS
+ * paths, route schemas, and redirects before a page is rendered.
+ *
+ * One Payload request is created per incoming API request so authentication and
+ * query context are shared by every route operation. The route service then
+ * reuses its snapshot cache, which avoids rebuilding the complete route graph
+ * for repeated market, locale, and access contexts.
+ */
+export function getRouteHandler(config: Promise<SanitizedConfig>) {
+  return async function (request: NextRequest) {
+    try {
+      const searchParams = request.nextUrl.searchParams;
+      const pathname = searchParams.get('pathname') || undefined;
+      const href = searchParams.get('href') || undefined;
+      const hrefBeforeRedirect = searchParams.get('hrefBeforeRedirect') || undefined;
+      const schema = searchParams.get('schema') || undefined;
+      const market = searchParams.get('market') || undefined;
+      const locale = searchParams.get('locale') || undefined;
+      const payload = await getPayload_({ config });
+      const req: PayloadRequest = await createPayloadRequest({
+        config,
+        request,
+      });
+      req.payload = payload;
+      req.user = guest as never;
+      if (schema && market && locale) {
+        // Schema lookups are used by middleware such as login protection. They
+        // resolve directly from the snapshot instead of enumerating routes.
+        req.query = { locale, market };
+        const route = (await getRouteSnapshot(req)).getSchema(schema, market, locale);
+        return route ? ResponseSuccess({ route }) : ResponseNotFound();
+      }
+      // console.log('routes.length', routes.length);
+      if (pathname && href) {
+        // Resolve the public path first. A successful result bypasses the
+        // redirect collection query, the costliest branch for normal traffic.
+        const resolution = (await getRouteSnapshot(req)).resolve(pathname);
+        /*
+        console.log('pathname', pathname);
+        console.log('href', href);
+        console.log('hrefBeforeRedirect', hrefBeforeRedirect);
+        */
+        const route = resolution.route;
+        // console.log('route', route, 'pathname', pathname);
+        if (route !== undefined) {
+          return ResponseSuccess({
+            parent: resolution.parent,
+            route: {
+              ...route,
+              ...(resolution.splat ? { splat: resolution.splat } : {}),
+            },
+          });
+        } else {
+          const url = new URL(href);
+          const urlBeforeRedirect = hrefBeforeRedirect ? new URL(hrefBeforeRedirect) : null;
+          const sanitizedHref = sanitizeHref(url, urlBeforeRedirect);
+          // Query only active redirects and request depth 0 because matching
+          // needs scalar fields only; this minimizes Payload serialization.
+          const { payload } = req;
+          const payloadResponse = await payload.find({
+            collection: 'redirect',
+            where: {
+              isActive: {
+                equals: true,
+              },
+            },
+            sort: 'order',
+            depth: 0,
+            limit: 10000,
+            pagination: false,
+            req,
+            overrideAccess: true,
+          });
+          let redirects = (payloadResponse.docs ? payloadResponse.docs : []) as unknown as IRedirect[];
+          redirects = redirects.map(x => ({
+            ...x,
+            from: sanitizeRedirectFrom(x.from, url, urlBeforeRedirect),
+            to: sanitizeRedirectTo(x.to),
+          }));
+          // redirects.sort((a, b) => a.order - b.order);
+          // exact match redirect resolver
+          const exactMatchResolver = (redirect: IRedirect) => {
+            const status: number = parseInt(redirect.status) || 307;
+            if (status < 400) {
+              const redirectUrl = sanitizeRedirectUrl(redirect.to, url);
+              // console.log('>>>>>>>>>> findRoute exactMatchResolver', status, redirectUrl, redirect.to);
+              return Response.json({ redirectUrl }, { status });
+            } else {
+              return Response.json('gone', { status });
+            }
+          };
+          // check exact match redirects
+          const exactMatchRedirect = redirects.find(x => x.from === sanitizedHref);
+          if (exactMatchRedirect !== undefined) {
+            // Exact matching avoids compiling patterns for the common case.
+            return exactMatchResolver(exactMatchRedirect);
+          }
+          // pattern match redirect resolver
+          const patternMatchResolver = (redirect: IRedirect) => {
+            const status: number = parseInt(redirect.status) || 307;
+            if (status < 400) {
+              const regexp = new RegExp(redirect.from);
+              let i = 0;
+              let redirectUrl = (redirect.to as string).replace(/\*/g, (...rest) => {
+                return `$${++i}`;
+              });
+              redirectUrl = sanitizedHref.replace(regexp, redirectUrl);
+              // console.log('>>>>>>>>>> findRoute patternMatchResolver', status, redirectUrl, redirect.to);
+              return Response.json({ redirectUrl }, { status });
+            } else {
+              return Response.json('gone', { status });
+            }
+          };
+          // check redirects by pattern
+          redirects.forEach(x => {
+            let expression = x.from;
+            // wrapping catchall in (.*)
+            expression = expression.replace(/\*(?!\))/g, '(.*)');
+            // wrapping expression in ^...$
+            expression = `^${expression.replace(/(^\^)|(\$$)/g, '')}$`;
+            x.from = expression;
+          });
+          // check if a regex pattern redirect does match
+          const firstMatch = redirects.find(x => sanitizedHref.match(x.from));
+          // console.log('>>>>>>>>>> findRoute firstMatch', firstMatch);
+          if (firstMatch) {
+            return patternMatchResolver(firstMatch);
+          }
+          // console.error('not found', collection);
+          // Preserve the nearest parent so middleware can render a localized
+          // 404 without a second snapshot lookup.
+          return ResponseSuccess({ parent: resolution.parent });
+        }
+      } else {
+        // The collection branch serves management/list callers. Apply in-memory
+        // filtering after the cached route graph is built, avoiding duplicate
+        // collection queries for each filter or sort combination.
+        const query = qsDeserialize(decodeURIComponent(searchParams.toString()));
+        req.query = query;
+        const routes = await getRoutes(req);
+        let items = await whereCollection<IRoute>(routes, query.where);
+        items = await sortCollection(items, query.sort);
+        return ResponseSuccess(items);
+        // return ResponseBadRequest();
+      }
+    } catch (error: unknown) {
+      console.error('routeGetHandler.error', error);
+      return getHandlerErrorResponse(error);
+    }
+  };
+}

package/src/server/handlers/sitemap.handler.ts

@@ -0,0 +1,374 @@
+import { IRoute, IRouteCanonical, defaultLocale, defaultMarket, eachMarketLocale } from '@websolutespa/bom-core';
+import { NextRequest } from 'next/server';
+import { SanitizedConfig } from 'payload';
+import { getPayload } from '../mixer';
+import { getHandlerErrorResponse } from './error-response';
+
+const origin = process.env.NEXT_PUBLIC_URL || '';
+
+export type ISiteMap = {
+  id: string;
+  updatedAt?: string | Date;
+};
+
+export function getSiteMapIndex(config: Promise<SanitizedConfig>) {
+  return async function (request: NextRequest) {
+    try {
+      const { getContext } = await getPayload({ config });
+      const { markets, locales, routes } = await getContext(defaultMarket, defaultLocale);
+      const sitemaps: ISiteMap[] = [];
+      const getTime = (date: Date | string | undefined) => {
+        return typeof date !== 'undefined' ? (typeof date === 'string' ? new Date(date) : date).getTime() : 0;
+      };
+      eachMarketLocale(markets, locales, (market, locale, markets, locales) => {
+        const sitemapRoutes = routes.filter(x => x.market === market.id && x.locale === locale.id);
+        sitemapRoutes.sort((a, b) => getTime(a.updatedAt) - getTime(b.updatedAt));
+        // console.log(sitemapRoutes.shift(), sitemapRoutes.pop());
+        sitemaps.push({
+          id: `/${market.id}/${locale.id}/sitemap.xml`,
+          updatedAt: sitemapRoutes.length > 0 ? sitemapRoutes[sitemapRoutes.length - 1]!.updatedAt : undefined,
+        });
+      });
+      const body = `<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="${origin}/sitemap.xsl"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${sitemaps.map(sitemap => `
+  <sitemap>
+    <loc>${escapeHtml(encodeURI(`${origin}${sitemap.id}`))}</loc>${sitemap.updatedAt ? `
+    <lastmod>${escapeHtml(String(sitemap.updatedAt))}</lastmod>` : ''}
+  </sitemap>
+`).join('')}
+</sitemapindex>`;
+      return new Response(body, {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/xml; charset=UTF-8',
+          'X-Frame-Options': 'SAMEORIGIN',
+          'X-Robots-Tag': 'noindex, follow',
+        },
+      });
+    } catch (error: unknown) {
+      const response = getHandlerErrorResponse(error);
+      console.error('storeHandler.sitemapIndex.error', response.status, error);
+      return response;
+    }
+  };
+}
+
+export function getSiteMapXML(config: Promise<SanitizedConfig>) {
+  return async function (request: NextRequest, {
+    params: getParams,
+  }: {
+    params: Promise<{ market?: string; locale?: string; }>;
+  }) {
+    try {
+      const params = await getParams;
+      const market = params?.market || defaultMarket;
+      const locale = params?.locale || defaultLocale;
+      const { getContext } = await getPayload({ config });
+      const { markets, locales, routes } = await getContext(market, locale);
+      const selectedMarket = markets.find(x => market ? x.id === market : x.isDefault) || markets[0]!;
+      const selectedLocale = locales.find(x => locale ? x.id === locale : x.isDefault) || locales[0]!;
+      const selectedMarketLocale = selectedMarket && selectedMarket.defaultLanguage ? selectedMarket.defaultLanguage : selectedLocale.id;
+      const isCanonicalRoute: (route: IRoute) => boolean = (market && locale) ? (route) => {
+        return route.noindex !== true && route.market === selectedMarket.id && route.locale === selectedLocale.id;
+      } : (route) => {
+        return route.noindex !== true && route.market === selectedMarket.id && route.locale === selectedMarketLocale;
+      };
+      const getCanonicalAlternates: (canonical: IRoute) => IRoute[] = (market && locale) ? (canonical) => {
+        return [];
+      } : (canonical) => {
+        return routes.filter(alternate => {
+          return alternate !== canonical && alternate.schema === canonical.schema && alternate.page === canonical.page;
+        });
+      };
+      const routeToRouteCanonical: (canonical: IRoute) => IRouteCanonical = (canonical) => {
+        const alternates = getCanonicalAlternates(canonical);
+        return { ...canonical, alternates };
+      };
+      const canonicalRoutes: IRouteCanonical[] = routes.filter(isCanonicalRoute).map(routeToRouteCanonical);
+      const body = `<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="${origin}/sitemap.xsl"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+        xmlns:xhtml="http://www.w3.org/1999/xhtml"
+        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
+${getSiteMapXMLUrls(origin, canonicalRoutes)}
+</urlset>
+ `;
+      return new Response(body, {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/xml; charset=UTF-8',
+          'X-Frame-Options': 'SAMEORIGIN',
+          'X-Robots-Tag': 'noindex, follow',
+        },
+      });
+    } catch (error: unknown) {
+      const response = getHandlerErrorResponse(error);
+      console.error('storeHandler.sitemapXml.error', response.status, error);
+      return response;
+    }
+  };
+}
+
+export function getSiteMapXSL(config: Promise<SanitizedConfig>) {
+  return async function (request: NextRequest, {
+    params: getParams,
+  }: {
+    params: Promise<{ market?: string; locale?: string; }>;
+  }) {
+    try {
+      const params = await getParams;
+      const locale = params?.locale || defaultLocale;
+      const body = /* html */`<?xml version="1.0" encoding="UTF-8"?>
+	<xsl:stylesheet version="2.0"
+		xmlns:html="http://www.w3.org/TR/REC-html40"
+		xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
+		xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
+		xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+	<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
+	<xsl:template match="/">
+		<html lang="${locale}" xmlns="http://www.w3.org/1999/xhtml">
+		<head>
+			<title>XML Sitemap</title>
+			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+			<style type="text/css">
+        html {
+          padding: 0;
+          background: #09090A;
+					color: #fefefe;
+        }
+				body {
+          padding: 15px;
+					font-family: Inter,-apple-system,'Helvetica Neue','Segoe UI',Roboto,Arial,'Noto Sans',sans-serif;
+					font-size: 13px;
+          background: #09090A;
+					color: #fefefe;
+				}
+				.container {
+					margin: 0 auto;
+					max-width: 1280px;
+				}
+				a {
+					color: #fefefe;
+					text-decoration: none;
+				}
+				a:visited {
+					color: #9e9e9e;
+				}
+				a:hover {
+					text-decoration: underline;
+				}
+				table {
+          width: 100%;
+          margin: 10px 0;
+					border: none;
+					border-collapse: collapse;
+				}
+				td,
+        th {
+					text-align: left;
+					font-size: 12px;
+          padding: 3px;
+				}
+				th:not(:last-child),
+        td:not(:last-child) {
+					padding-right: 30px;
+				}
+				thead th {
+					border-bottom: 1px solid #0e0e0f;
+				}
+				#sitemap tr:nth-child(odd) td {
+					background-color: #0e0e0f;
+				}
+				#sitemap tbody tr:hover td {
+					background-color: #1A1A1B;
+				}
+				#sitemap tbody tr:hover td,
+        #sitemap tbody tr:hover td a {
+					color: #fefefe;
+				}
+				.wysiwyg {
+          margin: 0;
+					padding: 0 0 10px 0;
+					line-height: 1.2em;
+				}
+				.wysiwyg a {
+					color: #00ea4e;
+					font-weight: 600;
+				}
+				.wysiwyg a:visited {
+					color: #00ea4e;
+				}
+			</style>
+		</head>
+		<body>
+		<div class="container">
+			<h1>XML Sitemap</h1>
+			<p class="wysiwyg">
+        This is an XML Sitemap meant for consumption by search engines, generated by <a href="https://github.com/websolutespa/bom" target="_blank" rel="noopener">Mixer</a>.
+      </p>
+      <p class="wysiwyg">
+				You can find more information about XML sitemaps on <a href="https://sitemaps.org" target="_blank" rel="noopener">sitemaps.org</a>.
+			</p>
+			<xsl:if test="count(sitemap:sitemapindex/sitemap:sitemap) &gt; 0">
+				<p class="wysiwyg">
+					This sitemap index file contains <xsl:value-of select="count(sitemap:sitemapindex/sitemap:sitemap)"/> sitemaps.
+				</p>
+				<table id="sitemap" cellpadding="3">
+					<thead>
+            <tr>
+              <th width="75%">Sitemap</th>
+              <th width="25%" title="Last Modification Time">Updated At</th>
+            </tr>
+					</thead>
+					<tbody>
+					<xsl:for-each select="sitemap:sitemapindex/sitemap:sitemap">
+						<xsl:variable name="sitemapURL">
+							<xsl:value-of select="sitemap:loc"/>
+						</xsl:variable>
+						<tr>
+							<td>
+								<a href="{$sitemapURL}"><xsl:value-of select="sitemap:loc"/></a>
+							</td>
+							<td>
+								<xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)),concat(' ', substring(sitemap:lastmod,20,6)))"/>
+							</td>
+						</tr>
+					</xsl:for-each>
+					</tbody>
+				</table>
+			</xsl:if>
+			<xsl:if test="count(sitemap:sitemapindex/sitemap:sitemap) &lt; 1">
+				<p class="wysiwyg">
+					This sitemap contains <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/> URLs.
+				</p>
+				<table id="sitemap" cellpadding="3">
+					<thead>
+					<tr>
+						<th width="75%">URL</th>
+						<th width="15%" title="Last Modification Time">Updated At</th>
+						<th width="10%">Images</th>
+					</tr>
+					</thead>
+					<tbody>
+					<xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyz'"/>
+					<xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
+					<xsl:for-each select="sitemap:urlset/sitemap:url">
+						<tr>
+							<td>
+								<xsl:variable name="itemURL">
+									<xsl:value-of select="sitemap:loc"/>
+								</xsl:variable>
+								<a href="{$itemURL}">
+									<xsl:value-of select="sitemap:loc"/>
+								</a>
+							</td>
+							<td>
+								<xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)),concat(' ', substring(sitemap:lastmod,20,6)))"/>
+							</td>
+							<td>
+								<xsl:value-of select="count(image:image)"/>
+							</td>
+						</tr>
+					</xsl:for-each>
+					</tbody>
+				</table>
+			</xsl:if>
+		</div>
+		</body>
+		</html>
+	</xsl:template>
+	</xsl:stylesheet>`;
+      return new Response(body, {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/xml; charset=UTF-8',
+          'X-Frame-Options': 'SAMEORIGIN',
+          'X-Robots-Tag': 'noindex, follow',
+        },
+      });
+    } catch (error: unknown) {
+      const response = getHandlerErrorResponse(error);
+      console.error('storeHandler.sitemapXsl.error', response.status, error);
+      return response;
+    }
+  };
+}
+
+function getSiteMapXMLLastMod(canonical: IRouteCanonical): string {
+  return canonical.updatedAt ? `
+    <lastmod>${escapeHtml(String(canonical.updatedAt))}</lastmod>` : '';
+}
+
+function getSiteMapXMLImage(canonical: IRouteCanonical): string {
+  return canonical.media ? `
+    <image:image>
+      <image:loc>${escapeHtml(encodeURI(`${canonical.media.src || canonical.media.url}`))}</image:loc>
+    </image:image>` : '';
+}
+
+function getSiteMapXMLAlternates(origin: string, canonical: IRouteCanonical): string {
+  return canonical.alternates.map(alternate => `
+    <xhtml:link href="${escapeHtml(encodeURI(`${origin}${alternate.id}`))}" hreflang="${alternate.locale}-${alternate.market}" rel="alternate" />`).join('');
+}
+
+function getSiteMapXMLUrl(origin: string, canonical: IRouteCanonical): string {
+  return `
+  <url>
+    <loc>${escapeHtml(encodeURI(`${origin}${canonical.id}`))}</loc>${getSiteMapXMLLastMod(canonical)}${getSiteMapXMLAlternates(origin, canonical)}${getSiteMapXMLImage(canonical)}
+  </url>`;
+}
+
+/*
+  Character	    Escape    Code
+  Ampersand	    &	        &amp;
+  Single Quote	'	        &apos;
+  Double Quote	"	        &quot;
+  Greater Than	>	        &gt;
+  Less Than	    <	        &lt;
+  */
+
+function escapeHtml(string: string) {
+  const matchHtmlRegExp = /["'&<>]/;
+  const str = '' + string;
+  const match = matchHtmlRegExp.exec(str);
+  if (!match) {
+    return str;
+  }
+  let escape: string;
+  let html = '';
+  let index = 0;
+  let lastIndex = 0;
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34: // "
+        escape = '&quot;';
+        break;
+      case 38: // &
+        escape = '&amp;';
+        break;
+      case 39: // '
+        escape = '&#39;';
+        break;
+      case 60: // <
+        escape = '&lt;';
+        break;
+      case 62: // >
+        escape = '&gt;';
+        break;
+      default:
+        continue;
+    }
+    if (lastIndex !== index) {
+      html += str.substring(lastIndex, index);
+    }
+    lastIndex = index + 1;
+    html += escape;
+  }
+  return lastIndex !== index
+    ? html + str.substring(lastIndex, index)
+    : html;
+}
+
+function getSiteMapXMLUrls(origin: string, canonicalRoutes: IRouteCanonical[]): string {
+  return canonicalRoutes.map((canonicalRoute) => getSiteMapXMLUrl(origin, canonicalRoute)).join('');
+}

package/src/server/handlers/static-params.handler.ts

@@ -0,0 +1,111 @@
+import { isDevelopment, qsSerialize, type IRoute } from '@websolutespa/bom-core';
+import type { CollectionSlug, SanitizedConfig } from 'payload';
+import { guest } from '../../lib/const';
+import { localApiGet } from '../../lib/http';
+import { BuildStrategy, buildStrategy } from '../../lib/store';
+import { PageParams } from '../../types';
+import { getPayload, getPayloadInstance, getRoutes } from '../mixer';
+
+/**
+ * Returns a generateStaticParams function for a given page collection slug.
+ */
+export function getStaticParams<TSlug extends CollectionSlug>(slug: TSlug, config: Promise<SanitizedConfig>) {
+  return async function generateStaticParams(): Promise<PageParams[]> {
+    if (
+      isDevelopment ||
+      buildStrategy === BuildStrategy.Runtime
+    ) {
+      return [];
+    }
+    const { getContext } = await getPayload({ config });
+    const { routes } = await getContext('all', 'all');
+    return (routes)
+      .filter(r => r.schema === slug)
+      .map(route => ({
+        market: route.market,
+        locale: route.locale,
+        id: String(route.page),
+      }));
+  };
+}
+
+// unused
+export function getStaticParams_(schema: string) {
+  return async function generateStaticParams(): Promise<{
+    market: string;
+    locale: string;
+    id: string;
+  }[]> {
+    if (
+      isDevelopment ||
+      buildStrategy === BuildStrategy.Runtime
+    ) {
+      return [];
+    }
+    const query = qsSerialize({
+      where: {
+        or: [{
+          schema: {
+            equals: schema,
+          },
+          template: {
+            equals: schema,
+          },
+        }],
+      },
+    });
+    const routes: IRoute[] = await localApiGet(`/-route?${query}`);
+    return (routes)
+      .map(route => ({
+        market: route.market,
+        locale: route.locale,
+        id: String(route.page),
+      }));
+  };
+}
+
+// unused
+export function getStaticParamsFromPayload(schema: string, config: Promise<SanitizedConfig>) {
+  return async function generateStaticParams(): Promise<{
+    market: string;
+    locale: string;
+    id: string;
+  }[]> {
+    if (
+      isDevelopment ||
+      buildStrategy === BuildStrategy.Runtime
+    ) {
+      return [];
+    }
+
+    const payload = await getPayloadInstance({ config });
+    const routes = await getRoutes({
+      payload,
+      market: 'all',
+      locale: 'all',
+      user: guest,
+      draft: false,
+    });
+
+    return routes
+      .filter(route => (
+        route.schema === schema ||
+        route.template === schema
+      ))
+      .map(route => ({
+        market: route.market,
+        locale: route.locale,
+        id: String(route.page),
+      }));
+  };
+}
+
+/*
+Good to know:
+You can use the dynamicParams segment config option to control what happens when a dynamic segment is visited that was not generated with generateStaticParams.
+You must return an empty array from generateStaticParams or utilize export const dynamic = 'force-static' in order to revalidate (ISR) paths at runtime.
+During next dev, generateStaticParams will be called when you navigate to a route.
+During next build, generateStaticParams runs before the corresponding Layouts or Pages are generated.
+During revalidation (ISR), generateStaticParams will not be called again.
+generateStaticParams replaces the getStaticPaths function in the Pages Router.
+*/