Utilisation d'un composant NotFound custom

packages/site/app/actus/[id]/[slug]/page.tsx

@@ -1,4 +1,3 @@
-import {notFound} from 'next/navigation';
 import {StrapiImage} from '@components/strapiImage/StrapiImage';
 import Section from '@components/sections/Section';
 import {getLocalDateString} from 'src/utils/getLocalDateString';
@@ -11,6 +10,7 @@ import EmbededVideo from '@components/video/EmbededVideo';
 import {ParagrapheCustomArticleData} from 'app/types';
 import {Metadata, ResolvingMetadata} from 'next';
 import {getUpdatedMetadata} from 'src/utils/getUpdatedMetadata';
+import NotFound from '@components/info/NotFound';
 
 export async function generateMetadata(
   {params}: {params: {id: string}},
@@ -41,7 +41,7 @@ const Article = async ({params}: {params: {id: string}}) => {
   const id = parseInt(params.id);
   const data = await getData(id);
 
-  if (!data) return notFound();
+  if (!data) return <NotFound />;
 
   return (
     <>

packages/site/app/actus/[id]/page.tsx

@@ -1,8 +1,9 @@
 'use server';
 
-import {notFound, redirect} from 'next/navigation';
+import {redirect} from 'next/navigation';
 import {convertNameToSlug} from 'src/utils/convertNameToSlug';
 import {getData} from './[slug]/utils';
+import NotFound from '@components/info/NotFound';
 
 /**
  * Permet la redirection vers la page article lorsque seul
@@ -13,7 +14,7 @@ const ArticleParId = async ({params}: {params: {id: string}}) => {
   const id = parseInt(params.id);
   const data = await getData(id);
 
-  if (!data || !data.titre) return notFound();
+  if (!data || !data.titre) return <NotFound />;
   redirect(`/actus/${params.id}/${convertNameToSlug(data.titre)}`);
 };
 

packages/site/app/actus/page.tsx

@@ -8,6 +8,7 @@ import BlogCard from '@components/cards/BlogCard';
 import MasonryGallery from '@components/galleries/MasonryGallery';
 import {Metadata} from 'next';
 import {convertNameToSlug} from 'src/utils/convertNameToSlug';
+import NotFound from '@components/info/NotFound';
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
@@ -85,7 +86,9 @@ const Actualites = async () => {
         ))}
       />
     </Section>
-  ) : null;
+  ) : (
+    <NotFound />
+  );
 };
 
 export default Actualites;

packages/site/app/collectivites/[code]/[name]/page.tsx

@@ -16,6 +16,7 @@ import {natureCollectiviteToLabel} from 'src/utils/labels';
 import AccesCompte from './AccesCompte';
 import {getUpdatedMetadata} from 'src/utils/getUpdatedMetadata';
 import HistoriqueLabellisation from './HistoriqueLabellisation';
+import NotFound from '@components/info/NotFound';
 
 export async function generateMetadata(
   {params}: {params: {code: string}},
@@ -59,7 +60,8 @@ const DetailCollectivite = async ({params}: {params: {code: string}}) => {
   const strapiData = await getStrapiData(params.code);
   const strapiDefaultData = await getStrapiDefaultData();
 
-  if (!collectiviteData || !collectiviteData.collectivite.nom) return null;
+  if (!collectiviteData || !collectiviteData.collectivite.nom)
+    return <NotFound />;
 
   return (
     <Section

packages/site/app/collectivites/[code]/page.tsx

@@ -4,6 +4,7 @@ import {redirect} from 'next/navigation';
 import {Metadata} from 'next';
 import {fetchCollectivite} from '../utils';
 import {convertNameToSlug} from 'src/utils/convertNameToSlug';
+import NotFound from '@components/info/NotFound';
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
@@ -19,8 +20,12 @@ export async function generateMetadata(): Promise<Metadata> {
 const DetailCodeCollectivite = async ({params}: {params: {code: string}}) => {
   const data = await fetchCollectivite(params.code);
 
+  if (!data) return <NotFound />;
+
   redirect(
-    `/collectivites/${params.code}/${convertNameToSlug(data?.nom ?? '')}`,
+    `/collectivites/${params.code}/${convertNameToSlug(
+      data?.collectivite.nom ?? '',
+    )}`,
   );
 };
 

packages/site/app/collectivites/page.tsx

@@ -1,16 +1,14 @@
 'use server';
 
+import NotFound from '@components/info/NotFound';
 import {Metadata} from 'next';
-import {notFound} from 'next/navigation';
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
     title: 'Collectivités',
   };
 }
 
-const Collectivite = () => {
-  notFound();
-};
+const Collectivite = () => <NotFound />;
 
 export default Collectivite;

packages/site/app/layout.tsx

@@ -74,9 +74,7 @@ export default function RootLayout({children}: {children: JSX.Element}) {
       <body className="min-h-screen flex flex-col justify-between">
         <div className="grow flex flex-col">
           <AppHeader />
-          <div className="grow fr-container-fluid flex flex-col">
-            {children}
-          </div>
+          <div className="grow flex flex-col">{children}</div>
         </div>
         <Footer />
         <Amplitude />

packages/site/app/programme/[uid]/page.tsx

@@ -1,13 +1,13 @@
 'use server';
 
-import {notFound} from 'next/navigation';
 import {getServiceStrapiData} from './utils';
 import {InfoData, ListeData, ParagrapheData} from './types';
 import ParagrapheService from './ParagrapheService';
 import ListeService from './ListeService';
 import InfoService from './InfoService';
 import {Metadata, ResolvingMetadata} from 'next';
 import {getUpdatedMetadata} from 'src/utils/getUpdatedMetadata';
+import NotFound from '@components/info/NotFound';
 
 export async function generateMetadata(
   {params}: {params: {uid: string}},
@@ -31,7 +31,7 @@ type ServiceProgrammeProps = {
 const ServiceProgramme = async ({params: {uid}}: ServiceProgrammeProps) => {
   const data = await getServiceStrapiData(uid);
 
-  if (!data || data.contenu.length === 0) return notFound();
+  if (!data || data.contenu.length === 0) return <NotFound />;
 
   return (
     <>
@@ -45,7 +45,7 @@ const ServiceProgramme = async ({params: {uid}}: ServiceProgrammeProps) => {
           case 'info':
             return <InfoService key={key} {...(c as InfoData)} />;
           default:
-            return notFound();
+            return <NotFound />;
         }
       })}
     </>

packages/site/components/info/NotFound.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable react/no-unescaped-entities */
+import Section from '@components/sections/Section';
+
+const NotFound = () => {
+  return (
+    <Section className="mt-32 md:mt-60">
+      <div className="flex items-center justify-center divide-x divide-black">
+        <h1 className="text-3xl font-normal pr-4">404</h1>
+        <h2 className="text-lg font-normal pl-4">Cette page n'existe pas</h2>
+      </div>
+    </Section>
+  );
+};
+
+export default NotFound;