Merge pull request #51 from hackerspace-ntnu/not-found

Add error and not found page

messages/en.json

@@ -11,6 +11,14 @@
     "morePages": "More pages",
     "page": "page"
   },
+  "error": {
+    "notFound": "404 - Page not found",
+    "notFoundDescription": "Oops! Looks like this page got lost in cyberspace.",
+    "error": "Oops! Something went wrong",
+    "errorDescription": "Don't worry, our best hackers are on it!",
+    "goToHomepage": "Return to homepage",
+    "tryAgain": "Try again"
+  },
   "layout": {
     "hackerspaceHome": "Hackerspace homepage",
     "navigationMenu": "Navigation menu",

messages/no.json

@@ -11,6 +11,14 @@
     "morePages": "Flere sider",
     "page": "side"
   },
+  "error": {
+    "notFound": "404 - Siden ble ikke funnet",
+    "notFoundDescription": "Oops! Ser ut som denne siden gikk seg vill i cyberspace.",
+    "error": "Oops! Noe gikk galt",
+    "errorDescription": "Ikke bekymre deg, våre beste hackere jobber med saken!",
+    "goToHomepage": "Gå tilbake til hjemmesiden",
+    "tryAgain": "Prøv igjen"
+  },
   "layout": {
     "hackerspaceHome": "Hackerspace hjemmeside",
     "navigationMenu": "Navigasjonsmeny",

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "prepare": "if [ \"$NODE_ENV\" != \"production\" ]; then lefthook install; fi",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "lint": "biome check --write",
     "prebuild": "next telemetry disable",
     "build": "next build",

src/app/[locale]/error.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import { AlertTriangleIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  const t = useTranslations('error');
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center px-4 text-center'>
+      <AlertTriangleIcon className='mb-6 xs:mb-8 size-16 xs:size-24 text-destructive' />
+      <h1 className='mb-3 xs:mb-4 font-bold text-3xl xs:text-4xl'>
+        {t('error')}
+      </h1>
+      <p className='mb-4 text-lg text-muted-foreground xs:text-xl'>
+        {t('errorDescription')}
+      </p>
+      {error.message && (
+        <p className='mb-6 rounded-md bg-muted p-2 text-sm xs:text-base'>
+          Error: {error.message}
+        </p>
+      )}
+      <div className='flex w-full xs:w-auto xs:flex-row flex-col xs:space-x-4 space-y-4 xs:space-y-0'>
+        <Button onClick={reset} variant='outline' className='w-full xs:w-auto'>
+          {t('tryAgain')}
+        </Button>
+        <Button asChild className='w-full xs:w-auto'>
+          <Link href='/'>{t('goToHomepage')}</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

src/app/[locale]/not-found.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@/components/ui/Button';
+import { Link } from '@/lib/locale/navigation';
+import { HardDriveIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+export default function NotFoundPage() {
+  const t = useTranslations('error');
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center px-4'>
+      <HardDriveIcon className='mb-6 xs:mb-8 size-16 xs:size-24 text-primary' />
+      <h1 className='mb-3 xs:mb-4 font-bold text-3xl xs:text-4xl'>
+        {t('notFound')}
+      </h1>
+      <p className='mb-6 xs:mb-8 text-lg text-muted-foreground xs:text-xl'>
+        {t('notFoundDescription')}
+      </p>
+      <Button className='w-full xs:w-auto' asChild>
+        <Link href='/'>{t('goToHomepage')}</Link>
+      </Button>
+    </div>
+  );
+}

src/app/not-found.tsx

@@ -1,9 +1,13 @@
 'use client';
 
-import { routing } from '@/lib/locale';
-import { redirect, usePathname } from 'next/navigation';
+import NextError from 'next/error';
 
-export default function NotFound() {
-  const pathname = usePathname();
-  redirect(`/${routing.defaultLocale}/${pathname}`);
+export default function NotFoundPage() {
+  return (
+    <html lang='en'>
+      <body>
+        <NextError statusCode={404} />
+      </body>
+    </html>
+  );
 }

src/components/providers/IntlErrorProvider.tsx

@@ -6,12 +6,9 @@ type Props = {
 };
 
 function IntlErrorProvider({ children, locale }: Props) {
-  const messages = useMessages();
+  const { error } = useMessages();
   return (
-    <NextIntlClientProvider
-      locale={locale}
-      messages={messages.error as Messages}
-    >
+    <NextIntlClientProvider locale={locale} messages={{ error } as Messages}>
       {children}
     </NextIntlClientProvider>
   );