Merge pull request #267 from codern-app/feat/404-page

feat: 404 page

.github/workflows/reusable-pull-request-deployment.yml

@@ -67,14 +67,3 @@ jobs:
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
           projectId: '${{ secrets.FIREBASE_PROJECT_ID }}'
           target: 'web'
-
-      - name: Build Storybook
-        run: yarn build-storybook
-
-      - name: Deploy Storybook to Firebase Hosting (Preview)
-        uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
-          projectId: '${{ secrets.FIREBASE_PROJECT_ID_STORYBOOK }}'
-          target: 'storybook'

i18n/en.json

@@ -33,5 +33,10 @@
   },
   "recommendations": {
     "title": "Recommendations"
+  },
+  "404": {
+    "title": "Page not found",
+    "message": "The page you are looking for does not exist.",
+    "back": "Back to home"
   }
 }

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build && next-sitemap",
-    "start": "next start",
+    "start": "npx serve out",
     "lint": "next lint",
     "test": "npx jest",
     "storybook": "npx storybook dev -p 6006",
@@ -49,6 +49,7 @@
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "prettier": "3.2.5",
+    "serve": "^14.2.3",
     "storybook": "8.0.0"
   },
   "packageManager": "[email protected]"

pages/404.tsx

@@ -0,0 +1,34 @@
+import { WrapperComponent } from '../features/navigation/components/wrapper.component';
+import { Alert, Button, Container, Typography } from '@mui/material';
+import React from 'react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+
+export default function NotFound() {
+  const t = useTranslations('404');
+  return (
+    <WrapperComponent>
+      <Container>
+        <Typography
+          variant="h1"
+          sx={{
+            marginTop: 12,
+            marginBottom: 1,
+          }}
+        >
+          {t('title')}
+        </Typography>
+        <Alert severity="error">{t('message')}</Alert>
+        <Button
+          variant="contained"
+          sx={{
+            marginTop: 4,
+            marginBottom: 4,
+          }}
+        >
+          <Link href="/">{t('back')}</Link>
+        </Button>
+      </Container>
+    </WrapperComponent>
+  );
+}