refactor: upgrade app and it's dependencies to support next.js 14 (#…

…237)

* chore: enable sentry only if `NODE_ENV=production`

- this fixes CORS issues due to sentry capturing requests

* refactor: use constant for login url

* refactor: disable loader anyways

* chore: update `next`

* refactor: use new instrumentation for sentry

- recommended by Sentry

* chore: update application deps

* feat: add instrumentation hook

* feat: make app invisible to crawlers

* chore: update app dependencies

* refactor: organize imports

* refactor: remove loading

- the component adds unnecessary loading and prevents smooth redirections

* refactor: use `Ory` native SDK for calls

* style: place footer at the bottom effectively

* style: make caret transparent

* chore: update dependencies

* fix: include query on redirections

* refactor: move active session validation to server

* refactor: use server components whenever possible

* style: use desktop first approach

* fix: use workaround if account gets half-created

if endpoint returns `500` but account gets created anyways, create
a verification flow and redirect to the proper screen

* refactor: use new amplify config

* refactor: add new liveness translations

* ci: use AWS json config

* fix: use correct path

* refactor: remove unnecessary imports

* refactor(style): move photosensitivity alert to first screeen

* refactor(style): use smaller loading UI

- loader now presents ongoing action next to text input

* fix(style): improve liveness positioning

* ci: merge `master` into `refactor/next-14`

* style(header): use minimum height size

* feat: add global error handler

* refactor: resolve deprecation

* refactor(gtm): use next own GTM implementation

* chore: package maintenance

- removed useless packages
- upgraded packages

* style(liveness): fix missing text

- improve UX a bit

* chore: merge `master` into `refactor/next-14`

* chore: update app dependencies

* chore: restore missing deps

* perf: render `not-found` page in server

* ci: use new config

* ci(build): ditch deprecated env declaring style

* chore: update application dependencies

* chore: update application dependencies

* chore: update app dependencies

---------

Co-authored-by: Marluan Espiritusanto <[email protected]>

Dockerfile

@@ -64,7 +64,7 @@ COPY . .
 COPY . ./
 
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
-RUN --mount=type=secret,id=AWS_EXPORTS_JSON,target=./src/aws-exports.js \
+RUN --mount=type=secret,id=AWS_EXPORTS_JSON,target=./src/amplifyconfiguration.json \
     pnpm run build
 
 # ===================== App Runner Stage =====================
@@ -85,8 +85,8 @@ USER nextjs
 
 EXPOSE ${PORT}
 
-ENV PORT ${PORT}
-ENV HOSTNAME 0.0.0.0
+ENV PORT=${PORT}
+ENV HOSTNAME=0.0.0.0
 
 HEALTHCHECK CMD wget -q localhost:3000
 

instrumentation.ts

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/nextjs';
+
+const { version, name } = require('./package.json');
+
+export function register() {
+  Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    tracesSampleRate: 1,
+    debug: false,
+
+    enabled: process.env.NODE_ENV === 'production',
+
+    // release: `${process.env.npm_package_name}@${process.env.npm_package_version}`,
+    release: `${name}@${version}`,
+  });
+}

next.config.js

@@ -1,9 +1,13 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: true,
   experimental: {
-    serverActions: true,
+    instrumentationHook: true,
+    serverComponentsExternalPackages: [
+      '@aws-amplify/adapter-nextjs',
+      'aws-amplify',
+    ],
   },
-  reactStrictMode: true,
   output: 'standalone',
   webpack: (config, { webpack, isServer, nextRuntime }) => {
     // Avoid AWS SDK Node.js require issue

package.json

@@ -35,61 +35,58 @@
     }
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "^5.3.2",
-    "@aws-amplify/ui-react-liveness": "^2.0.11",
-    "@aws-sdk/client-rekognition": "^3.449.0",
+    "@aws-amplify/adapter-nextjs": "^1.2.7",
+    "@aws-amplify/ui-react": "^6.1.13",
+    "@aws-amplify/ui-react-liveness": "^3.1.1",
+    "@aws-sdk/client-rekognition": "^3.614.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@formatjs/intl-localematcher": "^0.5.4",
-    "@hookform/resolvers": "^3.4.0",
-    "@mui/icons-material": "^5.15.17",
-    "@mui/material": "^5.15.17",
-    "@ory/client": "^1.9.0",
+    "@hookform/resolvers": "^3.9.0",
+    "@mui/icons-material": "^5.16.4",
+    "@mui/material": "^5.16.4",
+    "@next/third-parties": "^14.2.5",
+    "@ory/client": "^1.14.0",
     "@ory/integrations": "^1.2.1",
-    "@sentry/nextjs": "^7.80.0",
-    "@thgh/next-gtm": "^0.1.5",
-    "aws-amplify": "^5.3.12",
+    "@sentry/nextjs": "^8.18.0",
+    "aws-amplify": "^6.4.0",
     "check-password-strength": "^2.0.10",
-    "hibp": "^13.0.0",
+    "hibp": "^14.1.1",
     "negotiator": "^0.6.3",
-    "next": "^13.5.6",
+    "next": "^14.2.5",
     "next-recaptcha-v3": "^1.4.1",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-gtm-module": "^2.0.11",
-    "react-hook-form": "7.47.0",
-    "react-imask": "^7.6.0",
-    "sharp": "^0.32.6",
-    "typescript": "^5.2.2",
+    "react-hook-form": "7.52.1",
+    "react-imask": "^7.6.1",
+    "typescript": "^5.5.3",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.4.0",
-    "@commitlint/config-conventional": "^18.4.0",
-    "@testing-library/react": "^15.0.7",
-    "@types/cookie": "^0.5.4",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@testing-library/react": "^16.0.0",
+    "@types/cookie": "^0.6.0",
     "@types/negotiator": "^0.6.3",
-    "@types/node": "^20.12.12",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-google-recaptcha": "^2.1.9",
-    "@types/react-gtm-module": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "aws-crt": "^1.19.0",
-    "encoding": "^0.1.13",
-    "eslint": "^8.53.0",
-    "eslint-config-next": "^13.5.6",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "aws-crt": "^1.21.3",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.0.11",
-    "install-peers": "^1.0.4",
-    "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.2",
-    "prettier": "^3.0.3",
-    "vitest": "^1.6.0"
+    "jsdom": "^24.1.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.3",
+    "vitest": "^2.0.3"
   }
 }