diff --git a/app/[locale]/[...uriSegments]/page.tsx b/app/[locale]/[...uriSegments]/page.tsx index c0c8e429..fe4d5cd2 100644 --- a/app/[locale]/[...uriSegments]/page.tsx +++ b/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, parent: ResolvingMetadata ): Promise { const uri = uriSegments.join("/"); @@ -109,10 +112,9 @@ const sectionMap = { staffProfiles: StaffPageTemplate, }; -const UriSegmentsPage: FunctionComponent = async ({ - params: { locale, uriSegments }, - searchParams, -}) => { +const UriSegmentsPage: FunctionComponent< + WithSearchParams +> = async ({ params: { locale, uriSegments }, searchParams }) => { const uri = uriSegments.join("/"); let previewToken: string | undefined; diff --git a/app/[locale]/gallery/[gallery]/[image]/page.tsx b/app/[locale]/gallery/[gallery]/[image]/page.tsx new file mode 100644 index 00000000..1c947f37 --- /dev/null +++ b/app/[locale]/gallery/[gallery]/[image]/page.tsx @@ -0,0 +1,14 @@ +import { FunctionComponent } from "react"; + +const GalleryImage: FunctionComponent> = ({ + params: { locale, gallery, image }, + searchParams = {}, +}) => { + return ( +
+

Image {image}

+
+ ); +}; + +export default GalleryImage; diff --git a/app/[locale]/gallery/[gallery]/page.tsx b/app/[locale]/gallery/[gallery]/page.tsx new file mode 100644 index 00000000..80f129ef --- /dev/null +++ b/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> = ({ + params: { locale, gallery }, + searchParams = {}, +}) => { + return ( +
+

Gallery {gallery}

+
+ ); +}; + +export default Gallery; diff --git a/app/[locale]/gallery/page.tsx b/app/[locale]/gallery/page.tsx new file mode 100644 index 00000000..e0610efe --- /dev/null +++ b/app/[locale]/gallery/page.tsx @@ -0,0 +1,14 @@ +import { FunctionComponent } from "react"; + +const GalleryLanding: FunctionComponent> = ({ + params: { locale }, + searchParams = {}, +}) => { + return ( +
+

Gallery Landing

+
+ ); +}; + +export default GalleryLanding; diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index d4d1c3d3..69754ed1 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -8,7 +8,7 @@ import HomePageTemplate from "@/templates/HomePage"; export async function generateMetadata({ params: { locale }, searchParams = {}, -}: LocaleProps): Promise { +}: WithSearchParams): Promise { let previewToken: string | undefined; if (draftMode().isEnabled) { @@ -24,7 +24,7 @@ export async function generateMetadata({ return { title, description }; } -const RootPage: FunctionComponent = async ({ +const RootPage: FunctionComponent> = async ({ params: { locale }, searchParams = {}, }) => { diff --git a/types/next.d.ts b/types/next.d.ts index 359d6501..0904fac7 100644 --- a/types/next.d.ts +++ b/types/next.d.ts @@ -1,4 +1,15 @@ type SearchParams = Record | undefined>; + +/** Layout components cannot access search params, so route segment + * props should be extended for Page components with this helper. + */ +type WithSearchParams = 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; }; +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 {