Next-15-upgrade

app/api/v2/barometers/[slug]/route.ts

@@ -9,15 +9,19 @@ import { deleteImagesFromStorage } from './deleteFromStorage'
 import { trimTrailingSlash } from '@/utils/misc'
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string
-  }
+  }>
 }
 
 /**
  * Get Barometer details by slug
  */
-export async function GET(_req: NextRequest, { params: { slug } }: Props) {
+export async function GET(_req: NextRequest, props: Props) {
+  const params = await props.params
+
+  const { slug } = params
+
   try {
     const barometer = await getBarometer(slug)
     return NextResponse.json(barometer, { status: 200 })
@@ -36,7 +40,9 @@ export async function GET(_req: NextRequest, { params: { slug } }: Props) {
  * Delete Barometer by slug
  */
 /* eslint-disable prettier/prettier */
-export const DELETE = withPrisma(async (prisma, _req: NextRequest, { params: { slug } }: Props) => {
+export const DELETE = withPrisma(async (prisma, _req: NextRequest, props: Props) => {
+  const params = await props.params
+  const { slug } = params
   try {
     const barometer = await prisma.barometer.findFirst({
       where: {

app/api/v2/categories/[name]/route.ts

@@ -2,15 +2,19 @@ import { NextRequest, NextResponse } from 'next/server'
 import { getCategory } from './getters'
 
 interface Props {
-  params: {
+  params: Promise<{
     name: string
-  }
+  }>
 }
 
 /**
  * Get Category details
  */
-export async function GET(_req: NextRequest, { params: { name } }: Props) {
+export async function GET(_req: NextRequest, props: Props) {
+  const params = await props.params
+
+  const { name } = params
+
   try {
     const category = await getCategory(name)
     return NextResponse.json(category, { status: 200 })

app/api/v2/manufacturers/[slug]/route.ts

@@ -6,15 +6,19 @@ import { FrontRoutes } from '@/utils/routes-front'
 import { trimTrailingSlash } from '@/utils/misc'
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string
-  }
+  }>
 }
 
 /**
  * Query a specific manufacturer by slug
  */
-export async function GET(req: NextRequest, { params: { slug } }: Props) {
+export async function GET(req: NextRequest, props: Props) {
+  const params = await props.params
+
+  const { slug } = params
+
   try {
     const manufacturer = await getManufacturer(slug)
     return NextResponse.json(manufacturer, { status: 200 })
@@ -32,7 +36,9 @@ export async function GET(req: NextRequest, { params: { slug } }: Props) {
  * Delete manufacturer by ID
  */
 
-export const DELETE = withPrisma(async (prisma, req: NextRequest, { params: { slug } }: Props) => {
+export const DELETE = withPrisma(async (prisma, req: NextRequest, props: Props) => {
+  const params = await props.params
+  const { slug } = params
   try {
     const manufacturer = await prisma.manufacturer.findUnique({ where: { slug } })
     if (!manufacturer) {

app/brands/[slug]/page.tsx

@@ -11,9 +11,9 @@ import { MD } from '@/app/components/md'
 import { ImageLightbox } from '@/app/components/modal'
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string
-  }
+  }>
 }
 
 export const dynamic = 'force-static'
@@ -37,7 +37,11 @@ const getBarometersByManufacturer = withPrisma(async (prisma, slug: string) =>
   }),
 )
 
-export async function generateMetadata({ params: { slug } }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
+
+  const { slug } = params
+
   const manufacturer = await getManufacturer(slug)
   return {
     title: `${title} - Manufacturer: ${manufacturer.name}`,
@@ -50,7 +54,11 @@ export const generateStaticParams = withPrisma(async prisma =>
   }),
 )
 
-export default async function Manufacturer({ params: { slug } }: Props) {
+export default async function Manufacturer(props: Props) {
+  const params = await props.params
+
+  const { slug } = params
+
   const manufacturer = await getManufacturer(slug)
   const barometers = await getBarometersByManufacturer(slug)
   const fullName = `${manufacturer.firstName ?? ''} ${manufacturer.name}`

app/collection/categories/[...category]/page.tsx

@@ -17,15 +17,17 @@ export const dynamicParams = true
 export const dynamic: DynamicOptions = 'force-static'
 
 interface CollectionProps {
-  params: {
+  params: Promise<{
     // category should include [categoryName, sortCriteria, pageNo]
     category: string[]
-  }
+  }>
 }
 
-export async function generateMetadata({
-  params: { category },
-}: CollectionProps): Promise<Metadata> {
+export async function generateMetadata(props: CollectionProps): Promise<Metadata> {
+  const params = await props.params
+
+  const { category } = params
+
   const [categoryName] = category
   const { description } = await getCategory(categoryName)
   const { barometers } = await getBarometersByParams(categoryName, 1, 5, 'date')
@@ -56,7 +58,11 @@ export async function generateMetadata({
   }
 }
 
-export default async function Collection({ params: { category } }: CollectionProps) {
+export default async function Collection(props: CollectionProps) {
+  const params = await props.params
+
+  const { category } = params
+
   const [categoryName, sort, page] = category
   const { barometers, totalPages } = await getBarometersByParams(
     categoryName,

app/collection/items/[slug]/components/condition.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Box, Popover, PopoverDropdown, PopoverTarget, UnstyledButton, Text } from '@mantine/core'
 import { IconInfoSquareRounded } from '@tabler/icons-react'
 import { ConditionListDTO } from '@/app/types'

app/collection/items/[slug]/layout.tsx

@@ -6,11 +6,13 @@ import { imageStorage } from '@/utils/constants'
 import { title, openGraph, twitter } from '@/app/metadata'
 import { FrontRoutes } from '@/utils/routes-front'
 
-export async function generateMetadata({
-  params: { slug },
-}: {
-  params: { slug: string }
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>
 }): Promise<Metadata> {
+  const params = await props.params
+
+  const { slug } = params
+
   const { description, name, images } = await getBarometer(slug)
   const barometerTitle = `${title}: ${capitalize(name)}`
   const barometerImages =

app/collection/items/[slug]/page.tsx

@@ -53,9 +53,9 @@ export const dynamic = 'force-static'
 export const dynamicParams = true
 
 interface Props {
-  params: {
+  params: Promise<{
     slug: string
-  }
+  }>
 }
 
 /**
@@ -66,7 +66,11 @@ export const generateStaticParams = withPrisma(prisma =>
   prisma.barometer.findMany({ select: { slug: true } }),
 )
 
-export default async function Page({ params: { slug } }: Props) {
+export default async function Page(props: Props) {
+  const params = await props.params
+
+  const { slug } = params
+
   const barometer = await getBarometer(slug)
   const { firstName, name, city } = barometer.manufacturer
   const dimensions = (barometer.dimensions ?? []) as Dimensions

app/collection/new-arrivals/page.tsx

@@ -8,10 +8,11 @@ import { FrontRoutes } from '@/utils/routes-front'
 const itemsOnPage = 12
 
 interface newArrivalsProps {
-  searchParams: Record<string, string>
+  searchParams: Promise<Record<string, string>>
 }
 
-export default async function NewArrivals({ searchParams }: newArrivalsProps) {
+export default async function NewArrivals(props: newArrivalsProps) {
+  const searchParams = await props.searchParams
   const { barometers, totalPages, page } = await fetchBarometerList({
     sort: 'last-added',
     page: searchParams.page ?? 1,

app/components/heading-image/heading-image.tsx

@@ -1,23 +1,26 @@
 import { Box, Title, Container } from '@mantine/core'
 import NextImage from 'next/image'
 import { FC } from 'react'
-import styles from './heading-image.module.scss'
 import customImageLoader from '@/utils/image-loader'
 
 export const HeadingImage: FC = () => {
   return (
-    <Container className={styles.componentContainer}>
+    <Container className="relative h-[50vh] !max-w-[80.5rem] overflow-hidden xs:h-40">
       <NextImage
         unoptimized
         priority
         alt="Barograph"
         src={customImageLoader({ src: '/shared/landing-header.png', width: 1000, quality: 80 })}
         fill
-        className={styles.image}
+        className="z-10 animate-[fadeIn_1s_ease-in-out,scaleDown_2s_ease-out] bg-gradient-to-b from-[#e2e2e2] to-[#efefef] object-cover object-[right_55%_bottom_50%]"
       />
-      <Box className={styles.textContainer}>
+      <Box className="absolute inset-0 z-20 flex h-full w-full animate-[slideUp_1.8s_ease-out,fadeInContent_1.8s_ease-out] items-end pb-12 pl-8 xs:items-center xs:pb-0 sm:pl-12">
         <Box>
-          <Title component="h2" order={3} className={styles.title}>
+          <Title
+            component="h2"
+            order={3}
+            className="inline bg-[var(--mantine-color-primary)] px-[0.3rem] pr-[0.13rem] !font-normal uppercase leading-normal tracking-[0.2rem] text-white"
+          >
             Industrial Era Barometer Collection
           </Title>
         </Box>

app/components/md/md.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, HTMLAttributes } from 'react'
 import ReactMarkdown, { Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 
@@ -8,19 +8,19 @@ const defaultComponents: Components = {
   li: props => <li className="ml-8 list-disc" {...props} />,
   a: props => (
     <a
+      target="_blank"
+      rel="noopener noreferrer"
+      referrerPolicy="no-referrer"
       className="duration-400 underline transition-colors ease-out hover:text-amber-800"
       {...props}
     />
   ),
 }
 
-export const MD: FC<Parameters<typeof ReactMarkdown>[0]> = ({ children, className, ...props }) => (
-  <ReactMarkdown
-    {...props}
-    components={defaultComponents}
-    className={className}
-    remarkPlugins={[remarkGfm]}
-  >
-    {children}
-  </ReactMarkdown>
+export const MD: FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => (
+  <div {...props}>
+    <ReactMarkdown components={defaultComponents} remarkPlugins={[remarkGfm]}>
+      {children?.toString()}
+    </ReactMarkdown>
+  </div>
 )