Await all params

src/app/admin/photos/[photoId]/edit/page.tsx

@@ -7,10 +7,12 @@ import { blurImageFromUrl, resizeImageFromUrl } from '@/photo/server';
 import { getNextImageUrlForManipulation } from '@/services/next-image';
 
 export default async function PhotoEditPage({
-  params: { photoId },
+  params,
 }: {
-  params: { photoId: string }
+  params: Promise<{ photoId: string }>
 }) {
+  const { photoId } = await params;
+
   const photo = await getPhotoNoStore(photoId, true);
 
   if (!photo) { redirect(PATH_ADMIN); }

src/app/admin/tags/[tag]/edit/page.tsx

@@ -10,12 +10,14 @@ import AdminTagBadge from '@/admin/AdminTagBadge';
 const MAX_PHOTO_TO_SHOW = 6;
 
 interface Props {
-  params: { tag: string }
+  params: Promise<{ tag: string }>
 }
 
 export default async function PhotoPageEdit({
-  params: { tag: tagFromParams } }: Props
-) {
+  params,
+}: Props) {
+  const { tag: tagFromParams } = await params;
+
   const tag = decodeURIComponent(tagFromParams);
   
   const [

src/app/admin/uploads/[uploadPath]/page.tsx

@@ -12,10 +12,12 @@ import {
 export const maxDuration = 60;
 
 interface Params {
-  params: { uploadPath: string }
+  params: Promise<{ uploadPath: string }>
 }
 
-export default async function UploadPage({ params: { uploadPath } }: Params) {
+export default async function UploadPage({ params }: Params) {
+  const { uploadPath } = await params;
+
   const {
     blobId,
     photoFormExif,

src/app/api/storage/presigned-url/[key]/route.ts

@@ -12,8 +12,10 @@ import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 
 export async function GET(
   _: Request,
-  { params: { key } }: { params: { key: string } },
+  { params }: { params: Promise<{ key: string }> },
 ) {
+  const { key } = await params;
+
   const session = await auth();
   if (session?.user && key) {
     const url = await getSignedUrl(

src/app/film/[simulation]/[photoId]/layout.tsx

@@ -28,12 +28,14 @@ const getPhotosNearIdCachedCached = cache((
   ));
 
 interface PhotoFilmSimulationProps {
-  params: { photoId: string, simulation: FilmSimulation }
+  params: Promise<{ photoId: string, simulation: FilmSimulation }>
 }
 
 export async function generateMetadata({
-  params: { photoId, simulation },
+  params,
 }: PhotoFilmSimulationProps): Promise<Metadata> {
+  const { photoId, simulation } = await params;
+
   const { photo } = await getPhotosNearIdCachedCached(photoId, simulation);
 
   if (!photo) { return {}; }
@@ -62,9 +64,11 @@ export async function generateMetadata({
 }
 
 export default async function PhotoFilmSimulationPage({
-  params: { photoId, simulation },
+  params,
   children,
 }: PhotoFilmSimulationProps & { children: ReactNode }) {
+  const { photoId, simulation } = await params;
+
   const { photo, photos, photosGrid, indexNumber } =
     await getPhotosNearIdCachedCached(photoId, simulation);
 

src/app/film/[simulation]/[photoId]/share/page.tsx

@@ -5,10 +5,12 @@ import { PATH_ROOT } from '@/site/paths';
 import { redirect } from 'next/navigation';
 
 export default async function Share({
-  params: { photoId, simulation },
+  params,
 }: {
-  params: { photoId: string, simulation: FilmSimulation }
+  params: Promise<{ photoId: string, simulation: FilmSimulation }>
 }) {
+  const { photoId, simulation } = await params;
+
   const photo = await getPhotoCached(photoId);
 
   if (!photo) { return redirect(PATH_ROOT); }

src/app/film/[simulation]/image/route.tsx

@@ -12,9 +12,9 @@ import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
 
 export async function GET(
   _: Request,
-  context: { params: { simulation: FilmSimulation } },
+  context: { params: Promise<{ simulation: FilmSimulation }> },
 ) {
-  const { simulation } = context.params;
+  const { simulation } = await context.params;
 
   const [
     photos,

src/app/film/[simulation]/page.tsx

@@ -9,12 +9,14 @@ const getPhotosFilmSimulationDataCachedCached =
   cache(getPhotosFilmSimulationDataCached);
 
 interface FilmSimulationProps {
-  params: { simulation: FilmSimulation }
+  params: Promise<{ simulation: FilmSimulation }>
 }
 
 export async function generateMetadata({
-  params: { simulation },
+  params,
 }: FilmSimulationProps): Promise<Metadata> {
+  const { simulation } = await params;
+
   const [
     photos,
     { count, dateRange },
@@ -48,8 +50,10 @@ export async function generateMetadata({
 }
 
 export default async function FilmSimulationPage({
-  params: { simulation },
+  params,
 }: FilmSimulationProps) {
+  const { simulation } = await params;
+
   const [
     photos,
     { count, dateRange },

src/app/film/[simulation]/share/page.tsx

@@ -13,12 +13,14 @@ const getPhotosFilmSimulationDataCachedCached =
   }));
 
 interface FilmSimulationProps {
-  params: { simulation: FilmSimulation }
+  params: Promise<{ simulation: FilmSimulation }>
 }
 
 export async function generateMetadata({
-  params: { simulation },
+  params,
 }: FilmSimulationProps): Promise<Metadata> {
+  const { simulation } = await params;
+
   const [
     photos,
     { count, dateRange },
@@ -49,8 +51,10 @@ export async function generateMetadata({
 }
 
 export default async function Share({
-  params: { simulation },
+  params,
 }: FilmSimulationProps) {
+  const { simulation } = await params;
+
   const [
     photos,
     { count, dateRange },

src/app/focal/[focal]/[photoId]/layout.tsx

@@ -23,12 +23,14 @@ const getPhotosNearIdCachedCached = cache((photoId: string, focal: number) =>
   ));
 
 interface PhotoFocalLengthProps {
-  params: { photoId: string, focal: string }
+  params: Promise<{ photoId: string, focal: string }>
 }
 
 export async function generateMetadata({
-  params: { photoId, focal: focalString },
+  params,
 }: PhotoFocalLengthProps): Promise<Metadata> {
+  const { photoId, focal: focalString } = await params;
+
   const focal = getFocalLengthFromString(focalString);
 
   const { photo } = await getPhotosNearIdCachedCached(photoId, focal);
@@ -59,9 +61,11 @@ export async function generateMetadata({
 }
 
 export default async function PhotoFocalLengthPage({
-  params: { photoId, focal: focalString },
+  params,
   children,
 }: PhotoFocalLengthProps & { children: ReactNode }) {
+  const { photoId, focal: focalString } = await params;
+
   const focal = getFocalLengthFromString(focalString);
 
   const { photo, photos, photosGrid, indexNumber } =

src/app/focal/[focal]/[photoId]/share/page.tsx

@@ -5,10 +5,12 @@ import { PATH_ROOT } from '@/site/paths';
 import { redirect } from 'next/navigation';
 
 export default async function Share({
-  params: { photoId, focal: focalString },
+  params,
 }: {
-  params: { photoId: string, focal: string }
+  params: Promise<{ photoId: string, focal: string }>
 }) {
+  const { photoId, focal: focalString } = await params;
+
   const focal = getFocalLengthFromString(focalString);
 
   const photo = await getPhotoCached(photoId);

src/app/focal/[focal]/image/route.tsx

@@ -12,9 +12,11 @@ import { getFocalLengthFromString } from '@/focal';
 
 export async function GET(
   _: Request,
-  context: { params: { focal: string } },
+  context: { params: Promise<{ focal: string }> },
 ) {
-  const focal = getFocalLengthFromString(context.params.focal);
+  const focalString = (await context.params).focal;
+
+  const focal = getFocalLengthFromString(focalString);
 
   const [
     photos,

src/app/focal/[focal]/page.tsx

@@ -14,12 +14,14 @@ const getPhotosFocalDataCachedCached = cache((focal: number) =>
   }));
 
 interface FocalLengthProps {
-  params: { focal: string }
+  params: Promise<{ focal: string }>
 }
 
 export async function generateMetadata({
-  params: { focal: focalString },
+  params,
 }: FocalLengthProps): Promise<Metadata> {
+  const { focal: focalString } = await params;
+
   const focal = getFocalLengthFromString(focalString);
 
   const [
@@ -54,8 +56,10 @@ export async function generateMetadata({
 }
 
 export default async function TagPage({
-  params: { focal: focalString },
+  params,
 }:FocalLengthProps) {
+  const { focal: focalString } = await params;
+
   const focal = getFocalLengthFromString(focalString);
 
   const [

src/app/focal/[focal]/share/page.tsx

@@ -13,12 +13,14 @@ const getPhotosFocalLengthDataCachedCached = cache((focal: number) =>
   }));
 
 interface FocalLengthProps {
-  params: { focal: string }
+  params: Promise<{ focal: string }>
 }
 
 export async function generateMetadata({
-  params: { focal: focalString },
+  params,
 }: FocalLengthProps): Promise<Metadata> {
+  const { focal: focalString } = await params;
+
   const focal = getFocalLengthFromString(focalString);
 
   const [
@@ -51,8 +53,10 @@ export async function generateMetadata({
 }
 
 export default async function Share({
-  params: { focal: focalString },
+  params,
 }: FocalLengthProps) {
+  const { focal: focalString } = await params;
+
   const focal = getFocalLengthFromString(focalString);
 
   const [

src/app/p/[photoId]/image/route.tsx

@@ -21,14 +21,16 @@ if (STATICALLY_OPTIMIZED_OG_IMAGES && IS_PRODUCTION) {
 
 export async function GET(
   _: Request,
-  context: { params: { photoId: string } },
+  context: { params: Promise<{ photoId: string }> },
 ) {
+  const { photoId } = await context.params;
+
   const [
     photo,
     { fontFamily, fonts },
     headers,
   ] = await Promise.all([
-    getPhotoCached(context.params.photoId),
+    getPhotoCached(photoId),
     getIBMPlexMonoMedium(),
     getImageResponseCacheControlHeaders(),
   ]);

src/app/p/[photoId]/layout.tsx

@@ -33,12 +33,13 @@ if (STATICALLY_OPTIMIZED_PAGES && IS_PRODUCTION) {
 }
 
 interface PhotoProps {
-  params: { photoId: string }
+  params: Promise<{ photoId: string }>
 }
 
 export async function generateMetadata({
-  params: { photoId },
+  params,
 }:PhotoProps): Promise<Metadata> {
+  const { photoId } = await params;
   const { photo } = await getPhotosNearIdCachedCached(photoId);
 
   if (!photo) { return {}; }
@@ -67,9 +68,10 @@ export async function generateMetadata({
 }
 
 export default async function PhotoPage({
-  params: { photoId },
+  params,
   children,
 }: PhotoProps & { children: ReactNode }) {
+  const { photoId } = await params;
   const { photo, photos, photosGrid } =
     await getPhotosNearIdCachedCached(photoId);
 

src/app/p/[photoId]/share/page.tsx

@@ -4,10 +4,12 @@ import { PATH_ROOT } from '@/site/paths';
 import { redirect } from 'next/navigation';
 
 export default async function Share({
-  params: { photoId },
+  params,
 }: {
-  params: { photoId: string }
+  params: Promise<{ photoId: string }>
 }) {
+  const { photoId } = await params;
+
   const photo = await getPhotoCached(photoId);
 
   if (!photo) { return redirect(PATH_ROOT); }

src/app/shot-on/[make]/[model]/[photoId]/layout.tsx

@@ -35,8 +35,10 @@ const getPhotosNearIdCachedCached = cache((
   ));
 
 export async function generateMetadata({
-  params: { photoId, make, model },
+  params,
 }: PhotoCameraProps): Promise<Metadata> {
+  const { photoId, make, model } = await params;
+
   const { photo } = await getPhotosNearIdCachedCached(photoId, make, model);
 
   if (!photo) { return {}; }
@@ -68,9 +70,11 @@ export async function generateMetadata({
 }
 
 export default async function PhotoCameraPage({
-  params: { photoId, make, model },
+  params,
   children,
 }: PhotoCameraProps & { children: ReactNode }) {
+  const { photoId, make, model } = await params;
+
   const { photo, photos, photosGrid, indexNumber } =
     await getPhotosNearIdCachedCached(photoId, make, model);
 

src/app/shot-on/[make]/[model]/[photoId]/share/page.tsx

@@ -5,8 +5,10 @@ import { PATH_ROOT } from '@/site/paths';
 import { redirect } from 'next/navigation';
 
 export default async function Share({
-  params: { photoId, make, model },
+  params,
 }: PhotoCameraProps) {
+  const { photoId, make, model } = await params;
+
   const photo = await getPhotoCached(photoId);
 
   if (!photo) { return redirect(PATH_ROOT); }

src/app/shot-on/[make]/[model]/image/route.tsx

@@ -13,7 +13,7 @@ export async function GET(
   _: Request,
   context: CameraProps,
 ) {
-  const camera = getCameraFromParams(context.params);
+  const camera = getCameraFromParams(await context.params);
 
   const [
     photos,

src/app/shot-on/[make]/[model]/page.tsx

@@ -16,8 +16,10 @@ const getPhotosCameraDataCachedCached = cache((
 ));
 
 export async function generateMetadata({
-  params: { make, model },
+  params,
 }: CameraProps): Promise<Metadata> {
+  const { make, model } = await params;
+
   const [
     photos,
     { count, dateRange },
@@ -49,8 +51,10 @@ export async function generateMetadata({
 }
 
 export default async function CameraPage({
-  params: { make, model },
+  params,
 }: CameraProps) {
+  const { make, model } = await params;
+
   const [
     photos,
     { count, dateRange },

src/app/shot-on/[make]/[model]/share/page.tsx

@@ -17,8 +17,10 @@ const getPhotosCameraDataCachedCached = cache((
 ));
 
 export async function generateMetadata({
-  params: { make, model },
+  params,
 }: CameraProps): Promise<Metadata> {
+  const { make, model } = await params;
+
   const [
     photos,
     { count, dateRange },
@@ -49,7 +51,9 @@ export async function generateMetadata({
   };
 }
 
-export default async function Share({ params: { make, model } }: CameraProps) {
+export default async function Share({ params }: CameraProps) {
+  const { make, model } = await params;
+
   const [
     photos,
     { count, dateRange },

src/app/tag/[tag]/[photoId]/layout.tsx

@@ -22,12 +22,14 @@ const getPhotosNearIdCachedCached = cache((photoId: string, tag: string) =>
   ));
 
 interface PhotoTagProps {
-  params: { photoId: string, tag: string }
+  params: Promise<{ photoId: string, tag: string }>
 }
 
 export async function generateMetadata({
-  params: { photoId, tag },
+  params,
 }: PhotoTagProps): Promise<Metadata> {
+  const { photoId, tag } = await params;
+
   const { photo } = await getPhotosNearIdCachedCached(photoId, tag);
 
   if (!photo) { return {}; }
@@ -56,9 +58,10 @@ export async function generateMetadata({
 }
 
 export default async function PhotoTagPage({
-  params: { photoId, tag },
+  params,
   children,
 }: PhotoTagProps & { children: ReactNode }) {
+  const { photoId, tag } = await params;
   const { photo, photos, photosGrid, indexNumber } =
     await getPhotosNearIdCachedCached(photoId, tag);
 

src/app/tag/[tag]/[photoId]/share/page.tsx

@@ -4,10 +4,12 @@ import { PATH_ROOT } from '@/site/paths';
 import { redirect } from 'next/navigation';
 
 export default async function Share({
-  params: { photoId, tag },
+  params,
 }: {
-  params: { photoId: string, tag: string }
+  params: Promise<{ photoId: string, tag: string }>
 }) {
+  const { photoId, tag } = await params;
+
   const photo = await getPhotoCached(photoId);
 
   if (!photo) { return redirect(PATH_ROOT); }

src/app/tag/[tag]/image/route.tsx

@@ -10,9 +10,9 @@ import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
 
 export async function GET(
   _: Request,
-  context: { params: { tag: string } },
+  context: { params: Promise<{ tag: string }> },
 ) {
-  const { tag } = context.params;
+  const { tag } = await context.params;
 
   const [
     photos,

src/app/tag/[tag]/page.tsx

@@ -11,12 +11,14 @@ const getPhotosTagDataCachedCached = cache((tag: string) =>
   getPhotosTagDataCached({ tag, limit: INFINITE_SCROLL_GRID_INITIAL}));
 
 interface TagProps {
-  params: { tag: string }
+  params: Promise<{ tag: string }>
 }
 
 export async function generateMetadata({
-  params: { tag: tagFromParams },
+  params,
 }: TagProps): Promise<Metadata> {
+  const { tag: tagFromParams } = await params;
+
   const tag = decodeURIComponent(tagFromParams);
 
   const [
@@ -51,8 +53,10 @@ export async function generateMetadata({
 }
 
 export default async function TagPage({
-  params: { tag: tagFromParams },
+  params,
 }:TagProps) {
+  const { tag: tagFromParams } = await params;
+
   const tag = decodeURIComponent(tagFromParams);
 
   const [

src/app/tag/[tag]/share/page.tsx

@@ -10,12 +10,14 @@ const getPhotosTagDataCachedCached = cache((tag: string) =>
   getPhotosTagDataCached({ tag, limit: INFINITE_SCROLL_GRID_INITIAL }));
 
 interface TagProps {
-  params: { tag: string }
+  params: Promise<{ tag: string }>
 }
 
 export async function generateMetadata({
-  params: { tag: tagFromParams },
+  params,
 }: TagProps): Promise<Metadata> {
+  const { tag: tagFromParams } = await params;
+
   const tag = decodeURIComponent(tagFromParams);
 
   const [
@@ -48,8 +50,10 @@ export async function generateMetadata({
 }
 
 export default async function Share({
-  params: { tag: tagFromParams },
+  params,
 }: TagProps) {
+  const { tag: tagFromParams } = await params;
+
   const tag = decodeURIComponent(tagFromParams);
 
   const [

src/app/tag/hidden/[photoId]/page.tsx

@@ -21,12 +21,14 @@ const getPhotosNearIdCachedCached = cache((photoId: string) =>
   ));
 
 interface PhotoTagProps {
-  params: { photoId: string }
+  params: Promise<{ photoId: string }>
 }
 
 export async function generateMetadata({
-  params: { photoId },
+  params,
 }: PhotoTagProps): Promise<Metadata> {
+  const { photoId } = await params;
+
   const { photo } = await getPhotosNearIdCachedCached(photoId);
 
   if (!photo) { return {}; }
@@ -52,8 +54,10 @@ export async function generateMetadata({
 }
 
 export default async function PhotoTagHiddenPage({
-  params: { photoId },
+  params,
 }: PhotoTagProps) {
+  const { photoId } = await params;
+
   const { photo, photos, photosGrid, indexNumber } =
     await getPhotosNearIdCachedCached(photoId);
 

src/camera/index.ts

@@ -9,11 +9,11 @@ export type Camera = {
 };
 
 export interface CameraProps {
-  params: Camera
+  params: Promise<Camera>
 }
 
 export interface PhotoCameraProps {
-  params: Camera & { photoId: string }
+  params: Promise<Camera & { photoId: string }>
 }
 
 export type CameraWithCount = {

src/components/HeaderList.tsx

@@ -10,7 +10,7 @@ export default function HeaderList({
 }: {
   title?: string,
   className?: string,
-  icon?: JSX.Element,
+  icon?: ReactNode,
   items: ReactNode[]
 }) {
   return (

src/lens/index.ts

@@ -9,11 +9,11 @@ export type Lens = {
 };
 
 export interface LensProps {
-  params: Lens
+  params: Promise<Lens>
 }
 
 export interface PhotoLensProps {
-  params: Lens & { photoId: string }
+  params: Promise<Lens & { photoId: string }>
 }
 
 export type LensWithCount = {

src/photo/PhotoGridSidebar.tsx

@@ -16,7 +16,10 @@ import { useAppState } from '@/state/AppState';
 import { useMemo } from 'react';
 import HiddenTag from '@/tag/HiddenTag';
 import { SITE_ABOUT } from '@/site/config';
-import { htmlHasBrParagraphBreaks, safelyParseFormattedHtml } from '@/utility/html';
+import {
+  htmlHasBrParagraphBreaks,
+  safelyParseFormattedHtml,
+} from '@/utility/html';
 import { clsx } from 'clsx/lite';
 
 export default function PhotoGridSidebar({

src/utility/useOnVisible.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 export default function useOnVisible(
-  ref: React.RefObject<HTMLElement>,
+  ref: React.RefObject<HTMLElement | null>,
   onVisible?: () => void
 ) {
   useEffect(() => {