[add] custom 404 page for NGO (#42)

README.md

@@ -23,6 +23,9 @@
 2. [Editor components](pages/component.tsx)
 3. [Pagination table](pages/pagination.tsx)
 4. [Scroll list](pages/scroll-list.tsx)
+5. [Not Found page (NGO)](pages/_error.tsx)
+   - Global: https://notfound.org/
+   - Chinese: https://www.dnpw.org/cn/pa-notfound.html
 
 ## Best practice
 

components/NotFoundCard.tsx

@@ -0,0 +1,20 @@
+import { ErrorProps } from 'next/error';
+import { FC } from 'react';
+
+import { i18n } from '../models/Translation';
+
+export const NotFoundCard: FC<ErrorProps> = ({ title }) =>
+  i18n.currentLanguage.startsWith('zh') ? (
+    <script
+      src="//cdn.dnpw.org/404/v1.min.js"
+      // @ts-ignore
+      jumptarget="/"
+      jumptime="-1"
+      error={title}
+    />
+  ) : (
+    <iframe
+      className="w-100 vh-100 border-0"
+      src="https://notfound-static.fwebservices.be/en/404?key=66abb751ed312"
+    />
+  );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idea2app/next-bootstrap-ts",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "engines": {
@@ -10,23 +10,23 @@
     "@editorjs/code": "^2.9.0",
     "@editorjs/editorjs": "^2.30.2",
     "@editorjs/header": "^2.8.7",
-    "@editorjs/image": "^2.9.1",
+    "@editorjs/image": "^2.9.3",
     "@editorjs/link": "^2.6.2",
-    "@editorjs/list": "^1.9.0",
+    "@editorjs/list": "^1.10.0",
     "@editorjs/paragraph": "^2.11.6",
     "@editorjs/quote": "^2.6.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.5",
-    "@sentry/nextjs": "^8.18.0",
+    "@sentry/nextjs": "^8.22.0",
     "copy-webpack-plugin": "^12.0.2",
     "editorjs-html": "^3.4.3",
     "idea-react": "^2.0.0-rc.2",
     "koajax": "^1.1.2",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "lodash": "^4.17.21",
-    "mobx": "^6.13.0",
+    "mobx": "^6.13.1",
     "mobx-github": "^0.3.2",
     "mobx-i18n": "^0.5.0",
     "mobx-react": "^9.1.1",
@@ -50,19 +50,19 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.7",
-    "@babel/plugin-transform-typescript": "^7.24.8",
+    "@babel/plugin-transform-typescript": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^18.19.40",
+    "@types/node": "^18.19.42",
     "@types/react": "^18.3.3",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "husky": "^9.0.11",
+    "husky": "^9.1.4",
     "lint-staged": "^15.2.7",
     "prettier": "^3.3.3",
-    "typescript": "~5.5.3"
+    "typescript": "~5.5.4"
   },
   "prettier": {
     "singleQuote": true,

pages/_error.tsx

@@ -1,19 +1,33 @@
 import * as Sentry from '@sentry/nextjs';
+import { parseCookie, parseLanguageHeader } from 'mobx-i18n';
 import type { NextPage } from 'next';
 import type { ErrorProps } from 'next/error';
 import Error from 'next/error';
 
-const CustomErrorComponent: NextPage<ErrorProps> = ({ statusCode }) => (
-  <Error statusCode={statusCode} />
+import { NotFoundCard } from '../components/NotFoundCard';
+import { i18n } from '../models/Translation';
+
+const CustomErrorComponent: NextPage<ErrorProps> = props => (
+  <>
+    <Error {...props} />
+
+    <NotFoundCard {...props} />
+  </>
 );
+const enableSentry =
+  process.env.NODE_ENV === 'development' || !process.env.SENTRY_AUTH_TOKEN;
 
 CustomErrorComponent.getInitialProps = async contextData => {
-  await Sentry.captureUnderscoreErrorException(contextData);
+  const { 'accept-language': acceptLanguage, cookie } =
+    contextData.req!.headers;
+  const { language } = parseCookie(cookie),
+    languages = parseLanguageHeader(acceptLanguage || '');
+
+  await i18n.loadLanguages([language, ...languages].filter(Boolean));
+
+  if (enableSentry) await Sentry.captureUnderscoreErrorException(contextData);
 
   return Error.getInitialProps(contextData);
 };
 
-export default process.env.NODE_ENV === 'development' ||
-!process.env.SENTRY_AUTH_TOKEN
-  ? Error
-  : CustomErrorComponent;
+export default CustomErrorComponent;