refactor: use route props helpers from NextJS (#606)

Author: bastiendmt

app/evenement/[slug]/page.tsx

@@ -13,7 +13,7 @@ export async function generateStaticParams() {
   return events.map((event) => ({ slug: slugEventTitle(event) }));
 }
 
-export default async function EventPage({ params }: { params: Promise<{ slug: string }> }) {
+export default async function EventPage({ params }: PageProps<'/evenement/[slug]'>) {
   const { slug } = await params;
   const eventId = parserEventIdFromSlug(slug);
   if (!eventId) {
@@ -33,7 +33,7 @@ export default async function EventPage({ params }: { params: Promise<{ slug: st
   }
 }
 
-export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+export async function generateMetadata({ params }: PageProps<'/evenement/[slug]'>): Promise<Metadata> {
   const { slug } = await params;
   const eventId = parserEventIdFromSlug(slug);
   if (!eventId) {

app/evenement/[slug]/replay/[talkSlug]/opengraph-image.tsx

@@ -10,7 +10,7 @@ export const size = {
 };
 export const contentType = 'image/png';
 
-export default async function Image({ params }: { params: Promise<{ talkSlug: string }> }) {
+export default async function Image({ params }: PageProps<'/evenement/[slug]/replay/[talkSlug]'>) {
   const { talkSlug } = await params;
   const title = talkSlug.replace(/-/g, ' ');
   return new ImageResponse(<SimpleText text={title} />, {

app/evenement/[slug]/replay/[talkSlug]/page.tsx

@@ -46,7 +46,9 @@ async function getEventAndTalk(slug: string, talkSlug: string) {
   }
 }
 
-export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: PageProps<'/evenement/[slug]/replay/[talkSlug]'>): Promise<Metadata> {
   const { slug, talkSlug } = await params;
   const result = await getEventAndTalk(slug, talkSlug);
   if (!result) return {};
@@ -83,7 +85,7 @@ export async function generateMetadata({ params }: { params: Promise<Params> }):
   };
 }
 
-export default async function ReplayPage({ params }: { params: Promise<Params> }) {
+export default async function ReplayPage({ params }: PageProps<'/evenement/[slug]/replay/[talkSlug]'>) {
   const { slug, talkSlug } = await params;
   const result = await getEventAndTalk(slug, talkSlug);
   if (!result) notFound();

app/evenements-precedents/[year]/opengraph-image.tsx

@@ -9,7 +9,8 @@ export const size = {
 };
 export const contentType = 'image/png';
 
-export default async function Image({ params: { year } }: { params: { year: string } }) {
+export default async function Image({ params }: PageProps<'/evenements-precedents/[year]'>) {
+  const { year } = await params;
   return new ImageResponse(<SimpleText text={`Nos évènements de l'année ${year}`} />, {
     ...size,
   });

app/evenements-precedents/[year]/page.tsx

@@ -7,7 +7,7 @@ export const revalidate = 3600;
 
 const DEFAULT_YEAR = `${new Date().getFullYear()}`;
 
-export default async function PastEventsPage({ params }: { params: Promise<{ year?: string }> }) {
+export default async function PastEventsPage({ params }: PageProps<'/evenements-precedents/[year]'>) {
   const { year = DEFAULT_YEAR } = await params;
 
   return (
@@ -18,7 +18,7 @@ export default async function PastEventsPage({ params }: { params: Promise<{ yea
   );
 }
 
-export async function generateMetadata({ params }: { params: Promise<{ year?: string }> }): Promise<Metadata> {
+export async function generateMetadata({ params }: PageProps<'/evenements-precedents/[year]'>): Promise<Metadata> {
   const { year = DEFAULT_YEAR } = await params;
   const title = `LyonJS | Évènements ${year}`;
   const description = `Liste des évènements LyonJS de l'année ${year}, meetup, apéros, conférences et rassemblement, retrouver tous les liens depuis notre création.`;

app/layout.tsx

@@ -1,13 +1,13 @@
 import { Metadata, Viewport } from 'next';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Header } from '../modules/header/Header';
 import { Footer } from '../modules/footer/Footer';
 
 import 'normalize.css';
 import '../styles/globals.css';
 import { ORGANISATION_MARKUP } from './org-markup';
 
-export default function AppLayout({ children }: { children: ReactNode }) {
+export default function AppLayout({ children }: LayoutProps<'/'>) {
   return (
     <html lang="fr-FR">
       <head>