feat: gallery route structure

app/[locale]/[...uriSegments]/page.tsx

@@ -43,7 +43,10 @@ const pickFeaturedImage = async (
 };
 
 export async function generateMetadata(
-  { params: { locale, uriSegments }, searchParams = {} }: UriSegmentProps,
+  {
+    params: { locale, uriSegments },
+    searchParams = {},
+  }: WithSearchParams<UriSegmentProps>,
   parent: ResolvingMetadata
 ): Promise<Metadata> {
   const uri = uriSegments.join("/");
@@ -109,10 +112,9 @@ const sectionMap = {
   staffProfiles: StaffPageTemplate,
 };
 
-const UriSegmentsPage: FunctionComponent<UriSegmentProps> = async ({
-  params: { locale, uriSegments },
-  searchParams,
-}) => {
+const UriSegmentsPage: FunctionComponent<
+  WithSearchParams<UriSegmentProps>
+> = async ({ params: { locale, uriSegments }, searchParams }) => {
   const uri = uriSegments.join("/");
   let previewToken: string | undefined;
 

app/[locale]/gallery/[gallery]/[image]/page.tsx

@@ -0,0 +1,14 @@
+import { FunctionComponent } from "react";
+
+const GalleryImage: FunctionComponent<WithSearchParams<GalleryImageProps>> = ({
+  params: { locale, gallery, image },
+  searchParams = {},
+}) => {
+  return (
+    <div>
+      <h1>Image {image}</h1>
+    </div>
+  );
+};
+
+export default GalleryImage;

app/[locale]/gallery/[gallery]/page.tsx

@@ -0,0 +1,20 @@
+import { FunctionComponent } from "react";
+
+// should retrieve all galleries by entry, and
+// return an array of their slugs to statically
+// generate their content
+// export async function generateStaticParams() {
+// }
+
+const Gallery: FunctionComponent<WithSearchParams<GalleryProps>> = ({
+  params: { locale, gallery },
+  searchParams = {},
+}) => {
+  return (
+    <div>
+      <h1>Gallery {gallery}</h1>
+    </div>
+  );
+};
+
+export default Gallery;

app/[locale]/gallery/page.tsx

@@ -0,0 +1,14 @@
+import { FunctionComponent } from "react";
+
+const GalleryLanding: FunctionComponent<WithSearchParams<LocaleProps>> = ({
+  params: { locale },
+  searchParams = {},
+}) => {
+  return (
+    <div>
+      <h1>Gallery Landing</h1>
+    </div>
+  );
+};
+
+export default GalleryLanding;

app/[locale]/page.tsx

@@ -8,7 +8,7 @@ import HomePageTemplate from "@/templates/HomePage";
 export async function generateMetadata({
   params: { locale },
   searchParams = {},
-}: LocaleProps): Promise<Metadata> {
+}: WithSearchParams<LocaleProps>): Promise<Metadata> {
   let previewToken: string | undefined;
 
   if (draftMode().isEnabled) {
@@ -24,7 +24,7 @@ export async function generateMetadata({
   return { title, description };
 }
 
-const RootPage: FunctionComponent<LocaleProps> = async ({
+const RootPage: FunctionComponent<WithSearchParams<LocaleProps>> = async ({
   params: { locale },
   searchParams = {},
 }) => {

types/next.d.ts

@@ -1,4 +1,15 @@
 type SearchParams = Record<string, string | Array<string> | undefined>;
+
+/** Layout components cannot access search params, so route segment
+ *  props should be extended for Page components with this helper.
+ */
+type WithSearchParams<T = unknown> = T & {
+  /** An object containing the search parameters of the current URL
+   * @link https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
+   */
+  searchParams?: SearchParams;
+};
+
 type LocaleParams = {
   locale: string;
 };
@@ -7,14 +18,28 @@ type UriSegmentParams = {
   uriSegments: Array<string>;
 };
 
+type GalleryParams = {
+  gallery: string;
+};
+
+type GalleryImageParams = {
+  image: string;
+};
+
 interface LocaleProps {
   params: LocaleParams;
-  searchParams?: SearchParams;
 }
 
 interface UriSegmentProps {
   params: LocaleParams & UriSegmentParams;
-  searchParams: SearchParams;
+}
+
+interface GalleryProps {
+  params: LocaleParams & GalleryParams;
+}
+
+interface GalleryImageProps {
+  params: LocaleParams & GalleryParams & GalleryImageParams;
 }
 
 interface ErrorProps {